CSSでリストタグ（UL・DL）を横並びにする

コーディング2015.6.21

最終更新日：2019.7.12 Update!!

今回のテーマはウェブサイトをコーディングしていく中で、比較的登場する機会の多いリストタグを横並びにする方法を紹介したいと思います。リストタグはリスト項目を記述するHTMLタグで、順不同リストを表す＜ul＞、序列リスト＜ol＞、定義リスト＜dl＞の種類があります。このリストタグですが、そのまま記述した基本の形はリスト項目を表す＜li＞が縦方向に並ぶようになっています。

ウェブページのメニューボタンなどに使われるリストタグ

ウェブサイトの中でも重要な役割を果たすグローバルナビゲーション（各ページへの遷移ボタン）ですが、コーディングをする際にはリストタグを用いるのが一般的です。また、サイト内のページ階層構造を示すパンくずリストや新着情報、Q＆A、用語集などのコンテンツにも使われたり、何かと登場する場面が多いようです。リストを横方向に並べるにはCSSを使ってレイアウトをする必要があります。またリストタグの種類ごとに設定方法も異なるので各リストに合わせた方法を紹介していきます。

リスト項目（＜li＞タグ）を横並びにする

グローバルナビゲーションやパンくずリスト、テキストリンクなど、ウェブサイトのメニューにおいて一般的によく使われる形ですね。この＜li＞タグを横に並べる方法はいくつかありますが、レイアウトに応じた適切な方法を選択します。 【　 float：left ;　を使う　】 floatプロパティを使い、後に続く＜li＞を左に回り込ませる方法です。ページの右端に揃える場合などレイアウトによってはfloat：right；で右に配置していく場合もあります。floatを使っているのでメニューの終わる部分で解除する必要があります。（→こちらの記事も参考に：floatレイアウトに必須の「clearfix」について）＜＜　コード　＞＞

//HTML
<ul class="list_01 clearfix">
 <li>リスト</li>
 <li>リスト</li>
 <li>リスト</li>
</ul>

//CSS
ul.list_01 li {
 float: left;
 width: 200px;
 height: 50px;
 line-height: 50px;
}

＜＜　サンプル　＞＞

float_leftでリスト
float_leftでリスト
float_leftでリスト

※リスト項目でテキストを使う場合、リスト項目のheightとline-heightを合わせることで縦方向にセンタリングができます。（1行の場合のみ） 【　 display：inline-block ;　を使う　】 displayプロパティのinline-blockを使う方法です。リスト項目をインライン表示にすることで横に並ぶようになります。またinline-blockを使うことにより幅と高さを反映させることができます。テキストリンクなどの場合はdisplay：inline；でも問題ありません。注意点としては、改行やスペースなどでリスト間に不要な余白ができるのを防ぐためHTMLの記述の際にはリスト同士をコメントアウトで繋げる必要があります。＜＜　コード　＞＞

//HTML
<ul class="list_02">
 <li>リスト</li><!--
 --><li>リスト</li><!--
 --><li>リスト</li>
</ul>

//CSS
ul.list_02 li {
 display: inline-block;
 width: 200px;
 height: 50px;
 line-height: 50px;
}

＜＜　サンプル　＞＞

inline-blockでリスト
inline-blockでリスト
inline-blockでリスト

※リスト項目でテキストを使う場合、リスト項目のheightとline-heightを合わせることで縦方向にセンタリングができます。（1行の場合のみ） 【　display：table-cell；　を使う　】 displayプロパティのtable-cellで表組みのようにレイアウトする方法です。近年ではレスポンシブデザインが多くなってきていることもあり、この方法がとても便利です。記述方法もわかりやすく、レイアウト崩れも起こしにくいのがメリットです。table-cellはtdタグと同じような扱いになるので縦方向の文字の配置はvertical-alignプロパティを使います。＜＜　コード　＞＞

//HTML
<ul class="list_03">
 <li>リスト</li>
 <li>リスト</li>
 <li>リスト</li>
</ul>

//CSS
ul.list_03 li {
 display: table-cell;
 width: 200px;
 height: 50px;
 vertical-align: middle;
}

＜＜　サンプル　＞＞

table-cellでリスト
table-cellでリスト
table-cellでリスト

定義用語（＜dt＞タグ）・定義説明（＜dd＞タグ）を横並びにする

ウェブサイトの中では、日付のついた新着情報などでよく見かけますね。通常だと上下に並ぶdt要素とdd要素ですが、CSSを使って横に並べていきます。わかりやすいようにポイントに沿って説明を進めていきたいと思います。まずは通常通りHTMLを記述します。＜＜　コード　＞＞

//HTML
<dl class="list_04">
 <dt>定義用語</dt><dd>定義用語の説明文</dd>
 <dt>定義用語</dt><dd>定義用語の説明文</dd>
 <dt>定義用語</dt><dd>定義用語の説明文</dd>
</dl>

//CSS
dl.list_04 dt {
 float: left;
 clear: both;
 width: 200px;
 height: 50px;
 line-height: 50px;
}
dl.list_04 dd {
 margin-left: 200px;
 width: 400px;
 height: 50px;
 line-height: 50px;
}

＜＜　サンプル　＞＞

20xx年01月01日: 新着情報のお知らせ
20xx年01月01日: 新着情報のお知らせ
20xx年01月01日: 新着情報のお知らせ

1.　dtにfloatを指定しddを左に回り込ませる dtにfloatを指定することで後に続くddがdtの横に回り込むように配置されます。 2.　dtにclearを指定しddからのfloatを解除する それぞれのdtはfloatで回り込んでいるddのあとに続くので回り込まないようにclearで解除します。 3.　dtにwidthを指定しddの先頭を揃える ddが複数行になった場合、文頭がdtに合わせて揃ってしまいます。dtにwidthを指定することで幅が確保され、ddの文頭が揃います。 4. 　ddの左側にmarginもしくはpaddingでdtの幅にあたる分の余白を確保する 最後にddの左側にdtのサイズでマージンを取ることで、きれいにdtとddが横に並びます。

いかがでしょうか。HTM文法上正しくマークアップすることはとても重要ですし、サイト完成後のメンテナンスもリストタグを用いることで整理されてわかりやすくなり、編集も容易になります。ぜひ便利なリストタグを使いこなしてみてください。