【CSS】スタイルシートの便利な定義

スタイルシートを利用していてその存在を初めて知った時に 「これは便利だ！」と思った定義の紹介します。

「margin」「padding」にマイナス値

「margin」や「padding」にマイナス値を指定することにより 親要素の範囲を超えて要素を広げることが出来ます。
親要素で「padding」が設定されていてもマイナス値を指定することで 親要素いっぱいに要素を表示させ目立たせる事等が可能です。

「calc」ファンクションで計算

固定幅（ピクセル等）を指定して残りの幅を指定したい場合、テーブル要素であれば問題なく 実現できるのですが「inline-block」等の要素を同一行に横並べにしたい場合は ブロック要素の特性上次の段に改行されてしまいます。
そういった場合にスタイルシートの「calc」ファンクションを利用して 「全体の幅-固定幅」の計算の結果を対象の要素の幅として指定することで 同一行に要素を配置することができます。 （この指定に加え要素内で文字の折り返しをさせたり画像幅を要素幅に縮小させるなどの指定も必要です。）

「calc」ファンクション以外にも変数を利用できる「var」ファンクションがありますが、 現状IEに対応しておらず、マルチブラウザ環境下で利用するのは控えた方が良いかと思います。

「box-sizing: border-box」で幅を含める

通常「padding」や「border」を指定すると「width」や「height」に 「padding」や「border」で指定した幅が含まれていません。
その為、「padding」の値を変更しただけでとレイアウトが崩れてしまう事があります。
そういった際はこの「box-sizing: border-box」を指定することにより、 「padding」や「border」の幅を「width」や「height」に含め、レイアウトを保持できます。

「!important」ルールで定義を優先

オープンソース等を利用したページにスタイルを適用させようとしても スタイルの優先順位の問題で思ったようにスタイルを適用することが出来ない場合がよくあります。
そういった場合は「!important」ルールを利用してスタイルを指定することにより そのスタイルの優先順位を上げることができます。
ただし、「!important」ルール同士でも優先順位はあるので、 多用すると定義が複雑になってしまうので注意が必要です。

「table-cell」で文字の縦位置を指定

「block」要素や「inline-block」要素では高さに対して「vertical-align」を指定することができません。
同様のレイアウトを実現させつつ「table-cell」を利用すると 「vertical-align」を指定して文字の縦位置を指定することが出来ます。

「first-child」疑似要素で同列の要素にスタイルを個別指定

リスト（ul-li）要素を利用する際に最初の要素にだけスタイルを適用させたい場合がよくあります。
そういった場合は「first-child」疑似要素を利用することにより 最初の要素にだけスタイルを適用することができます。
同様に「last-child」疑似要素を利用することで 最後の要素にだけスタイルを適用させる事もできます。