知らないと損している!知っていると便利なCSSをコピペで使おう

普段の仕事でよく利用するcssをまとめました。知っておくと便利なcssをいくつかまとめてみました。
わりと定番から、定番だけど忘れやすい。コピペしたかった!というコードも書きたいと思います。

clearfix – クリアフィックス

まずは基本のclearfixです。色んなやり方がありますが、これを長らく使っています。


画像置換

テキストを画像に変更する時は多いですね。
displayはblockでもいいです。


文字を…にするcss 文字数制限css

text-overflow: ellipsis;は 1行でのみ可能です。
スマホでよく利用しますね。


placeholderの文字色を変更する

プレイスフォルダーの文字色を変更する場合、こちらのコードを入れます。
IEは適応していませんので、jsを利用することになります。

IEでも適応させるには、ah-placeholder.js を利用します。

ローマ字を折り返す

これもよく利用しますね。
word-wrap:break-word;を入れればOKなのですが、tableで利用する場合は工夫が必要です。

tableで折り返す場合

以下の3行を入れることで適応可能です。

テーブルの時に英数字を折り返すcssの基本

ローマ字の折り返しも含めた、テーブルの基本的なソースはこちら。


borderを含ませる

borderを使う時は、設定しておくことが基本ですね。ベンダープレフィックスを入れた形はこちら。

ロールオーバー(マウスオーバー)のボタン

画像をhoverで切り替える場合の基本の形。下にhoverした画像を敷いておく方法です。


コンテンツが短いサイトのフッターの下に色を敷く場合

そんな案件をやるときは、htmlに文字を敷くのもありです。


スマホサイトで タップの色を変更

たまーに利用します。基本はデフォルトでよいと思います。


text-decoration:underline;が出ない場合は

コピペのコードではないですが、この前つまずいたところなので書いておきます。

line-height:1.0が指定されている場合が多いのでこれチェックです。
これ頭の片隅に入れておいてください。

IEハック

忘れやすいのでメモ。


というわけで、他に思いついたのがあれば、追加します。