皆さんこんにちは。フリーのマークアップエンジニア草野です。
しばらく間があいてしまいましたが、
今回も前回の引き続き、仮想テーブルレイアウトの活用例を紹介したいと思います。
今回は「display:table-cell;で横並びにしたボックスは、自動的に高さが揃う」という特徴を生かしたレイアウトを作ってみたいと思います。
完成目標はこちらになります。
・1行３列の横並びボックス
・中身のテキストの行数は可変
・中身のテキストの行数が変わっても常に上下センター揃え＆ボックスの高さも一定
上下センター揃え＋ボックスの高さ揃えという、どちらもdisplay:table-cell;が得意とするレイアウトの特徴を持ったレイアウトですので、とりあえず仮想テーブルにしてみたいと思います。
１．仮想テーブルレイアウトで横並びボックスを作る
まずul要素を仮想テーブルレイアウトで横並びにします。
【HTML】
<ul class="table-box"> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト<br>テキストテキスト</li> </ul>
【CSS】
/*簡易リセット*/
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
/*仮想テーブルの設定*/
.table-box{
display:table;
width: 100%;
}
.table-box li {
display: table-cell;
width:33.3333%;
padding: 40px 10px;
border:#ccc 1px solid;
background: #e7e7e7;
box-sizing: border-box;
vertical-align: middle;
text-align: center;
}
ul要素をtable、li要素をtable-cellとした1行3列の仮想テーブルとしましたので、
上下センター揃えも隣り合うボックスの高さ揃えも実現できています。しかし、
隣り合うtable-cellは基本的にborderを挟んで密着してしまうため、デザインのように
均等に余白をあけて配置することがそのままでは困難です。
仮想テーブルレイアウトを使いこなそう①で説明した通り、display:table-cell;を設定した要素ではmarginは無効となるため、通常のフロートレイアウトのようにmarginで余白を取ることはできません。また、今回はtable-cell自体に背景色がついているので、paddingをボックス同士の間隔として使うこともできません。
このような時、ひとつの選択肢になるのがborder-spacingの活用です。
２．border-spacingでtable-cell同士の間隔をあける
border-spacingは、表組みのセル同士の間隔を指定するプロパティです。
table要素に対してborder-collapse: collapse;を指定すると、隣り合うセルのborderは重なって１本の線として表示されますが、border-collapse: separate;を指定するとそれぞれが独立した線として表示され、そのborderとborderの間隔をborder-spacingとして設定できるようになります。これは仮想テーブルレイアウトに対しても有効であるため、次のような指定を加えるとtable-cell同士の間に隙間を持たせることができるようになります。
【CSS】
.table-box{
display:table;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
}
border-spacingで設定した余白は、セルに対して上下左右に付きますので、border-spacing:20px;と一律設定した場合、以下のような形となります。
これではレイアウト的に困る場合、例えば上下のみ、左右のみにborder-spacingを設定することも可能です。
●上下のみの場合： border-spacing: 0 20px;
●左右のみの場合： border-spacing: 20px 0;
※border-spacingの値にはpx値しか使えません。
※border-spacingの値を上下左右バラで指定することはできません。
３．両サイドの20pxの余白を無くす
border-spacingでセル間の間隔を確保した場合、仮想テーブルの両サイドにも必ずセル間と同じサイズの余白が入ってしまいますので、デザイン的にコンテンツ幅を揃えたい場合は少々困ります。
この場合は、仮想テーブルに親要素を追加して、その親要素の左右marginにborder-spacingと同サイズのネガティブマージンを指定してやると、全体のコンテンツ幅を調整することができます。
【HTML】
<div class=“space-between”> <ul class="table-box"> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト<br>テキストテキスト</li> </ul> </div>
【CSS】
.space-between{
margin-left: -20px;
margin-right: -20px;
}
いかがでしたか？
仮想テーブルレイアウトを使えば、「ボックスの高さ揃え＋コンテンツの上下中央揃え」といったレイアウトも怖くないですね。
ではまた次回！
