これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。
ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある。
この記事はCSS Property Advent Calendar 2013の13日目、ちょうど真ん中の記事になる。明日は@thleapさんが書くようだ。
right: 100%を使うと、その要素の右端を親要素の左端と揃えることになる。親要素とはmargin-rightプロパティーにより自由に位置関係を調節することができる。
Demo: right: 100%
.test {
position: relative;
}
.test figure {
margin-right: 16px;
position: absolute;
top: auto;
right: 100%;
width: 320px;
}right: 100%は固定なので、位置調整を行うmargin-rightプロパティー以外は再利用可能になる。Sassなどではミックスイン化するのも容易だろう。ただしwidthプロパティーで明示的に幅を指定する必要があるのには注意が必要だ。
right: 100%を使うことの意味は、要素の右端を基準にしたいという意思をはっきりさせることだ。更にrightと名のつくプロパティーで位置を調節することにより、その意思を補強できる。シングルカラムのブログに良くある日付やタグだけ飛び出させてレイアウトというような場合には、メインに対して右端を基準に揃えたいということになるので、まさにピッタリだろう。
負のマージンを使うと要素をその分だけ外側に拡大するような形になる。更にpositionプロパティーと組み合わせることにより、拡大ではなくずらすという形にできるので、親要素の外側にレイアウトすることが可能になる。
Demo: Negative Margin
.test {
position: relative;
}
.test figure {
margin-left: -336px;
position: absolute;
}右端を揃えるコードに比べてシンプルになっているが、それは本質的な部分ではない。-336pxはマジック・ナンバー気味だが、calc()で計算できるようなものなのでそれほど問題にはならないだろう。また、topプロパティー等を利用していないので、absoluteの代わりにfixedを使うとその位置で本文についてくるようになってくれたりもする。使い所は限られてはいるがright: 100%では実現できない面白い効果ではあるだろう。
margin-leftプロパティーで負のマージンを使うことにより、左にずらすという意思をはっきりとさせることができる。具体的には固定幅の12カラム・レイアウトにおいて、1カラム分左にずらしたいなどというケースではright: 100%よりも適当になるだろう。CSSフレームワークでpullなどと呼ばれている機能がそれにあたり、負のマージンが使われることが多い。
簡単に言えば、レイアウト方法の選択はそのコードの簡便さや慣れなどという理由で行うべきではないということだ。なぜそのレイアウト方法を選択したのかはっきりと説明できないのはもっての外で、できることならそういう説明を言葉で行わなくても、コードによりその意思が十分に伝わることが望ましい。使ったCSSプロパティーの名称などは大いにその助けになる。
今後増えてくる新しいレイアウト方法も含め、どうレイアウトできるかではなくどのような意図のレイアウトなのかを意識して選択するべきだ。その結果としてあえて意図をストレートに反映したレイアウトを選択しないというケースも十分にありうる。例えばブラウザーのバグや未実装への対応のためなどはそういったケースに当てはまることになる。
いずれにしても簡便さや慣れを元にレイアウトを選択することは、Stack Overflowの代わりに過去からコピー・アンド・ペーストしているようなものだ。動作は保証されやすいが、コードにその時の意思は込められない。
新たなレイアウト方法が置き換えるのは、既存のレイアウト・テクニックのごく一部に過ぎない。それらはまるで魔法のようではあるが、決して全てをまかなえる万能の魔法ではない。様々なレイアウト・テクニックの意図を理解し、適切に選択する必要がある。CSSの仕様ではプロパティーの名前に強い意味が込められているので、多くの場合やりたいことを直観的に表現していたり、近い感覚の名称のCSSプロパティーを使ったレイアウト・テクニックを選択するのが良いだろう。