書き方のコダワリ色々
個人的にコダワリを持って書いてるけど、細かすぎて意図が伝わらないことが多いCSSの書き方についてピックアップしました。
それぞれプロパティごとに解説をしていきたいと思います。
font
ポイント
- font-size
- line-height
- font-family
上記はこのようにまとめて書くことが可能。
font: 0.875em/1.6 Meiryo, 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
が、上記は以下のような指定をするのと同じになるので
font-size: 0.875em;
line-height: 1.6;
font-family: Meiryo, 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
扱いに注意が必要。
（指定していないfont-style,font-variant,font-weightにも初期値が割り当てられているため、コンテンツ内で使う場合は想定していないリセットが起こる可能性があることに十分に気をつける）
得られるもの
見た感じスッキリする。文字数削減。
font-size
ポイント
ベースとなるフォントサイズ（root要素に指定するフォントサイズ）はemで指定する。
font: 0.875em/1.6 Meiryo, 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
何故、emで指定するのかについては、こちらの記事で詳しい解説をしています。
得られるもの
ユーザビリティ。
font-weight
ポイント
normal,boldじゃなく
400,700のように数値を使う。
font-weight: 700;
得られるもの
文字数削減。
color
ポイント
カラーコードが省略可能な場合は3桁で記述する。
color: #ccc;
得られるもの
文字数削減。（滅多になくなりましたがガラケー対応が必須のときは、キャリアによってバグがあるので6桁で記述しましょう）
background-position
ポイント
left,right,top,bottom,centerじゃなく
0,100%のように最初から数値を使う
background-position: 100% 50%;
得られるもの
文字数削減。
Firebug等で数字を増減させるだけで、すぐに位置調整が出来る。
ちなみにcss3で拡張されたbackground-positionで、
右や下基準で配置する場合、数値指定だとダメですが、
background-position: right 20px center;
background-position: 100% 20px 50%; /* コレだと動作しない */
対応ブラウザ：Cr 25+, FF 13+, IE 9+, Op 10.5+, Sf6+
background-position: calc(100% - 20px) 50%;
対応ブラウザ：Cr 19+, FF 4+, IE 9+, Op 15+, Sf6+, An4.4+（ベンダープレフィクス付きの場合）
このようにcalcを利用した指定をすれば同じことが可能です。
動作するブラウザもcalcを利用した書き方のほうが微妙に多い。（ベンダープレフィクスなしの場合は同程度）
margin
ポイント
要素間の上下marginは上方向に統一して指定する。
何故、上方向に取るほうが最適なのかについては、こちらの記事で詳しい解説をしています。
ul > li { margin-top: 12px; }
ul > li:first-child { margin-top: 0; }
:first-childは特殊な例を除きIE7から対応しているが、
ul > li { margin-bottom: 12px; }
ul > li:last-child { margin-bottom: 0; }
:last-childはIE9からの対応となる
得られるもの
メンテナンス性、ブラウザ対応度
display:table-cell;
IE8に対応した縦横中央揃え実現に便利なdisplay:table-cell;だが、なるべく使わない。
理由として、display:table-cell;は行を改める場合にdisplay:table-row要素
（もしくはdisplay:table;で仕切りなおすか）が必須なので、
デバイス対応で必要となる柔軟なレイアウト性に欠ける。
また、display:table-cell;の要素にはmin-heightが効かない。（代替手段もあるが、それを利用すると肝心のvartical-alignが該当要素で効かなくなる。）
ポイント
display:inline-block;と擬似要素を利用した縦横中央揃えを使用する。
上記の場合にネックとなる個々にheightが異なるケースには高さを揃えるプラグインで対応する。
IE10以上の対応となる場合はdisplay:flexbox;でも対応可。（ベンダープレフィクス必須、IE11以降はdisplay:flex;）
得られるもの
メンテナンス性、デバイス対応での柔軟なレイアウト
text-indext:-9999px;（代替案考察）
上記は画像置換でよく使われる手法だが、レンダリングのパフォーマンス面やキーボードフォーカス時の点線などが問題になることがある。
ポイント
代替案としては2つあるが、後者を使うことが多い。
.hide-text {
height:20px;
width:120px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: url("/images/xxxx.jpg") 0 0 no-repeat;
}
こちらのコードの場合、text-indent: 100%;でテキストを右方向に吹っ飛ばす。
以前採用してみたところ、レガシィブラウザでレンダリングが上手くいかないケースがあった。
hasLayout関連かと思ったが、zoom:1;でも解決出来ず。
（レイアウトによっては、上手くいく場合もあったので結局よくわからず）
.hide-text {
height:0px;
width:120px;
padding-top:20px;
overflow: hidden;
line-height: 10;
background: url("/images/xxxx.jpg") 0 0 no-repeat;
}
こちらのコードの場合、line-heightでテキストを下方向に吹っ飛ばす。
高さを0pxにして、画像表示分をpadding-topで確保するのがポイント。
IE6,IE7等でも全く問題なし。
得られるもの
パフォーマンス、ユーザビリティを損ねることなく画像置換を実現
Grid System
ポイント
960pxのグリッドシステムなど、特定の数値のグリッドシステムに依存しないようにする。
理由としては、
- デザイナーがいつも一定のクオリティで仕上げてくれるとは限らない。
- どのような案件においても同様の画面幅が最適とは限らない。
- また、こちら記事ではデザイナーAndy Clarke氏のグリッドデザインに対する見解を次のように説明しています。
本来のグリッドデザインとは、「コンテンツに合わせて最適なグリッドを自分で設計すること」
グリッドシステムには「コラム」と「ガーター」があり、それに沿ってデザインパーツを配置するだけという考え方が多いかもしれないが、そうではない。コンテンツに合わせて都度グリッドを設計するのが正しい手法とのこと。
うーむ、確かにそうかも...
では、コンテンツに最適な幅としてデザインされたグリッドを自分で設計するにはどうしたらよいのか？
グリッドシステムを自作出来るようにすれば解決。例えばこんなのあるよ(｀・ω・´)
ちなみに普段はこんな感じのMixin(Sass)をよく使います。
得られるもの
特定の数値のグリッドシステムに依存しない
デバイスごとに、コンテンツに合わせた最適なグリッドを再現出来る
Remarks
段々とCSSどころじゃない濃い話になってしまいましたが、何かの参考になれば幸いです。