Zenn
⛓️

Webサイトのヘッダーについて

2022/05/16に公開
CSS
HTML
初心者
勉強記録
tech

ヘッダーの作成

今回作成するヘッダーは、左端にタイトル、右端にメニューが表示される一般的なヘッダーです。

ヘッダーボックス

全体ボックス内にヘッダーのボックスを作成します。
コードを見たときにヘッダーだとすぐにわかるようにheaderタグを使用します。
横画面は全体ボックスに合わせ、高さは80px~120pxがベストです。

サンプルコードを記載しておきます。
htmlは以下の通りです。

<body>
	<div class = "wrapper">
		<header>
		</header>
	</div>
</body>

cssは以下の通りです。

.wrapper {
	width: 100%;
	height: 800px;
	}
	
header	{
	height: 100px;
	}

ヘッダーボックスにタイトルとメニューを追加

ヘッダーボックスにタイトルとメニューの2つのボックスを追加します。
タイトルにはh1タグ、メニューにはnavタグを使います。

navはnavigationの略です。
主に、ページのリンクがあるメニューなどをまとめたエリアに使用されます。

先ほど書いたHTMLのheaderタグの中に、h1とnavの2つのタグを追加します。

<body>
	<div class = "wrapper">
		<header>
			<h1>タイトル用のボックス</h1>
			<nav>メニュー用のボックス</nav>
		</header>
	</div>
</body>


（メニュー用のボックスの中を、ホーム、会社概要、お問い合わせの3メニューにしたい場合、
ulタグやliタグを使用します。）

しかしこのままだと、タイトル用のボックスとメニュー用のボックスが縦並びになってしまいます。

これを解決するのが、フレックスボックスです。

フレックスボックス

フレックスボックスを使用すると、以下の画像のような状態になります。

このように、横並びにするための手順を説明します。

記述場所

フレックスボックスは、並び替えたいボックスの親ボックスのCSSに書き込んでいきます。

  • 並び替えたいボックス・・・navタグ
  • 親ボックス・・・headerタグ （ですので、今回はheaderタグのCSSに指定。）

以下のように、displayプロパティにflexを指定します。
（displayは、表示するという意味です。）

header	{
	height: 100px;
	display: flex;
	}

ボックスの並べ方

ボックスをどのように並べるか指定することができます。

この場合、flex-directionプロパティを使用します。
(directionは、方向という意味です。）

設定値の代表例は以下の通りです。

  • row(横並び)
  • row-reverse(横並び逆順)
  • column(縦並び)
  • column-reverse(縦並び逆順)

今回は横並びにしたいので、rowを指定します。
（rowはデフォルト値なので指定しなくても問題ありません。）

実際に追加すると以下のようになります。

header	{
	height: 100px;
	display: flex;
	flex-direction: row;
	}

ボックスの横方向の配置

ボックスを横方向にどのように配置するのかを指定することができます。

この場合、justify-contentプロパティを使用します。
(justifyは、整えるという意味です。）

設定値の代表例は以下の通りです。

  • flex-start(左揃え)
  • flex-end(右揃え)
  • center(中央揃え)
  • space-between(両端）

今回は、タイトルとメニューを両端に設置したいので、space-betweenを指定します。

実際に追加すると以下のようになります。

header {
	height: 100px;
	display: flex;
	flex-direction: row;
	justify-content: space-between
	}

ボックスの縦方向の配置

ボックスを縦方向にどのように配置するのかを指定することができます。

この場合、align-itemsプロパティを使用します。
(alignは、整列という意味です。）

設定値の代表例は以下の通りです。

  • strech(余白を埋める)
  • flex-start(上揃え)
  • flex-end(下揃え)
  • center(中央揃え)

今回は、タイトルとメニューを中央に揃えたいので、centerを指定します。

実際に追加すると以下のようになります。

header {
	height: 100px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	}

折り返しの指定

ウィンドウサイズによってボックスを折り返すか指定することができます。
有りにした場合、折り返し方法なども指定する事ができます。

この場合、flex-wrapプロパティを使用します。

設定値の代表例は以下の通りです。

  • nowrap(折り返さない)
  • wrap(折り返し)

また、レスポンシブ対応には、wrap(折り返し)を指定する必要があります。
（レスポンシブ対応とは、様々なデバイス（パソコン、スマートフォン、タブレット端末など）で最適化することができる対応のことです。）

今回は全体ボックスを固定長ボックスにしているので、nowrapを指定します。
（nowrapはデフォルト値なので指定しなくても問題ありません。）

header{
	height: 100px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	}

Discussion