04 ホームページ中級講座 display:flex のおさらい

下記の講座で、ナビゲーションについてのコード練習を行ってきました。
今回は改めて、CSSのdisplayプロパティのflexについて、復習もかねて深く学習していきましょう
練習するためのHTMLファイルの準備
ファイルを作成し、以下のコードを用意します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content"> <header> <h1>Flex Box</h1> </header> <nav> <!--このulの箇所を横並びにします--> <ul> <li><a href="#">box1</a></li> <li><a href="#">box2</a></li> <li><a href="#">box3</a></li> <li><a href="#">box4</a></li> <li><a href="#">box5</a></li> </ul> </nav> </div> </body> </html>
header要素に指定
style.cssファイルを開いて、下記のコードを記述します。
*{ margin: 0; } .content{ width:600px; border:solid 1px #000; margin:20px auto; } header h1{ text-align: center; background: #ddd; }
ここまでのコードをプレビューすると下図となります。

display:flex
display: flex
を使うことで、箇条書きの項目(box1からbox5)を横並びに配置できます。通常、ul
要素内のli
要素はブロック要素であるため、デフォルトでは縦方向に並びます。この縦並びを横並びに変更するには、親要素であるul
に対してdisplay: flex
を指定します。これにより、Flexboxのレイアウト機能が適用され、子要素が一列に整列します。
<nav> <ul> <li><a href="#">box1</a></li> <li><a href="#">box2</a></li> <li><a href="#">box3</a></li> <li><a href="#">box4</a></li> <li><a href="#">box5</a></li> </ul> </nav>
ul{ list-style: none; padding-left:0; display: flex; }
ul
要素は箇条書きのリスト要素のため、デフォルトでは黒い点(リストマーカー)が表示され、さらに左側に余白が設定されています。このスタイルをカスタマイズするために、以下の調整を行いました。
- リストマーカーの削除
リストの黒点(マーカー)を消すために、list-style: none;
を指定します。 - 左側の余白を削除
デフォルトで設定されている左内側余白(padding-left: 40px
など)を削除するために、padding-left: 0;
を指定します。 - 子要素を横並びにする
Flexboxレイアウトを適用するため、親要素であるul
にdisplay: flex;
を指定します。これにより、子要素のli
が横一列に並びます。

display: flex;
は、子要素を横並びにするだけのプロパティです。これにより、li
要素同士の配置や幅、揃え方を細かく制御することはできません。そのため、レイアウトをさらに調整する場合は、追加のFlexboxプロパティを利用する必要があります。
justify-content: space-aroundだと、区切り幅と背景色がない場合は問題ありませんが、中の子要素であるli要素に区切り線と背景色を設定してみると下記のようになってしまいます。

nav ul { list-style: none; padding-left: 0; display: flex; justify-content: space-around } nav ul li { border-right: 1px solid #000; text-align: center; background: #ff0; padding: 10px 0; } nav ul li a { color: #f00; text-decoration: none; display: block; }
justify-content
のその他の値
flex-start
- 子要素をコンテナの左端(または主軸の開始位置)に揃えます。
- デフォルト値で、特に指定しない場合にこの動作が適用されます。
flex-end
- 子要素をコンテナの右端(または主軸の終了位置)に揃えます。
space-evenly
- 子要素間の間隔が均等になるように配置します。さらに、最初と最後の要素とコンテナの端との間隔も均等になります。
stretch
(一部の環境では非推奨)- 主軸方向で子要素を伸縮させ、利用可能なスペースを埋めます。多くの場合、指定された幅または高さを持たない場合に適用されます。
inherit
- 親要素の
justify-content
の値を継承します。
- 親要素の
initial
- プロパティを初期値(
flex-start
)にリセットします。
- プロパティを初期値(
unset
- 継承可能な場合は親の値を継承し、そうでない場合は初期値(
flex-start
)になります。
- 継承可能な場合は親の値を継承し、そうでない場合は初期値(
flexプロパティ
flex
プロパティは、CSSのflexbox
レイアウトで使用されるプロパティで、親要素内の子要素(<li>
など)の幅を柔軟に調整するために使われます。具体的には、子要素の比率や配置方法を簡単に設定できます。
flex
プロパティで柔軟に調整
flex
プロパティを使用すると、子要素の幅が自動的に調整され、均等に配置されます。
ul li { flex: 1; /* 各要素の幅を均等に分配 */ }
flexプロパティの基本構造
1. 成長率(flex-grow)
- 子要素が親要素の余白をどの程度埋めるかを指定します。
- 例:
flex: 1;
- 各要素が均等に余白を分配します。
2. 縮小率(flex-shrink)
- 親要素が小さくなった場合、子要素がどの程度縮小されるかを指定します。
3. 基準サイズ(flex-basis)
- 子要素の初期サイズを指定します(
auto
がデフォルト)。
全体のCSSコード
* { margin: 0; } .content { width: 600px; border: solid 1px #000; margin: 20px auto; } header h1 { text-align: center; background: #ddd; } nav ul { list-style: none; padding-left: 0; display: flex; } nav ul li { flex: 1; border-right: 1px solid #000; text-align: center; background: #ff0; } nav ul li:last-child { border-right: none; } nav ul li a { padding: 10px 0; color: #f00; text-decoration: none; display: block; } nav ul li a:hover { background: #000; color: #fff; }
次は隣接セレクタです。

動画でCSSを確認しながら入力しましょう
HTMLファイルの準備ができたら、動画を参照しながらコードを確認してみましょう。
動画では、「Emmet!」を使って入力が速くなる記述も行なっています。入力の記述を覚える必要がありますので、下記サイトでcheatsheet(チートシート)が閲覧できますので、一度ご参照ください
https://docs.emmet.io/cheatsheet-a5.pdf