CSSでカラムの作成方法〜floatとdisplay:tableの活用

HTML&CSS

CSSを使ってカラムを作成する復習です。
自分なりにいろいろなカラムを作るパターンを作成しておくとよいです。

スポンサーリンク

フロートを使った固定レイアウトのカラム

固定レイアウトのカラムはPC用のレイアウトでかつて多く使用されたパターンです。幅を固定にしてブラウザの幅に依存せずにデザインしますので型崩れが起こりにくいところが特徴です。最近ではスマートフォン対応などでPC固定のレイアウトは敬遠される傾向にあります。

固定レイアウトのカラムのサンプル
HTMLコード

    <section class="column">
        <h2 class="column__title">Column3</h2>
        <div class="column__wrapper">
            <div class="column__box_col_3">
                <img class="column__image" src="http://lorempixel.com/300/180/" alt="">
                <div class="column__description">
                    <div class="column__description-inner">
                        <div class="column__text">
                            <h3>小見出し</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
                             Sequi molestias fugiat optio,
                              quasi voluptatum ipsam qui blanditiis</p> 
                            <a href="#" class="button btn-default">READ MORE</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column__box_col_3">
                <img class="column__image" src="http://lorempixel.com/300/180/" alt="">
                <div class="column__description">
                    <div class="column__description-inner">
                        <div class="column__text">
                            <h3>小見出し</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
                             Sequi molestias fugiat optio,
                              quasi voluptatum ipsam qui blanditiis</p> 
                            <a href="#" class="button btn-default">READ MORE</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column__box_col_3">
                <img class="column__image" src="http://lorempixel.com/300/180/" alt="">
                <div class="column__description">
                    <div class="column__description-inner">
                        <div class="column__text">
                            <h3>小見出し</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
                             Sequi molestias fugiat optio,
                              quasi voluptatum ipsam qui blanditiis</p> 
                            <a href="#" class="button btn-default">READ MORE</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </section>

「.column__box_col_3」が3カラムの用のクラスです。このクラスに「float:left」を設定して3カラムの横並びにしています。
widthは明示的に指定をしており全体の幅が1200pxですから、それに収まるように計算をしています。カラムの間には10pxのマージンが入りますので。1200px-20pxとして1180px/3で算出します。電卓で計算をしてその値を使ってもよいのですが、今回はcalc()を使ってCSSで計算を行っています。

３つのカラムを囲む親要素の「.column__wrapper」には「overflow:hidden」でfloatの影響が後続に出ないようにしています。

CSSコード

@charset "utf-8";

html {
    font-size: 62.5%;
}

