知らないと損している！知っていると便利なCSSをコピペで使おう
よく読まれている記事
普段の仕事でよく利用するcssをまとめました。知っておくと便利なcssをいくつかまとめてみました。
わりと定番から、定番だけど忘れやすい。コピペしたかった！というコードも書きたいと思います。
clearfix – クリアフィックス
まずは基本のclearfixです。色んなやり方がありますが、これを長らく使っています。|
1 2 3 4 5 6 7 8 9 10 11 12 |
.clearfix:after { content:"."; height:0; clear:both; display:block; visibility:hidden; } .clearfix { zoom:100%; } |
画像置換
テキストを画像に変更する時は多いですね。displayはblockでもいいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.hoge { display: inline-block; *display: inline; *zoom:1; width: 100px; height: 100px; overflow: hidden; margin:0; padding:0; border: none; background: url(hoge.png) no-repeat; text-align: left; vertical-align: middle; text-indent: -9999px; *text-indent:0; *line-height: 9999px; } |
文字を…にするcss 文字数制限css
text-overflow: ellipsis;は 1行でのみ可能です。スマホでよく利用しますね。
|
1 2 3 4 5 6 7 8 |
.extend-text-overflow { text-overflow: ellipsis; white-space: nowrap; overflow:hidden; width:100%; } |
placeholderの文字色を変更する
プレイスフォルダーの文字色を変更する場合、こちらのコードを入れます。IEは適応していませんので、jsを利用することになります。
|
1 2 3 4 5 6 7 8 9 10 |
/*for Webkit*/ .commentForm input::-webkit-input-placeholder { color: #aaa; } /*for Firefox*/ .commentForm input:-moz-placeholder { color: #aaa; } |
IEでも適応させるには、ah-placeholder.js を利用します。
ローマ字を折り返す
これもよく利用しますね。word-wrap:break-word;を入れればOKなのですが、tableで利用する場合は工夫が必要です。
tableで折り返す場合
以下の３行を入れることで適応可能です。|
1 2 3 4 5 6 7 |
table { table-layout:fixed; word-break:break-all; word-wrap:break-word; } |
テーブルの時に英数字を折り返すcssの基本
ローマ字の折り返しも含めた、テーブルの基本的なソースはこちら。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
table{ width:auto; border-spacing:0; border-collapse:separate; /border-collapse:collapse; /* ie6,7 */ border-right:1px solid #333333; border-bottom:1px solid #333333; table-layout:fixed; word-break:break-all; word-wrap:break-word; } th, td{ border-top:1px solid #333333; border-left:1px solid #333333; padding:5px; } |
borderを含ませる
borderを使う時は、設定しておくことが基本ですね。ベンダープレフィックスを入れた形はこちら。|
1 2 3 4 5 6 7 8 |
.hoge { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } |
ロールオーバー（マウスオーバー）のボタン
画像をhoverで切り替える場合の基本の形。下にhoverした画像を敷いておく方法です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.hoge{ background: url(hoge_on.png) no-repeat; width:300px; height:80px; margin-bottom:20px; } .hoge a{ background: url(hoge.png) no-repeat; width:300px; height:80px; display:block; text-indent:-9999px; overflow:hidden; } .hoge a:hover{ background:none; width:300px; height:80px; } |
コンテンツが短いサイトのフッターの下に色を敷く場合
そんな案件をやるときは、htmlに文字を敷くのもありです。|
1 2 3 4 5 6 7 8 |
html { background: #f6f6f6; } body { background: #fff; } |
スマホサイトで タップの色を変更
たまーに利用します。基本はデフォルトでよいと思います。|
1 2 3 4 5 6 7 |
a { color: #313131; -webkit-tap-highlight-color: rgba(140,140,140,0.4); text-decoration: none; } |
text-decoration:underline;が出ない場合は
コピペのコードではないですが、この前つまずいたところなので書いておきます。line-height:1.0が指定されている場合が多いのでこれチェックです。
これ頭の片隅に入れておいてください。
IEハック
忘れやすいのでメモ。|
1 2 3 4 5 6 7 8 9 10 11 |
.hoge { height: 34px; /* IE以外 */ _height: 30px; /* IE6 */ *height: 30px; /* IE7 */ height: 30px\9; /* IE8 */ } :root .hoge { height: 36px \0/; /* IE9 */ } |
というわけで、他に思いついたのがあれば、追加します。