Webサイトコーディング[EASY] 03 header編

2023.11.13
コーディング

この記事の目次

1 <header></header>ブロックのhtmlコーディング
2 「header {}」のcssコーディング

<header></header>ブロックのhtmlコーディング

編集画面を「index.html」のタブに切り替えましょう。
また、「html01」フォルダの中の「index.html」を、
今使用しているブラウザの別タブにドロップして開いておきましょう。

またGoogle Chromeで「index.html」を開いた状態で「F12」キーを押すと、
「Google Chromeデベロッパーツール」が開きます。

Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

必須ではありませんが、開発者用のツールであり使うことでより理解が深まるため、
コードを記述してからのページ更新時に適宜開くとよいと思います。
※「デベロッパーツール」を閉じるには「F12」キーを押しましょう

<header></header>タグのhtmlコーディング

まずは<header></header>タグのブロック自体を追加しましょう。

<body></body>タグの開始タグの下を改行する。
ハイライトされている9・10行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
<header>
</header>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
これで<header></header>タグの準備ができました。

<div class=”wrapper”></div>タグのhtmlコーディング

次はコンテンツ幅である<div class=”wrapper”></div>タグを追加しましょう。

<header></header>タグの開始タグの下を改行する。
ハイライトされている10・11行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
<header>
  <div class="wrapper">
  <!-- / .wrapper --></div>
</header>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

<header></header>タグの内側にコンテンツ幅の<div></div>タグを準備しました。
<div></div>タグは名前をつけて他の<div></div>タグと区別することができます。
今回は「wrapper」という名前にしています。

<h1 class=”logo”></h1>タグのhtmlコーディング

次は<header><header>にある「LEVEL EASY」と書いてあるロゴ部分を追加しましょう。

<div class=”wrapper”></div>タグの開始タグの下を改行する。
ハイライトされている11行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
<header>
  <div class="wrapper">
    <h1 class="logo">LEVEL EASY</h1>
  <!-- / .wrapper --></div>
</header>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
ブラウザについに文字列（LEVEL EASY）を表示することができました。

コンテンツ幅の<div class=”wrapper”></div>タグの内側に<h1></h1>タグを追加しました。
<div></div>タグと同じように名前をつけています。
今回はロゴに使用するため「logo」という名前にしています。

<nav></nav>タグのhtmlコーディング

最後に<nav><nav>タグの内容を丸ごと追加しましょう。

<h1 class=”logo”></div>タグの下を改行する。
ハイライトされている12〜17行目の内容を記述する。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>LEVEL EASY</title>
</head>
<body>
<header>
  <div class="wrapper">
    <h1 class="logo">LEVEL EASY</h1>
    <nav>
      <ul>
        <li><a href="#">TOP</a></li>
        <li><a href="#">PROFILE</a></li>
      </ul>
    </nav>
  <!-- / .wrapper --></div>
</header>
</body>
</html>

ブラウザで確認する

書き換えができたら「index.html」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
今度は「TOP・PROFILE」というリンクのリストを表示することができました。

次は<header></header>ブロックのcssコーディングに進みましょう。

「header {}」のcssコーディング

編集画面を「main.css」のタブに切り替えましょう。

「header .wrapper {}」のcssコーディング

最初に「header .wrapper {}」のcssの指定を追加しましょう。

先程記述したp , li {〜}の下を改行する。
ハイライトされている62〜65行目の内容を記述する。

main.css

/*-- 〜上部省略〜 --*/

p , li {
  font-size: 16px;
  line-height: 30px;
  color: #666;
}

header .wrapper {
  display: flex;
  justify-content: space-between; /* .wrapperの内側のレイアウトを均等配置かつ両端揃えに指定 */
}

プロパティ・値の説明
プロパティ	指定の効果	値
justify-content	内側のアイテムの間や周囲に間隔を配置する方法	flex-start・flex-end・left・center・right・ space-around・space-between

justify-content: space-between;（64行目）
= .wrapperの内側のレイアウトを均等配置かつ両端揃えに指定

「justify-contet」はフレックスボックスにのみ使用するプロパティであり、
今回のように「space-between」を指定すると、内側の要素が均等配置かつ両端揃えになります。
「justify-contet: flex-start（左揃え）」とともによく使うプロパティと値のセットです。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
縦に配置された「LEVEL EASY」と「TOP・PROFILE」が、コンテンツ幅で両端に揃っていませんか？

「header .wrapper .logo {}」のcssコーディング

次は「header .wrapper .logo {}」のcssの指定を追加しましょう。

先程記述したheader .wrapper {〜}の下を改行する。
ハイライトされている67〜73行目の内容を記述する。

main.css

/*-- 〜上部省略〜 --*/

header .wrapper {
  display: flex;
  justify-content: space-between;
}

header .wrapper .logo {
  padding: 10px 20px;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
  background: #999;
}

ブラウザで確認する

書き換えができたら「main.css」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。
「LEVEL EASY」の文字がグレーのブロックに白抜き文字になっていますか？

また、プロパティ「padding」を使用して余白サイズを指定した点、
また「font-size」と「line-height」で文字のサイズを行間を指定し、
ロゴの文字列を読みやすく、かつロゴらしい表示にしています。

「header .wrapper nav ul {}」および
「header .wrapper nav ul li a {}」のcssコーディング

最後に「header .wrapper nav ul {}」および、
「header .wrapper nav ul li a {}」のcssの指定を追加しましょう。

先程記述したheader .wrapper .logoの下を改行する。
ハイライトされている75〜78・80～84行目の内容を記述する。

main.css

/*-- 〜上部省略〜 --*/

header .wrapper .logo {
  padding: 10px 20px;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
  background: #999;
}

header .wrapper nav ul {
  display: flex;
  gap: 10px; /* liどうしの縦横の間隔を10pxに指定 */
}

header .wrapper nav li a {
  display: block;
  padding: 10px;
  color: #999;
}

プロパティ・値の説明
プロパティ	指定の効果	値
gap	中身のアイテム同士の縦横の間隔サイズを指定	0・px・%・emなど

gap: 10px;（77行目）
= liどうしの縦横の間隔を10pxに指定

リスト項目（li）は間隔が詰まっていると見にくいだけではなく誤クリックの原因になります。
そこで今回は「gap: 10px;」を指定して、liどうしの間に10pxの余白を持たせました。

ブラウザで確認する

書き換えができたら「main.css」を上書き保存（Ctrl + S）し、
ブラウザで「index.html」を開いてキーボードの「F5」キーで更新してみましょう。

「TOP」「PROFILE」というリンクのリストが横並びになり、
リンクの文字色がグレーに変わっていませんか？

<html></html>および<body></body>のhtml・cssコーディング、
そして<header></header>のhtmlコーディングおよびheader {}のcssコーディングは以上。
次は<footer></footer>ブロックのhtml・cssコーディングです。

Webサイトコーディング[EASY] 04 footer編