複数の要素を横並びで表示させたい場合、これまでは display:inline; か float を使うか、あるいは <table> 要素で組むか、そのいずれかの方法を利用するのが一般的でした。
それが CSS3 からは display:table; と display:table-cell が新たに導入され、選択肢が増えたのと同時に、この方法を利用することで横並びの配置がずいぶんラクになりました。
例えば float を使って均等に配置させたいとき、それぞれの要素の横幅を指定する必要がありましたが、［display:table;］と［display:table-cell］を使えばブラウザ側が自動で要素の横幅を調整してくれるので余分な計算が不要になります。
最近のウェブサイトではレスポンシブ・デザインにするのが当たり前になっていますが、スマートフォンやタブレット端末などに対応するために横幅が可変します。
［display:table;］＆［display:table-cell］では、このような場合でも綺麗に横並びになるので必須の技術であると言えます。
今日はこの［display:table;］＆［display:table-cell］について詳しく説明していきます。
まずは実際に［display:table;］＆［display:table-cell］がどのように表示されるのか、以下よりサンプルをご覧ください。
ウィンドウサイズを変えてもそれぞれのボックスが均等に伸縮するのが確認できますね。
［display:table;］＆［display:table-cell］の基本的な使い方
［display:table;］＆［display:table-cell］は、文字どおりHTMLの <table>要素と同じように表示されます。
まずは親要素に display:table; を指定するところからスタートします。
続いて内包する複数の子要素に対して display:table-cell; を指定する。
基本的にはたったこれだけで機能します。
仮に以下のようなリストでHTMLを組んだとします。
<ul class="navi"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> </ul>
対してスタイルシートは次のように記述していきます。
.navi {
display:table;
table-layout:fixed;
width:100%;
text-align:center;
}
.nav li {
display:table-cell;
vertical-align:middle;
}
親要素に指定した display:table; によって「<table>」または「<tr>」と同じ働きになり、 display:table-cell; を指定した子要素が「<td>」と同じ扱いになります。
子要素を均等な幅にしたいときは［table-layout:fixed;］を使う。
先に紹介したコードにも記述してありますが、子要素を均等な幅で表示させたいときは table-layout:fixed; を指定します。
またこのとき、同時に横幅を指定することも重要です。
通常は width:100%; としておけば問題ないでしょう。
本当に簡単に横並びにできるので、使いどころも多く重宝するはずです。
使い方や仕様は暗記して覚えておきましょう。
ウェブサイトでお困りのときはオンズにお任せください！
