【Web制作の毎日コーディング日記（3日目）】PC用ナビゲーション作成。
こんにちは（@t_kun_kamakiri）。
毎日コーディングスキルを磨いています。
今日は毎日コーディング3日目となります。
今日は以下のようなPCナビゲーションを作っていこうと思います。
初心者の僕にとっては、これを作るのにめちゃくちゃ手間取りました(;^ω^)
基本的には、
●ulタグ
●liタグ
●aタグ
で枠を作成していくのですが、「ulタグ、liタグ」タグはブロック要素、
「aタグ」はインライン要素・・・
なので、「text-align:center;」を使って中央揃えにしても全然効いてくれないとか途中で意味が分からなくなったりしていました。
このnoteでは上記のような配置にするための2つの方法を紹介します。
（もちろん何が良いコーディングなのかはわかっていないため勉強しながら感覚を磨いていきます）
基本的なhtmlとcss
まず、初心者はどのタグがどれくらいの領域を囲っているのかが理解できていないのでcssを編集しても自分が思っているようなデザインをあててくれないという場合があると思います。
その場合は、「border: 2px solid red;」として枠をあえて表示させた状態ではじめは進めるのが良いかと思います。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ナビゲーション</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<header class="header-inner01">
<nav class="header-nav01">
<ul>
<li><a href="">COMPANY <br> 会社概要</a></li>
<li><a href="">TECHNOLOGY <br> テクノロジー</a></li>
<li><a href="">RECRUITE <br> 採用情報</a></li>
<li><a href="">CONTACT <br> お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>css/styel.css
*{
box-sizing: border-box;
}
.header-inner01{
background-color: paleturquoise;
}
.header-nav01{
border: 2px solid red;
}
.header-nav01 ul{
border: 2px solid blue;
}
.header-nav01 ul li{
border: 2px solid green;
}
.header-nav01 ul li a{
border: 2px solid orange;
}↓こうなります。
枠が見えてわかりやすいですよね。
方法１ ナビゲーションを作成
「liタグ」はブロック要素なので、何も指定をしない場合は改行がされてしまします。
「liタグ」を改行させないためにはインライン要素にする必要があります。
そこで「 display: inline-block;」としてインライン要素としながら、横並びにしつつ「liタグ」自身はブロック要素になるようにします。（緑枠）
.header-nav01 ul li{
border: 2px solid green;
display: inline-block;
}
👆これで横並びになっていますね（インライン要素として機能）。
さらに「liタグ」全体がブロック要素になっています。
この状態で「ulタグ」を「text-align: center;」にすると、「ulタグ」の子要素である「liタグ、aタグ」が中央揃えになります。
.header-nav01 ul{
border: 2px solid blue;
text-align: center;
}
※「text-align: center;」はインライン要素にしか効かないので、「liタグ」がインライン要素の機能を持っているため中央揃えになってくれたというわけです。
あとは、適当にデザインをあてていきます。
.header-nav01 ul li a{
border: 2px solid orange;
display: block;
}
.header-nav01 ul li{
border: 2px solid green;
display: inline-block;
margin: 0 20px;
}
.header-nav01 ul li a{
color: #333;
border: 2px solid orange;
display: block;
text-decoration: none;
padding: 1rem;
}☟こんな感じになります。
配置については良い感じがしますね。
※ここでのポイントは「aタグ」を「display: block;」としてブロック要素としましたことです。
「aタグ」はもともとはインライン要素ですが、「display: block;」でブロック要素にしてやります。そうすることで、親要素の「liタグ」と枠が一致したのがわかると思います。
あとは、ホバーの効果(hover)を「aタグ」に使います。
これはマウスを「aタグ」の上に置いたときだけデザインが変化する効果を
.header-nav ul li a:hover{
background-color: silver;
}
👆いい感じです。
次は、「aタグ」の一つ目の行だけフォントを変える設定をします。
.header-nav01 ul li a::first-line{
font-size: 16px;
font-weight: bold;
}
👆これでOKですね(^^)/
方法２ ナビゲーションを作成
では同じものを下にコピーして別の方法でナビゲーションを作成してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ナビゲーション</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-inner01">
<nav class="header-nav01">
<ul>
<li><a href="">COMPANY <br> 会社概要</a></li>
<li><a href="">TECHNOLOGY <br> テクノロジー</a></li>
<li><a href="">RECRUITE <br> 採用情報</a></li>
<li><a href="">CONTACT <br> お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<p></p>
<header>
<div class="header-inner02">
<nav class="header-nav02">
<ul>
<li><a href="">COMPANY <br> 会社概要</a></li>
<li><a href="">TECHNOLOGY <br> テクノロジー</a></li>
<li><a href="">RECRUITE <br> 採用情報</a></li>
<li><a href="">CONTACT <br> お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>隙間を開けるために適当に「pタグ」を設けました。
2つ目のナビゲーションをデフォルトの設定に戻すために先程設定したcssは消していきます。（必要な部分だけ残す）
*{
box-sizing: border-box;
}
.header-inner01{
background-color: paleturquoise;
}
.header-nav01{
border: 2px solid red;
}
.header-nav01 ul{
border: 2px solid blue;
text-align: center;
}
.header-nav01 ul li{
border: 2px solid green;
display: inline-block;
margin: 0 20px;
}
.header-nav01 ul li a{
color: #333;
border: 2px solid orange;
display: block;
text-decoration: none;
padding: 1rem;
}
.header-nav01 ul li a:hover{
background-color: silver;
}
*{
box-sizing: border-box;
}
.header-inner02{
background-color: paleturquoise;
}
.header-nav02{
border: 2px solid red;
}
.header-nav02 ul{
border: 2px solid blue;
}
.header-nav02 ul li{
border: 2px solid green;
}
.header-nav02 ul li a{
color: #333;
border: 2px solid orange;
}
.header-nav02 ul li a:hover{
background-color: silver;
}
👆こんな感じからスタートします。
最初に「ulタグ」を横並びにするために「display: flex;」を指定するとすぐに横並びになります。
通常縦並びになる要素ですが、親要素をdisplay:flexを設定して(フレックスコンテナにして)、子要素を横並びにすることができます。
.header-nav02 ul{
border: 2px solid blue;
display: flex;
}
「liタグ」の●が邪魔なので消します。
.header-nav02 ul li{
border: 2px solid green;
list-style: none;
}
さらに「ulタグ」全体を中央にする場合は、「 justify-content: center」と指定します。
.header-nav02 ul{
border: 2px solid blue;
display: flex;
justify-content: center;
}
display: flex;
justify-content: center;
この２つはセットで覚えておくと良いですね。
justify-contentプロパティがとる値は以下のようにいっぱいあります。
start
各アイテムは、主軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
end
各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
flex-start
各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
flex-end
各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
center
各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。
left
各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
right
各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
normal
各アイテムは justify-content の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの stretch として動作します。
baseline
first baseline
last baseline
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は start、last baseline の代替配置は end です。
space-between
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。
space-around
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。
space-evenly
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。
stretch
各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 max-height/max-width (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。
👆使いそうなものだけ覚えておけば良いでしょう！
あとは適当に、「marginとpadding」をして枠組みは完成です。
*{
box-sizing: border-box;
}
.header-inner01{
background-color: paleturquoise;
}
.header-nav01{
border: 2px solid red;
}
.header-nav01 ul{
border: 2px solid blue;
text-align: center;
}
.header-nav01 ul li{
border: 2px solid green;
display: inline-block;
margin: 0 20px;
}
.header-nav01 ul li a{
color: #333;
border: 2px solid orange;
display: block;
text-decoration: none;
padding: 1rem;
}
.header-nav01 ul li a:hover{
background-color: silver;
}
*{
box-sizing: border-box;
}
.header-inner02{
background-color: paleturquoise;
}
.header-nav02{
border: 2px solid red;
}
.header-nav02 ul{
border: 2px solid blue;
display: flex;
justify-content: center;
}
.header-nav02 ul li{
border: 2px solid green;
list-style: none;
margin: 0 23px;
}
.header-nav02 ul li a{
color: #333;
border: 2px solid orange;
display: block;
text-align: center;
padding: 1rem;
text-decoration: none;
}
.header-nav02 ul li a:hover{
background-color: silver;
}
違う方法でデザインをしましたが、じゃっかんの違いは出てそうです。
あとは、枠の目安のために設定した「 border: 2px solid red;」などを消して、色合いを好みにしていくと完成です。
*{
box-sizing: border-box;
}
.header-inner01{
background-color: paleturquoise;
}
.header-nav01{
border: 2px solid red;
}
.header-nav01 ul{
border: 2px solid blue;
text-align: center;
}
.header-nav01 ul li{
border: 2px solid green;
display: inline-block;
margin: 0 20px;
}
.header-nav01 ul li a{
color: #333;
border: 2px solid orange;
display: block;
text-decoration: none;
padding: 1rem;
}
.header-nav01 ul li a:hover{
background-color: silver;
}
*{
box-sizing: border-box;
}
.header-inner02{
}
.header-nav02{
background: #1b9aaa;
}
.header-nav02 ul{
display: flex;
justify-content: center;
}
.header-nav02 ul li{
list-style: none;
margin: 0 23px;
}
.header-nav02 ul li a{
color: #fff;
display: block;
text-align: center;
padding: 1rem;
text-decoration: none;
font-size: 0.75rem;
}
.header-nav02 ul li a:hover{
background-color: silver;
}
.header-nav02 ul li a::first-line{
font-size: 16px;
font-weight: bold;
}
👆こうなりました(^^)/
違いがわかるように1つ目についてはデザインを指定していません。
どちらの方法でも良いかと思いますが、画面幅が狭くなると違いが出てきます。
●1つ目は「text-align:center;」としているので常に中央になるようになる。
そのため改行をして表示する。
●2つ目は「 display: flex;」と「justify-content: center;」としていうので、常に横並びになろうとするため改行が起こらない。
👆違いがおわかりいただけただろうか。
この違いを合わせるために、親要素に「flex-wrap: wrap;」をしていすると画面幅が狭くなると2行目に回ってくれます。
.header-nav02 ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
これで「方法１」と「方法２」での動きが同じになりました。
cssを使いこなせた感がでてきました(^^)/
しかし、こうなってしまったら、どちらのデザインも微妙ですよね。
※携帯の画面サイズでは、これになってしまう。
画面の幅がある設定値以下になった場合は、ハンバーガーメニューに切り替えるというのが必要であるでしょう！
ハンバーガーメニューというのは以下のような動きをするものです。
「ハンバーガーメニュー」についてはちょっと難しそうなので追々説明記事をを作成したいと思います。
全体のコードを公開
では、全体のコードを以下に載せておきます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ナビゲーション</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-inner01">
<nav class="header-nav01">
<ul>
<li><a href="">COMPANY <br> 会社概要</a></li>
<li><a href="">TECHNOLOGY <br> テクノロジー</a></li>
<li><a href="">RECRUITE <br> 採用情報</a></li>
<li><a href="">CONTACT <br> お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<p></p>
<header>
<div class="header-inner02">
<nav class="header-nav02">
<ul>
<li><a href="">COMPANY <br> 会社概要</a></li>
<li><a href="">TECHNOLOGY <br> テクノロジー</a></li>
<li><a href="">RECRUITE <br> 採用情報</a></li>
<li><a href="">CONTACT <br> お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>css/style.css
*{
box-sizing: border-box;
}
.header-inner01{
background-color: paleturquoise;
}
.header-nav01{
border: 2px solid red;
}
.header-nav01 ul{
border: 2px solid blue;
text-align: center;
}
.header-nav01 ul li{
border: 2px solid green;
display: inline-block;
margin: 0 20px;
}
.header-nav01 ul li a{
color: #333;
border: 2px solid orange;
display: block;
text-decoration: none;
padding: 1rem;
}
.header-nav01 ul li a:hover{
background-color: silver;
}
.header-nav01 ul li a::first-line{
font-size: 16px;
font-weight: bold;
}
*{
box-sizing: border-box;
}
.header-inner02{
}
.header-nav02{
background: #1b9aaa;
}
.header-nav02 ul{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.header-nav02 ul li{
list-style: none;
margin: 0 23px;
}
.header-nav02 ul li a{
color: #fff;
display: block;
text-align: center;
padding: 1rem;
text-decoration: none;
font-size: 0.75rem;
}
.header-nav02 ul li a:hover{
background-color: silver;
}
.header-nav02 ul li a::first-line{
font-size: 16px;
font-weight: bold;
}
では、今日は以上です。
Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）
この記事が気に入ったらサポートをしてみませんか？