◆CSSのフレックスボックスで横並びのメニューを作ってみる(実習6日目)

ヒガキ

■フレックスボックスって何？

Flexbox → Flexible Box Layout Module … 「柔軟な箱の配置の部品」の事らしいです。(直訳するの好きね)

 

■先ずは、HTMLで横並びにしたいメニューを準備する

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”css/style.css”>
<title>Flexbox</title>
</head>

<body>

<nav>
<ul class=”nav-menu”>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>店舗案内</a></li>
<li><a href=”#”>アクセス</a></li>
<li><a href=”#”>メニュー</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</nav>

</body>
</html>

 

■次に、CSSで横並びした時の見た目を分かり易する為、整えておく

@charset “utf-8”;

.nav-menu li { /* 個々の<li>要素に適用する */
margin: 10px;
border-radius: 5px;
background: #60B99A;
color: #fff;
display: block;
padding: 15px;
text-decoration: none;
}

 

■次に、CSSでフレックスボックスを適用する

.nav-menu { /* ナビゲーションメニュー全体に */
display: flex; /* フレックスボックスを適用する */
}

 

■今回のは、分かり易かった

今回の「フレックスボックス」のやり方は、子要素<li>の親要素である<ul>にクラス名を付けて、それをセレクタとして指定しているし、フレックスボックスの適用自体は、1行だけのスタイル宣言だったので、分かり易かったです。(何とか理解できました♪)

本日も、お読み頂き、ありがとうございます。