定義リストタグであるdl要素のdtとddを横並びにする際、ひと昔前はfloatを使ってゴチャゴチャしながら横並びにしてましたが、今回はflexを使った横並び方法のご紹介です。
実装方法
<dl> <dt>会社名</dt> <dd>〇〇商事株式会社</dd> <dt>電話番号</dt> <dd>011-000-0000</dd> </dl>
上記の様なHTMLの場合は、通常は下記の様に表示されます。当然ですが、ブラウザやdlに対して何かしらのCSSの指定がある場合は除きます。
プレビューサンプル
- 会社名
- 〇〇商事株式会社
- 電話番号
- 011-000-0000
これに以下のCSSを追加します。すると、サンプルの様にdtとddが横並びになります。
dl {
display: flex;
flex-wrap: wrap;
}
dl dt {
width: 40%;
}
dl dd {
width: 60%;
}
プレビューサンプル
- 会社名
- 〇〇商事株式会社
- 電話番号
- 011-000-0000
注意点ですが、dtとddの合計の幅はdlと同じ幅に指定しないとうまく横並びになりません。例えばdlの幅が100%の場合は、dt50%・dd50%の様に、dlときっちり同じ幅に収まるようにしないと崩れます。理由はdlに指定しているflex-wrap: wrap;のせいです。
flex-wrap: wrap;は親要素から子要素がはみ出したら折り返す指定です。今回の場合は親要素（dl）の最大幅からdisplay: flex;で横並びさせた子要素（dt・dd）の合計幅がはみ出す場合に折り返すという指定になります。つまり、親要素の幅100％に対してdtとddの合計を同じ100％に収めれば一行ずつきれいに折り返した様に見えるという仕組みです。
そのためflex-wrap: wrap;の指定を忘れたり、値にnowrap;を指定すると、全てのdtとddが横並びになってしまうので気を付けてください。
デザイン例
<div class="company_info"> <dl> <dt>会社名</dt> <dd>株式会社〇〇</dd> <dt>所在地</dt> <dd>〒000-0000 北海道札幌市中央区</dd> <dt>電話番号</dt> <dd>011-111-2222</dd> <dt>代表者</dt> <dd>札幌 太郎</dd> <dt>E-Mail</dt> <dd>xxx@xxxx.com</dd> <dt>お問い合わせ受付時間</dt> <dd>平日：09：00～18：00（土・日・祝 定休）</dd> </dl> </div>
.company_info dl {
display: flex;
flex-wrap: wrap;
}
.company_info dt {
width: 35%;
padding: 20px;
background-color: #DADADA;
margin: 0 0 10px 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.company_info dd {
width: 65%;
padding: 20px;
background-color: #F3F3F3;
margin: 0 0 10px 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
プレビューサンプル
- 会社名
- 株式会社〇〇
- 所在地
- 〒000-0000 北海道札幌市中央区
- 電話番号
- 011-111-2222
- 代表者
- 札幌 太郎
- xxx@xxxx.com
- お問い合わせ受付時間
- 平日：09：00～18：00（土・日・祝 定休）
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
