もっと広まって欲しいCSS

CSS Property Advent Calendar 2013 2日目のエントリです。

何度も同じことを書いているのでいいかげんにしろっていう感じがしますが、僕がこの1年半くらいで「なぜ使われないのだ! もっと広まってくれ!」と思っている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;

  right: 5px;
  margin: auto;
  width: ***;
  height: ***;
}

この様に書けば良いです。左から 10px ずらしたいなら、上記ルールセットからright: 5px;を消して、left: 10px;を加えればOKです。左右中央でbottom: 10px;ももちろん出来ます。topからいくつずらしたい、とかは普通にtext-align: center;margin-topでやった方が簡単なので絶対中央配置の応用でやることはないと思いますが、まぁそれもできます。

どんな時に使う?

リンクリストのサンプル画像

リンクリストが2行取りになって高さが変わっても安心! ただし画像を使っているなら background でやる方が圧倒的に楽。パフォーマンスを追求してアイコンを div 図形にした場合などは今回のテクニックが有効。

吹き出しのサンプル画像

吹き出しの大きさが変わってもカラス口の配置は常に中央にできる。

入力エリアのようなもののサンプル画像

入力エリアのようなもののサンプル画像

高さが固定だったとしても、とにかく考えるのが面倒な時にも効果を発揮する

ということで、もっと広まって欲しい CSS でした。

Special Thanks! Firefox で使われている上下左右中央配置のスタイルシート | Unformed Building by @ub_pnr


position と四辺からの 0 値指定 を使った絶対中央配置、なんか呼び名はないかと思って探していたら、 CSS TRICKSのコメント欄に "TRBL" methodというフレーズがありました。top, right, bottom, left の頭文字でTRBLでしょうか。もし他の呼び名を知っている方がいたら 教えていただければと思います。