第二弾　ヘッダーを作ってみる

2022年10月05日

WEBサイト制作

#HTML
#css

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は第二弾。
以前の記事の続きになります。

◆過去記事はコチラ（第一弾　トップページ（基本骨格）を作ってみる）

ヘッダーとは

前回のおさらいとなります。
ヘッダーとは、

上記画像の一番上の赤枠でheaderと書かれている箇所です。
いわゆる共通パーツと言われるもので、
WEBサイトの全てのページに配置されるものがヘッダーになります。

皆さんも見たことありますよね。
ほぼ全てのWEBサイトにある必須の構成要素となっています。

さっそくヘッダーをコーディングしていこう！

では、まず基本から行きましょう！
デスクトップに「website」というフォルダを作って、
htmlファイルとcssファイルを作成してください。
もし、わからなければ過去の記事を参照してください。↓
◆過去記事はコチラ（HTMLを書いていこう！）
◆過去記事はコチラ（CSSで装飾してみる）

どうでしょうか。
迷いなくかけましたでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

こんな感じに書いてくださいね！

では、
今はHello world!はいらないので、

<h1>Hello world!</h1>

は消しちゃってください。
そしてそこに、

<header></header>

と書いてください。
この＜header＞はここはヘッダー領域ですよ、と示すためのタグです。

それではその中に、このように書いてください。

<header>
<h1>ロゴ</h1>
<nav>
<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
</ul>
</nav>
</header>

では、
タグの意味を解説していきましょう。

<h1>ロゴ</h1>

＜h1＞はすでにご存知ですよね。
こういった企業のロゴを掲載する箇所を＜h1＞でコーディングすることが多いです。

そして、

<nav></nav>

これは、ここはナビゲーションですよと示すためのタグです。
ナビゲーションとはWEBサイトを回遊するためのリンクの塊のことです。

次は、

<ul>
<li></li>
<li></li>
<li></li>
</ul>

これはリストタグと言って、
並列されているコンテンツに対して使用します。
ちなみに絶対に＜ul＞の直接の子要素は＜li＞でなくてはなりません。
これは基本ルールなので確実に覚えましょう！

で、その中に、

<a href="#">リンク1</a>

リンクをさせるためのアンカータグです。
基本的に別のページに遷移させるためにはこの＜a＞を使用します。

では、これでHTMLの構造はできたので次はCSSです！

CSSでヘッダーを装飾

では、
CSSファイルを開いていただいて、
まずおまじないを書きましょう！

*{
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

これは何かというと、
実は各タグにブラウザがデフォルトでCSSを当ててしまっているんです。
なので、
それを打ち消さないと思い通りのレイアウトに装飾するのが非常に面倒になります。
なので、
*は「全ての要素に」という意味で、
余白をなくして、行間を一定にしてね！
というおまじないをかけました。
実はこれ、他にも方法があって、
いわゆる「リセットCSS」と呼ばれるものを使用するのが現場では一般的です。
興味のある方は調べてみてください。
このブログでもいずれ取り上げようかなと考えています。

では、一気に書いていきましょう！

header{
    background-color: #2234ff;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header h1{
    background-color: #fff;
    color: #000;
    padding: 10px;
    display: inline-block;
}
header ul{
    display: flex;
    list-style: none;
}
header ul li{
    margin: 0 20px;
}
header ul li a{
    text-decoration: none;
    color: #fff;
}

まず一番上から解説していきます。

header{
    background-color: #2234ff;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

セレクタは＜header＞という大枠に、CSSを適用させています。
一つずつプロパティを解説します。
・background-colorは背景色を指定しています。
なのでこのCSSは背景色を１６進数の2234ff（青色）に指定しています。
ここで忘れてはならないのが、必ず１６進数のまでに「#」を忘れないでください。
・paddingは内側の余白を指定しています。

この画像の赤の箇所が「margin」、いわゆる外側の余白です。
で青い箇所が「padding」、いわゆる内側の余白です。
で黒い枠が「border」、いわゆる線になります。
これはコーディングにおいて第一の基礎になるので、
実際にコーディングして必ず体で覚えましょう！

・display: flexはコンテンツを横並びにする際、必須のプロパティです。
昔はfloatというプロパティを使っていたのですが、もうこのdisplay: flexが主流になっています。
display: flexは直接の子要素を横並びにするので、
この場合、＜h1＞と＜nav＞が横並びになります。
・justify-content: space-betweenはdisplay: flexと連なるプロパティです。
効果はdisplay: flexで括られた要素同士の間隔を指定します。
space-betweenという値は、最初の要素は親要素の先頭に来るように、最後の要素は親要素の末尾に来るようにするものです。
・align-items: centerはdisplay: flexと連なるプロパティです。
display: flexで横並びにした要素の横軸の並びを指定します。
centerの値は中央にするというものです。

では、次です。

header h1{
    background-color: #fff;
    color: #000;
    padding: 10px;
    display: inline-block;
}

セレクタは、＜header＞という大枠の中の＜h1＞タグを指定しています。
・background-colorは背景色を指定しています。
・colorは文字色を指定しています。
この場合、#000なので黒文字になります。
・paddingは先ほどと同じ内側の余白を10px（ピクセル）とっています。
・display: inline-blockはdisplayというプロパティにinline-blockという値が入っていますが、
これは要素にはブロック要素とインライン要素という種類があるのですが、このいいとこ取りをしたようなものになります。
ブロック要素とインライン要素についてはまた別の機会に記事にしたいと思います。

では、次です。

header ul{
    display: flex;
    list-style: none;
}

セレクタは＜header＞の中の＜ul＞を指定しています。
・display: flexは、リストの要素を横ならびにしています。
・list-style: noneは、これを設定しないと＜li＞タグには自動的に先頭に・が入ってしまうので、それを打ち消しています。

では、次です。

header ul li{
    margin: 0 20px;
}

セレクタは＜header＞の中の＜ul＞の中の＜li＞を指定しています。
・margin: 0 20pxは外側の余白を指定しています。
この場合、一つ目の値は0px、二つ目の値は20pxなので、
上下に0pxの余白、左右に20pxの余白と指定しています。

最後です。

header ul li a{
    text-decoration: none;
    color: #fff;
}

セレクタは＜header＞の中の＜ul＞の中の＜li＞の中の＜a＞を指定しています。
・text-decoration: noneは、アンカータグはデフォルトで下線が入ってしまうので、
このプロパティを使って打ち消しています。
・color: #fffは、文字色をしてしています。
この場合、#fffなので真っ白になります。
ちなみにCSSでは、16進数が全て同じ値のとき（例えば#aaaaaaの場合、#aaa）、省略ができます。