CSS入門:「display: table」を使って要素を横に並べる方法 | サービス | プロエンジニア

    CSS入門:「display: table」を使って要素を横に並べる方法

    • このページをはてなブックマークに追加

    CSSで要素を横に並べて表示する方法として「float」プロパティを使う方法があります。しかし、レスポンシブ・デザインに対応するサイト構築のための柔軟なレイアウトを作成するには、コードが少し複雑で分かりにくいのが難点でした。「display」プロパティの"table"や"table-cell"を使うとtableタグを使ったかのような表組みレイアウトが比較的簡単に実現できます。

    目次

    1. 要素を横並びで配置する方法
    【 display:table, display:table-cell 】

    ブロックレベルの要素を横並びに配置する「display:table, display:table-cell」の使い方をサンプルを元に見てゆきましょう。通常ブロックレベルのdivタグやulタグなどは以下のサンプル(dtable.html)ように縦並びでブラウザーに表示されます。

    ●dtable.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>CSS入門-displayプロパティの活用</title>
    <style>
    div{
    border: 1px solid #666;
    }
    </style>
    </head>
    <body>
    <h1>要素を横並びにする</h1>
    <div>一つ目のブロックレベル要素</div>
    <div>二つ目のブロックレベル要素です。</div>
    <div>三つ目のブロックレベル要素です。少し長めのテキストが入った領域です。</div>
    </body>
    </html>

    ●ブラウザーの表示(通常のdivタグ)

    dtable1

    このサンプルを使ってdivタグをテーブルのように表示させてみましょう。

    ●基本の書式

    「display:table」は<table>タグ、「display:table-cell」は<td>もしくは<th>タグと同じ使い方です。

    ●dtable.html

    ・・・省略・・・
    <style>
    .dtable{
    display: table; /* ブロックレベル要素をtableと同じように表示にする */
    }
    .dtable_c{
    display: table-cell;  /* ブロックレベル要素をtd(th)と同じように表示にする */
    border: 1px solid #666;
    }
    </style>
    </head>
    <body>
    <h1>要素を横並びにする</h1>
    <div class="dtable">
    <div class="dtable_c">
    一つ目のブロックレベル要素</div>
    <div class="dtable_c">
    二つ目のブロックレベル要素です。</div>
    <div class="dtable_c">
    三つ目のブロックレベル要素です。少し長めのテキストが入った領域です。</div>
    </div>
    </body>
    </html>

    「display:table」と「display:table-cell」はセットで使われることが多いプロパティです。横並びにしたいブロックレベル全体を「table」タグと同じようにdivタグで囲み"dtable"を設定しています。3つのブロックをセルとして扱うので"dtable_c"を設定しました。この3つの要素が横並びに配置されます。

    ●ブラウザーの表示([display:table]を使用)

    dtable2

    ▲ページトップへ戻る

    2. 要素を均等に配置する【 table-layout:fixed 】

    「display:table」を使うとはtableタグのように要素を均等に配置することも簡単にできます。

    ●dtable.html

    ・・・省略・・・
    <style>
    .dtable{
    display: table;
    table-layout:fixed; /* ブロックレベル要素を均等に配置 */
    width:400px; /* ブロックレベル要素全体の幅 */
    }
    .dtable_c{
    display: table-cell;
    border: 1px solid #666;
    }
    </style>

    先ほどの「dtable.html」のCSSを少し編集してみましょう。「display: table」の幅(width)を指定し、「table-layout:fixed」を追加してブロックレベル要素を均等に配置しています。

    ●ブラウザーの表示

    dtable3

    ▲ページトップへ戻る

    3. 要素の縦の位置を調整する【 vertivcal-align 】

    「display: table-cell」はtdタグと同様に要素の縦位置の調整も可能です。「vertivcal-align」プロパティを使ってブロックレベル要素の配置を調整します。

    ●dtable.html

    ・・・省略・・・
    <style>
    .dtable{
    display: table;
    table-layout: fixed;
    border-collapse: collapse; /* 境界線の重複を解除 */
    width: 400px;
    height: 200px;  /* ブロックレベル要素全体の高さ */
    }
    .dtable_c{
    display: table-cell;
    border: 1px solid #666;
    vertical-align: middle; /* 縦方向の高さを調整 */
    }
    </style>

    「display: table-cell」はtableタグのセルと同じ扱いが可能です。「vertical-align: middle」を設定して、縦位置を中央寄せに設定しました。またブロック全体(dtable)の高さ(height)と境界線の重複を解除する枠線を追加しています。

    ●ブラウザーの表示

    dtable4

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【PHP】サーバーサイドエンジニア|アドテクマーケティング★自社ツールの開発

    年収 :600万円〜

    ◆サーバーサイドエンジニアとして自社ツールの開発を担当 ◆最先端のマーケティングスキルも身につける...

    株式会社 ピアラ

    正社員

    【Java/PHP】システム開発エンジニア|企業グループIT部門◎100%自社内開発★未経験

    年収 :250万円〜350万円

    ◆700名規模グループ内のITシステムの開発や保守業務 ◆自社内開発100%!じっくりと業務に取り組める ◆...

    株式会社イノベーションネクスト

    正社員

    【LAMP】システムエンジニア|100%自社内開発★服装自由・フレックス◎独学可

    年収 :300万円〜350万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Java】システムエンジニア|100%自社内開発★在宅導入/時短OK◎働くママさん歓迎

    年収 :350万円〜600万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Python】開発エンジニア|自社ECサイト★マンガ×IT少数精鋭のベンチャー◎独学可

    ◆月間10億PVのマンガサービスを支えるPythonエンジニア ◆マンガに興味ある方!はじめはPython勉強意欲...

    株式会社TORICO