body {
    background: #fff;
    color: #333;
    text-align: center;
    font-size: 1.4rem;
    font-family: "Helvetica Neue", Helvetica, Arial,  "Hiragino Kaku Gothic ProN", Meiryo,sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.button {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.column {
    padding: 80px 0;
}

.column__wrapper {
    width: 1200px;
    margin: 60px auto 0;
    overflow: hidden;
}

.column__box_col_3 {
    border: 1px solid #333;
    float:left;
    width:calc((1200px - 20px)/3);
    margin-right: 10px;
}
.column__box_col_3:last-child {
    margin-right: 0;
}

.column__image {
    display: block;
    width: 100%;
}

.column__description {
    width: 100%;
    padding: 20px;
}

.column__text {
    font-size: 1.4rem;
    line-height: 2;
}

.column__text .button {
    width: 60%;
    margin-top: 20px;
    padding: 3px;
}

フロートを使った可変タイプのカラム

固定レイアウトと相反してブラウザの幅に従ってカラムが伸び縮みするタイプのカラムです。デバイスの多様化で固定レイアウトよりも可変タイプのレイアウトが好まれる傾向にあります。

可変レイアウトのカラムのサンプル

HTMLコード
HTMLコードは固定レイアウトと同じです。
固定レイアウトと同じ部分は一部省略しています。サンプルのコードを参照ください。

可変レイアウトの特徴は幅などの単位を％にすることです。まず基本の固定レイアウトを作成して（上のサンプル）1カラムの幅は、親要素に対して何パーセントのサイズになるのか算出しておく必要があります。今回は「calc((100% – 20px)/3)」を使って算出しています。
その他は固定レイアウトと変わりません。
CSSコード

/*一部省略*/

.column {
    padding: 80px 0;
}

.column__wrapper {
    width: 100%;
    margin-top: 60px;
    overflow: hidden;
}

.column__box_col_3 {
    border: 1px solid #333;
    float:left;
    width:calc((100% - 20px)/3);
    margin-right: 10px;
}
.column__box_col_3:last-child {
    margin-right: 0;
}
/*一部省略*/

display:tableを使用した可変タイプのカラム

かつてHTMLのデザインをテーブルタグを使用してコーディングしていた時代がありました。「display:table」を使用したカラム作成方法はこの時代に逆戻りしたような手法です。ただ、大きく違う点はHTMLのコーディングはそれぞれのタグに意味を持たせるセマンティックなコーディングを行います。決してtableタグを使用するわけではありません。
文法に従ってきっちりと構造化したHTMLのタグに対してCSSでその性格だけをtable関連のタグの性格を持たせます。
そしてfloatでは実現できないような機能をカラムに持たせるようにしたものです。例えば垂直方向の中央揃えなどです。

display:tableを使用したカラムのサンプル

HTMLコード

<section class="column">
        <h2 class="column__title">Column3</h2>
        <div class="column__wrapper">
           <div class="column__box">
                <div class="column__box-inner">
                    <div class="column__box-row">
                        <div class="column__box-content">
                            <img class="column__image" src="http://lorempixel.com/300/180/" alt="">
                        </div>
                    </div>
                    <div class="column__box-row">
                        <div class="column__box-content">
                            <div class="column__text">
                                <h3>小見出し</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
                                Sequi molestias fugiat optio,
                                quasi voluptatum ipsam qui blanditiis</p> 
                                <a href="#" class="button btn-default">READ MORE</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="column__box">
                <div class="column__box-inner">
                    <div class="column__box-row">
                        <div class="column__box-content">
                            <img class="column__image" src="http://lorempixel.com/300/180/" alt="">
                        </div>
                    </div>
                    <div class="column__box-row">
                        <div class="column__box-content">
                            <div class="column__text">
                                <h3>小見出し</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
                                Sequi molestias fugiat optio,
                                quasi voluptatum ipsam qui blanditiis</p> 
                                <a href="#" class="button btn-default">READ MORE</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column__box">
                <div class="column__box-inner">
                    <div class="column__box-row">
                        <div class="column__box-content">
                            <img class="column__image" src="http://lorempixel.com/300/180/" alt="">
                        </div>
                    </div>
                    <div class="column__box-row">
                        <div class="column__box-content">
                            <div class="column__text">
                                <h3>小見出し</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>
                                Sequi molestias fugiat optio,
                                quasi voluptatum ipsam qui blanditiis</p> 
                                <a href="#" class="button btn-default">READ MORE</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </section>

親要素の「.column__wrapper」を「display:table」としてテーブルの性格を持たせています。
「.column__box」には「display: table-cell」でセルの性格を持たせて横並びにします。そして更に入れ子状態のtableにして、「.column__box-row」には 「display:table-row」を設定して行の性格を持たせています。行分けをすることで、画像と説明分を1列2行の状態にしています。

「.column__wrapper」 の「 table-layout: fixed」で「.column__box」の横幅を均等にします。
「.column__wrapper」 の「border-collapse: separate」と「border-spacing: 10px」はカラム間のマージンの役目をします。
CSSコード

/*一部省略*/
.column {
    padding: 80px 0;
}

.column__wrapper {
    display: table;
    width: 100%;
    margin-top: 60px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 10px;
}

.column__box {
    position: relative;
    display: table-cell;
    border: 1px solid #333;
}

.column__box-inner{
    display:table;
    width: 100%;
}

.column__box-row{
  display:table-row;
}
/*一部省略*/
スポンサーリンク
タイトルとURLをコピーしました