カテゴリー

キーワード

 
> 【CSS】display:table-cell;...

【CSS】display:table-cell;で要素を横並びにする方法


2015 年 4 月 17 日 投稿    view: 83285
タグ:
このエントリーをはてなブックマークに追加

css table-cell

こんにちは、WEBマーケティング部の杉尾です。


今回はCSSで要素を横並びにする方法の第四回目として、


display: table-cell; 』を使う方法を紹介します。


ソースだけ見たい方はコチラ


floatでの横並びはコチラ
CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)
 


『display: inline-block; 』での横並びはコチラ
【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)


CSSで横並び 第四回目


displayプロパティについて

前回、『display: inline-block; 』で要素を横並びにする方法を紹介した際に、
displayプロパティについての説明をしました。


これは、HTMLタグで書いた要素をどのように表示するか指定するものです。


繰り返しになりますが、displayプロパティでよく使う値を列挙します。


inline・・・インラインボックスを生成する
block・・・ブロックボックスを生成する
inline-block・・・表示はインラインボックスだが、ブロックボックスのように高さや横幅、margin、paddingを指定できる。
table・・・table要素のような表示になる
table-cell・・・td要素のような表示になる


今回はこのうち、table-cellを使って、要素を横並びにします。


ブロックボックス、インラインボックスについてはコチラ
ブロックボックスとインラインボックス


display: table-cell; について

前項で挙げた説明に、display: table-cell;は『td要素のような表示になる』とありました。
親要素にdisplay:table;を指定するので、実質tableタグでレイアウトしているのとほぼ変わらない指定をすることができるようになります。


display: table-cell;のメリット

・CSS1の頃に使われていたtableタグによるレイアウトと同じような使い方ができる。
・縦方向の文字寄せができる。(vertical-alignプロパティが使える)
・borderやpaddingを使っても要素からはみ出さない。


display: table-cell;のデメリット

・IE7以下では使えない。(ブラウザシェアの下がった今はもう無視してもいいと思いますが)
・そのままでは子要素と子要素の間に隙間が生まれないので、別設定が必要。(ここがハマりどころ)


display:table-cell の使い方

では、参考ソースをどうぞ。
前回同様、横並びをよく使うグローバルメニューを例にとってみました。


HTML

<ul class="global_menu">
    <li>
        <a href="#1">
            menu1
        </a>
    </li>
    <li>
        <a href="#2">
            menu2
        </a>
    </li>
    <li>
        <a href="#3">
            menu3
        </a>
    </li>
    <li>
        <a href="#4">
            menu4
        </a>
    </li>
    <li>
        <a href="#5">
            menu5
        </a>
    </li>
</ul>

CSS

ul.global_menu {
    display:table;
    table-layout:fixed;
    width:500px;
}
ul.global_menu li {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:red;
    border-left:1px solid white;
}
ul.global_menu li:first-child {
    border:none;    
}
ul.global_menu li a {
    display:block;
    text-decoration:none;
    color:white;
}


display:table-cell;の説明画像1


解説

ポイントは親要素にdisplay:table;を指定し、子要素にdisplay:table-cell;を指定するというところです。
CSSの2行目7行目にそれがあります。
これだけの指定で子要素が横並びになります。


それから3行目のtable-layout:fixed;で子要素を均等幅になるように指定しています。
このときの注意点は親要素のwidthを必ず指定するということです。


8行目 垂直方向の位置揃えもできます。これはとても便利です。
11行目 子要素の領域がわかりやすいように間にボーダーを挟みます。左側だけにつけています。
13行目 最初の子要素の左側にはボーダーが不要ですので、擬似クラスのfirst-childで最初の子要素だけボーダーを消しています。
17行目 li要素の中にあるa要素にdisplay:block;をつけて、テキスト以外の部分もクリックできるように指定します。


画像では、ulタグのデフォルト設定である、marginとpaddingを0にしてあります。
ulの周囲に意図しない隙間ができた場合は、この設定のせいであることが多いです。


display:table-cell で子要素の間に隙間を開ける方法

上記ソースは、グローバルメニューですから隙間を開ける必要がありません。(デザインによってはありますが)
しかし、横並びにした子要素と子要素の間に隙間が欲しいということがよくあります。
その場合の対処法を紹介します。


HTMLは上記のままで、CSSを修正しました。
border-collapseborder-spacingを使う方法です。


CSS

ul.global_menu {
    display:table;
    table-layout: fixed;
    width:500px;
    border-collapse:separate;
    border-spacing:10px 0;
}
ul.global_menu li {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:red;
}
ul.global_menu li a {
    display:block;
    text-decoration:none;
    color:white;
}

display:table-cell;の説明画像2


解説

5行目6行目が追加した部分です。
border-collapseは、隣り合うセルのボーダーをどう表示するか指定します。
重ねて表示 ⇒ collapse
間隔をあけて表示 ⇒ separate


今回は隙間を空けるために『separate』を指定します。
そして、隣接するセルのボーダーとボーダーの間隔を指定するborder-spacingで隙間を空けます。


border-spacingは値を1つ指定すると、上下左右にそれが反映されます。
値を2つ指定した場合は【左右】【上下】の順にそれが反映されます。


ちなみに、border-spacingにはマイナスの値は適用されませんので、お気をつけください。



まとめ

今回紹介したdisplay:table-cell;での要素の横並びはIE7以下に対応していません。


IE8ですら切りどきを考えている現状ですから、個人的にはもはや気にすることはないと思いますが、状況によって『float』や『display:inline-block』と使い分けてください。


次回はFlexboxで横並びをする方法を紹介します。


最後までお読みいただき、ありがとうございました。



floatでの横並びはコチラ
CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)
 


『display: inline-block; 』での横並びはコチラ
【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事