一旦、今までの復習
今までこんなことを学びました。
リンクになっているので、復習したいものがあれば飛んでみてください。
Flexboxについて
Flexboxとは？
という点について解説するより、実際に使ってみた方がわかりやすいので早速練習してみましょう。
以前も出てきたこちらの縦に並んだ3つのブロックですが、これをFlexboxを使って「横並び」にしてみましょう。
今回使うコードは、この記事の一番上に用意されているのでダウンロードしてお使いください。
横並びにしてみましょう
index.htmlの「box1」「box2」「box3」を「container」というクラスで囲みました。
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>「container」に「display: flex」を追加
.container {
display: flex;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
以上で、横並びになります。
めっちゃ簡単ですね。笑
コードの解説
親要素にFlexbox（display: flex）を使うと、子要素が横並びになります。
今回だと、親と子の関係はそれぞれこんな感じになります。
親要素：container
子要素：box1、box2、box3
親要素のcontainerに「display: flex」を使ったので、
直接の子要素のbox1、box2、box3達が横並びになったというわけです。
Flexboxの練習
細かいことは一旦置いておいて、まずはFlexboxを使ってHPでよくあるレイアウトを作ってみましょう。
先ほどのブロックを横並びにする例で、そのままこれが作れます。
それでは、これを作る手順を書いていきます！
HTMLはこんな感じで書いてください。
（ちなみに、CSSは全て消してしまって大丈夫です）
<body>
<ul class="nav-item">
<li><a href="">ホーム</a></li>
<li><a href="">料金について</a></li>
<li><a href="">事例</a></li>
<li><a href="">お問い合わせ</a></li>
</ul>
</body>コードの解説
まず「ホーム」「料金について」「事例」「お問い合わせ」はリストで作成しています。
通常、これらは押したらそのページに飛べるようになっているので、さらにaタグを使っておきます。
ulタグには、後で操作しやすいように「nav-item」クラスをつけてあります。
（ちなみに、nav-itemというクラス名は「ナビゲーションのアイテム」という意味でつけてあります。）
一旦、この状態で表示を確認してみましょう。
ilタグで並べたものは、そのままだと縦に並ぶらしいですね。
Step1：Flexboxを使って横並びにしよう！
Flexboxを使うときは、
「親要素にdisplay: flex」を使うと「子要素が横並びになる」でした。
今回のHTMLの構造で親要素はulタグです。
ulタグには「nav-item」というクラスをつけてあるので、CSSでは「nav-item」を指定していきましょう。
.nav-item {
display: flex;
}
横には並んだけれど、色々おかしいですね。
次の4つを調整していきましょう。
- 「ホーム」「料金について」「事例」「お問い合わせ」が詰まりすぎ
- 黒い点を消したい
- リンクの下線を消したい
- 背景色を塗りたい
Step2：各メニューの詰まりすぎを解消しよう
「display: flex」をつけた親要素に
「justify-content: space-between;」
を追記してください。
.nav-item {
display: flex;
justify-content: space-between;
}これを使うと「余っている余白を均等に分ける」という指定になります。
いきなり「justify-content: space-between;」
って何？どういう意味？
と思ったかもしれませんが、あまり深く考えずに
justify-content: space-between;と書くと、均等に間隔を空けて横並びになるんだ
と思っておいて大丈夫です。
Step3：黒い点と、リンクの下線を消そう
これは、前にもやったことがある技ですね。
- 黒い点を消す：liに「list-style: none;」
- リンクの下線を消す：aに「text-docoration: none;」
.nav-item {
display: flex;
justify-content: space-between;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
Step4：背景色を塗ろう
背景色は「background-color」で指定できます。
.nav-item {
display: flex;
justify-content: space-between;
background-color: gray;
}
なんか細いですね。。
これは「nav-item」の領域を縦方向に伸ばしてあげると解決します。
つまり、80pxくらいの高さ（height）を与えるということですね。
.nav-item {
display: flex;
justify-content: space-between;
background-color: gray;
height: 80px;
}
まだちょっとおかしいですね。
各メニューを縦方向の中央に持っていきたいですね。
Step5：メニューを縦方向に中央寄せにしよう
また、新しい技を使います。
縦方向に中央寄せにしたい。という場合は、
「align-items: center;」
を使います。
.nav-item {
display: flex;
justify-content: space-between;
background-color: gray;
height: 80px;
align-items: center;
}
だいぶ完成に近づきましたね。
Step6：微調整しよう
まず、文字色を白にして、太字にしましょう。
- 文字色：color: white;
- 太字：font-weight: bold;
li {
list-style: none;
}
a {
text-decoration: none;
color: white;
font-weight: bold;
}
だいぶ良いですね。
では最後に一つ。
「お問い合わせ」の右側、詰まりすぎですよね。
で、「paddingとmargin」が出てきたのを覚えていますか？
位置を調節するときに使用するものです。
具体的に、どのような原理で動いているかは別の記事で詳しく解説することにします。
「padding」を使って、余白を作ってあげましょう。
ヘッダー全体の右と左に60px分くらいの余白が欲しいので、次のように書きます。
- padding-right: 60px;
- padding-left: 60px;
.nav-item {
display: flex;
justify-content: space-between;
background-color: gray;
height: 80px;
align-items: center;
padding-right: 60px;
padding-left: 60px;
}
これで、何とか完成しましたね。
まとめ
- 親要素に「display: flex;」を付けると子要素が全て横並びになる
- 「justify-content: space-between;」で空白を均等に分けるので、間隔が揃う
- 「list-style: none;」で黒い点を消せる
- 「text-decoration: none;」でリンクの下線を消せる
- 「background-color: 色;」で背景色を塗れる
- 「align-items: center;」で縦方向の中央寄せ
- 「paddingとmargin」の詳しい解説は別の記事で！（まだ未完成です…）
