dl・dt・ddで作る会社概要ページでよく使われる定義リストの作り方

企業サイトの「会社概要」ページでは、表組みのように左に項目、右に内容を並べることが多いです。

1 サンプルHTML

<div class="company-profile">
    <dl>
        <div>
            <dt>会社名</dt>
            <dd>サンプル株式会社</dd>
        </div>

        <div>
            <dt>所在地</dt>
            <dd>東京都新宿区サンプル1-2-3</dd>
        </div>

        <div>
            <dt>設立</dt>
            <dd>2000年1月1日</dd>
        </div>

        <div>
            <dt>代表者</dt>
            <dd>山田 太郎</dd>
        </div>
    </dl>
</div>

2 サンプルCSS

ここでは、floatではなく、崩れにくく罫線付きで表示できるflexboxを使ったコードをご紹介します。

/* ------------------------- 
 * 会社概要スタイル
---------------------------- */

/* dl全体の余白とパディングをリセット */
div.company-profile dl {
    margin:0;    /* 上下左右の余白を0にする */
    padding:0;   /* 内側の余白を0にする */
}

/* 各行をflexで横並びにする */
div.company-profile dl div {
    display:flex;                 /* dtとddを横並びにする */
    border-bottom:1px solid #ccc; /* 行ごとに下線を引く */
    background:#fff;              /* 背景色を白に設定 */
}

/* dt（項目名）の設定 */
div.company-profile dl dt {
    flex: 0 0 13em; /* 横幅を13emに固定、縮めたり伸ばしたりしない */
    font-weight:normal; /* 太字にせず標準の文字ウェイト */
}

/* dd（内容）の設定 */
div.company-profile dl dd {
    flex:1; /* dt以外の残り幅を自動で使用 */
}

/* dtとdd共通の設定 */
div.company-profile dl dt,
div.company-profile dl dd {
    padding:12px 20px;   /* 上下12px、左右20pxの内側余白 */
    line-height:1.5;     /* 行間を設定して上下のバランスを均等に */
    margin:0;            /* 外側余白をリセット */
    color:#111;          /* 文字色を濃いグレーに設定 */
}

/* -------------------------
 * スマホ・タブレット用（幅767px以下）
---------------------------- */

@media only screen and (max-width: 767px) {
    /* 各行はflexのまま、折り返しで縦並びになる */
    div.company-profile dl div {
        flex-wrap: wrap; /* dtとddが狭い画面で縦に回る */
    }

    /* dtとdd共通の調整 */
    div.company-profile dl dt,
    div.company-profile dl dd {
        flex: 1 1 100%;   /* 狭い画面で幅100%に */
        box-sizing: border-box; /* padding込みで幅を計算 */
    }

    /* dtは少し目立たせる */
    div.company-profile dl dt {
        font-weight: bold;
    }

    /* ddの余白調整 */
    div.company-profile dl dd {
        padding-top: 5px;   /* dtとddの間に少しスペース */
        padding-bottom: 12px;
    }


    div.company-profile {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
    }
}

/* 表全体を枠線で囲む */
div.company-profile {
    border: 1px solid #ccc;   /* 全体を1pxのグレー線で囲む。 */
    border-radius: 5px;       /* 枠の角を丸くする。 */
    overflow: hidden;          /* 内部の子要素（行の下線など）が枠からはみ出さないようにする */
}
    

3 完成イメージ

次のように dt と dd を <div> で囲み、flexbox を適用することで、行の高さが揃い、どれだけテキストが折り返しても表が崩れることがなくなります。

4 まとめ

会社概要ページを <dl> で作ると HTML の意味としても適切ですが、float を使うと高さずれが起こることがありますので、flexbox を使うと、きれいに高さが揃うのでおすすめです。

5 関連記事リンク

▶ dl・dt・ddで作るTableタグ風の会社概要定義リストの作り方