書いておくと便利なCSS13個。
どうもです。
先輩の書いたコードを複製してサイトの更新をすることが多いんだけど、先輩のコーディングに必ずと言っていいほど書いてあるCSSがあって、それを自分でも書けるようになりたいな〜と思って、備忘録的な意味で書き留めておこうかな、と。
・クリアフィックス
clearfixと言っても、ここではmicro cleatfixと呼ばれるものを記述。
詳しくはこちら。
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
なんでafterだけじゃなくbeforeも入れてるのかって言うとIE6とIE7対策でmarginの相殺を防止するためなんだよね。displayをtableにしてるのもそのためなんだけど、まぁ、今IE6とか7のシェアがどんだけなんだって感じだから今後はなくてもいいかな〜。floatを解除したいだけならdisplayもblockでいいみたいだし。
で、contentに半角スペースを入れてるのはOperaにcontent内に何も無いと認識されないバグがあったんだけど、これもまぁ改善されたみたいだから、別に何も無しでいいんじゃねぇかなぁ、と。
最後のzoom:1;は有名なIE対策。
※clearfixというclass名は任意。
・クリア
こっちは普通のclear:both;。
何かと使うからclearだけのclassがあると便利やな。
・マージンボトム
margin-bottomのclassもあると意外と便利。ちょっとこの要素の下に隙間欲しいな〜とか、そういう時に活躍する。デザインとの兼ね合いもあるんだけども。
・テキスト位置
text-alignのclass。たまに名前だけ右寄せとかタイトルだけ中央揃えとかあって、いちいちCSS書くのはめんどくせぇ時にめっちゃ楽。class名は分かり易く「textL」「textR」「textC」とかにしとくといいかも。
・見出し
h1とかh2とかの見出しに付ける用のclass。hに直接CSSを書くよりclassにした方が汎用性高くていいですな〜。名前は「headline1」「headline2」とか。
・リード文
見出しに近い意味合いで、hというより普通のpタグに付けるニュアンス。あんまり装飾せずに太字でちょっとフォントサイズ大きいくらいでいいんじゃないかと。class名はストレートに「lead」で。
・透過ロールオーバー
バナーとかメニューにマウスが乗った時に半透明になるようにするclass。具体的には下記。
.hover:hover{
display:block;
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;}
ややこしいけど、「hover」っていうclassを付けた要素がhoverされた時、という意味。透過はブラウザごとに微妙に指定を変えなきゃいけなくて、filterとかopacityとか付けなきゃいけないし、firefox用のベンダープレフィックスで-moz-も付けなきゃいけないからめんどいんだけど、これあると見栄えが良くなるから付けたいやつ。
・テーブル
tableタグのclass。サイトによるけど何かしらの表をコーディングすることはよくあるから最初にtableの指定をしちゃっておいた方が後々めんどくないかな、と。
・リスト
listはどんなサイトにも必ず出てくると思うから、先にどんな装飾をするか決めておくと便利だな〜。
・添える写真
写真の横にテキストがあるレイアウトを想定して、写真を左に寄せたり右に寄せたりする時のclass。名前は「figureL」「figureR」とかで。
・写真キャプション
画像の下にはだいたいキャプション(説明)が入るんだけど、通常のフォントサイズだと邪魔だし収まらないからキャプション用のclassを作っておく。で、まぁmargin-topをちょっとだけ付けておくと画像との間に余裕ができていいかも。名前は「figcaption」で良いかと。
・回り込み解除
回り込み解除ってことでoverflow:hidden;を付けるんだけど、先輩は名「nowraparound」(no wrap around)って名前付けるんだよなぁ...。もっと分かり易い名前あると思うんだけどなぁ...。ここだけはしっくり来ない...。笑
・1/2、1/3、1/4のボックス
グリッドレイアウト的な感じで、もともとのboxの大きさを決めておいて、それの1/2とか1/3を決めておく、みたいな考え方。まぁ、Bootstrap的とでも言うべきか....。
と、まぁザッとこんな感じ。
実際、もっと良いCSSが世の中にはあるとは思うんだけど、初心者の俺からしたらまずコレを覚えよう、みたいな。とりあえずCSSを書く時にはいつもこれを意識してて。これを自分の中で消化して、自分なりにアレンジできたらな〜と思っておりまする。
