Evernoteを掃除してたらでてきたCSS系の小技をまとめてみた。
ソースみたら納得するものの時間がったたら忘れるやつ。
サンプルないとわかりづらいかなと思ったので一部追加
よく忘れるCSSの小技 - jsdo.it
[css] clear fix
.cf:after{ content : ''; display : block; clear : both; height:0; }
[css] 画像置換
text-indent:-9999px;よりパフォーマンスを改善したやつ
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
[css] 上下中央揃え
<div class="sample">
<div>中央揃え</div>
<div>中央揃え<br />中央揃え</div>
<div>中央揃え<br />中央揃え<br />中央揃え</div>
</div>
.sample div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}
* html .sample div{ /* IE 6 */
display:inline;
zoom:1;
}
*:first-child+html .sample div{ /* IE 7 */
display:inline;
zoom:1;
}
display:table-cell; と vertical-align:middle; で無理なら
更にその上の親に対してdisplay: table;
[css] サイズがわからない要素の中央寄せ
色々やり方があるのでその時に応じて対応。
1.inline-blockを使用
<div class="sample">
<p>中央寄せ<br />inline-blockを使用</p>
</div>
.sample {
text-align: center;
background: #FFFFCC;
}
.sample p{
display: inline-block;
text-align: left;
/display: inline;
/zoom: 1;
}
2.positionを使用
<div class="sample">
<div>
<p>中央寄せ<br />positionを使用</p>
</div>
</div>
.sample {
position: relative;
overflow: hidden;
background: #FFFFCC;
}
.sample div {
position: relative;
left: 50%;
float: left;
}
.sample div p {
position: relative;
left: -50%;
}
[css] 親要素いっぱい領域を広げる
<div class="sample">
<div>
親要素に横幅と高さを指定
</div>
</div>
.sample {
position: relative;
width: 300px;
height: 100px;
}
.sample div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #FFFFCC;
}
[css] floatで並べたリストのセンタリング
<div class="sample">
<ul>
<li>中央寄せ</li>
<li>中央寄せ</li>
</ul>
</div>
.sample {
position: relative;
overflow: hidden;
background: #FFFFCC;
}
.sample ul {
position: relative;
left: 50%;
float: left;
list-style: none;
padding: 0;
}
.sample ul li {
position: relative;
left: -50%;
float: left;
}
[css] 高さを揃える
<div class="sample">
<div class="sample_01">高さを揃える</div>
<div class="sample_02">高さを揃える</div>
<div class="sample_03">高さ...</div>
</div>
.sample {
width: 100%;
display: -webkit-box; /* Safari,Google Chrome用 */
display: -moz-box; /* Firefox用 */
}
.sample_01 {
width: 200px;
background: #FFFFCC;
min-height: 25px;
}
.sample_02 {
width: 150px;
background: #FFFF99;
min-height: 30px;
}
.sample_03 {
width: 80px;
background: #FFFF66;
min-height: 40px;
}
[css] IEで画像にすきまができる...
vertical-align:bottom;
[css] スマホの細かい設定
/* タップ時のハイライトカラー*/
-webkit-tap-highlight-color:#f00;
/*テキストの選択をキャンセル*/
-webkit-user-select:none;
/*リンクの長時間タップでリンク内容をポップアップで表示させない場合*/
-webkit-touch-callout: none;
[css バグ] スマホのposition: fixed問題
position:fixed はiOS5、Android2.2以降が対応。
* Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動かない
* iOS5ではURLに#がついた状態だと挙動が不安定
* iOS5で他ページに遷移した後に、戻るボタンでページにもどると表示位置がずれる
* Androidではuser-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる
[css3] 背景画像とグラデの同時指定
背景の指定してからグラデーションの指定をする
.sample {
background: #CCC;
background: url(**.png) repeat 0 0,
-moz-linear-gradient(top, #eee, #999 20%, #eee);
background: url(**.png) repeat 0 0,
-webkit-gradient(
linear,
left top, left bottom,
color-stop(0, #eee),
color-stop(20%, #999),
color-stop(100%, #eee));
}
[css3] Android2用グラデ
.sample {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.51, #88000b), color-stop(0.50, #e50012));
background: -webkit-linear-gradient(top, #e50012 50%, #88000b 51%);
}
[css3] セレクタ
/* 1番目のみ */
li:nth-child(1) {
color: red;
}
/* 末尾から1番目のみ */
li:nth-last-child(1) {
color: blue;
}
/* 先頭から3つのみ */
li:nth-child(-n+3) {
}
/* 4番目以降のみ */
li:nth-child(n+4) {
}
/* 最後から3つのみ */
li:nth-last-child(-n+3) {
}
/* 最後から4つ目以前 */
li:nth-last-child(n+4) {
}
[css3] パディングとボーダーを幅と高さに含める
.sample {
width: 400px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
<div class="sample">box-sizing: border-box; を指定</div>