サイトのヘッダーメニューバーにも頻出の横並びのリストはCSSの勉強を始めると最初に立ちはだかる壁といっても過言ではないのでしょうか。
今回はulタグ、liタグを使用したリストを横並びにする方法を初心者の方にも分かりやすく解説していきます。
Contents
結論：リストを横並びするにはCSSで『display: flex;』を指定する
ulタグ、liタグを使用したリストを横並びにするためにはCSSで『display: flex;』を指定する必要があります。
細かくデザインを調整するためには他にも指定しなければいけないことがありますが、最低限することとしてはCSSで『display: flex;』することで解決できます。
今回はどのようなコードを記述して、縦に並んでいたリストを横並びにするのかを順序に沿って解説していきます。
その際使用するCSSについて、使い方が分からない方や復習したい方は『CSSの使い方、書き方を初心者でも分かりやすく解説』を参考にしてみてください。
準備：まずはulタグ、liタグでリストを作ろう
リストを横並びにするためにはまずリストを作らなければなりません。
これに関してはすでにできている方も多いと思いますので簡単な解説に留めます。横並びにするためのCSSのコードを知りたい人は飛ばしていただいて構いません。
リストはulタグとliタグを使用して作成します。
下記のコードを見てください。
<ul class="sample-list">
<li>list-item1</li>
<li>list-item2</li>
<li>list-item3</li>
</ul>
ulタグにclass属性として『sample-list』を指定した親要素を用意し、その子要素としてliタグを3つ記述し、3つの項目のリストを作りました。
上記の画像を分かりやすく解説すると、現状は『sample-list』という題のリストがあり、その項目として、『list-item1』、『list-item2』、『list-item3』があるということになります。
このコードでは左に『・』が振られたリストが表示され、並び順もデフォルトのままの状態である、縦に並んでいます。
これまでの解説の理解に不安のある方は下記の記事を参考にしてみてください。
それではここからこのリストを横並びにする方法を解説していきます。
１：display: flex;で横並びにする！
リストの横並びをする時だけであれば、CSSで『display: flex;』を指定するだけで、できてしまいます。
下記のコードを見てください。
.sample-list {
display: flex;
}
CSSでclass属性『sample-list』が指定されているulタグをセレクタとして、プロパティ『display』、値として、『flex』を指定しました。
上記の画像を見て分かるように、『display: flex;』でリストは横並びになりましたが、項目が重なってしまい、見づらくなってしまってます。
しかし、『display: flex;』の記述のみで、項目を横並びにすることはできたため、ここからはリストのデザインを調整していきます。
２：リストに打たれている『・』を消す！
ulタグ、liタグで作られるリストはデフォルトで項目の左に『・』が打たれています。
リストを横並びにした時のデザインはサイト制作者がどのような意図をもってデザインするかで変わってきますが、リストに打たれている『・』を消すことはどの場合でも必須事項になっています。
それではリストに打たれている『・』を消していきましょう。
下記のコードを見てください。
.sample-list {
display: flex;
list-style: none;
}
先ほど同じく、class属性『sample-list』が指定されているulタグをセレクタとして、プロパティ『list-style』、値として、『none』を指定しました。
上記の画像を見て分かるように、『list-style: none;』を追記することによって、項目の左に打たれている『・』を消すことができます。
『list-style: none;』は今回のように点を消すだけではなく、olタグで作った番号入りのリストにある番号を消すこともできます。
それらについてはCSS『list-style: none;』を使ってリストの点を消す方法を参考にしてみてください。
ここまでで、最低限必要なコードは揃いましたが、これではあまりにもデザインが粗末なものになってしまうので、デザインの調整が必要になってきます。
しかし、前述したようにここから先はサイト制作者の意図によってデザインが変わってきます。
そこで、ここからはリストを横並びにした後のデザイン例を２つ紹介していきます。
応用：リスト横並び後のデザイン例
ここで紹介するものをそのまま使用すると個性に欠けてしまいます。そのため、ここで紹介する知識をもとにあなただけのデザインを完成させてみてください。
１：ヘッダーメニューバーのボタン風
<ul class="menu">
<li>TOP</li>
<li>SERVICE</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>.menu {
display: flex;
list-style: none;
}
.menu li {
padding: 8px 25px;
border: 1px solid #000000;
}
HTMLではulタグとliタグでリストを作りました。
CSSでは親要素であるclass属性『menu』が指定されたulタグを『display: flex;』で横並びにし、『list-style: none;』でリストの・を消しました。
また、子要素では『padding: 8px 25px;』で余白を調整し、『border: 1px solid #000000;』で枠線を作りました。
とてもシンプルな作りですが、これはサイトに頻出するヘッダーのメニューバーにあるメニューボタンです。
これを元に余白の調整、色の設定、hover時の色の設定などをすることで、あなたのイメージ通りのメニューバーを作成することが可能となります。
２：オンラインショッピングサイトの商品紹介ページ風
<ul class="goods">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul> .goods {
display: flex;
flex-wrap: wrap;
list-style: none;
}
.goods li {
padding: 50px;
margin: 20px;
border: 1px solid #000000;
}
HTMLではulタグとliタグでリストを作りました。
CSSでは親要素であるclass属性『goods』が指定されたulタグを『display: flex;』で横並びにし、『list-style: none;』でリストの『・』を消しました。
また、『flex-wrap: wrap;』でリストの項目を一定の幅の中で折り返しされるように指定しました。
今回、『flex-wrap: wrap;』については解説しませんでしたが、『flex-wrap: wrap;』で横並びされたリストを折り返す方法で詳しく解説していますので、参考にしてみてください。
こちらもシンプルな作りですが、これはショッピングサイトの商品紹介ページで、いくつもの商品が並んでいるのを想定しています。
今回はそれぞれの商品を余白を作ることで商品紹介ページを作成しましたが、この部分を画像に変更し、クリックされることでその商品ページのリンクに飛べるようにすると、さらに利用者が使用しやすいサイトとなるでしょう。
また、今回はliタグで商品を一つずつ紹介していますが、実際はPHPのメインループ、サブループなどを使用する方が得策といえるでしょう。
今回は『display: flex;』を使用してのリストの横並びする方法について解説していきましたが、理解できたでしょうか。
『display: flex;』を使用しての横並びは多用されることが予測されます。ですが、特別難しいことでは決してありません。
一回で分からなくても、繰り返し使用していくことで必ず理解できるように技術です。諦めずにしがみついていきましょう。
