もっと広まって欲しいCSS
- 公開日
- タグ
- Advent Calendar
- CSS
CSS Property Advent Calendar 2013 ２日目のエントリです。
何度も同じことを書いているのでいいかげんにしろっていう感じがしますが、僕がこの１年半くらいで「なぜ使われないのだ！ もっと広まってくれ！」と思っている CSS について記載します。
position: absolute; を使った絶対中央配置
ある要素を包含ブロックのど真ん中に置きたい時はとにかく position: absolute; を使った絶対中央配置が便利です。大まかな書き方は親要素に position: relative; を指定したのち、配置したい子要素に対して下記を適用するというものです。
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: * * *;
height: * * *;
}
width, height については必ず大きさを指定してください。指定なしでもいけるのは絶対中央配置したい要素が img の時だけです。画像のサイズに依存しない方法や、margin にネガティブ値を指定した時の挙動などは下記エントリにまとめています。
このルールセットは Firefox 11、Google Chrome 18、Opera 11.62、Internet Explorer 8 から対応しています。
絶対中央配置の応用
特に上下の中央配置が便利な上記 CSS ですが、左右に関しては中央ではなくてもいいという場面もあるかと思います。そんな時でももちろん簡単な変更で対応可能です。
例えば、上下は中央、右から 5px だけずらしたい時。
.child2 {
position: absolute;
top: 0;
bottom: 0;
/* left の宣言をトルツメする */
right: 5px;
margin: auto;
width: ***;
height: ***;
}
この様に書けば良いです。左から 10px ずらしたいなら、上記ルールセットから right: 5px; を消して、left: 10px; を加えれば OK です。左右中央で bottom: 10px; ももちろん出来ます。top からいくつずらしたい、とかは普通に text-align: center; と margin-top でやった方が簡単なので絶対中央配置の応用でやることはないと思いますが、まぁそれもできます。
どんな時に使う？
リンクリストが２行取りになって高さが変わっても安心！ ただし画像を使っているなら background でやる方が圧倒的に楽。パフォーマンスを追求してアイコンを div 図形にした場合などは今回のテクニックが有効。
吹き出しの大きさが変わってもカラス口の配置は常に中央にできる。
高さが固定だったとしても、とにかく考えるのが面倒な時にも効果を発揮する
ということで、もっと広まって欲しい CSS でした。
Special Thanks! Firefox で使われている上下左右中央配置のスタイルシート | Unformed Building by @ub_pnr
position と四辺からの 0 値指定を使った絶対中央配置、なんか呼び名はないかと思って探していたら、CSS TRICKS のコメント欄に "TRBL" method というフレーズがありました。top, right, bottom, left の頭文字で TRBL でしょうか。もし他の呼び名を知っている方がいたら教えていただければと思います。