ヘッダをコーディング
ヘッダをコーディングしていきます。
HTML
index.htmlを以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルサイト</title>
<link rel="stylesheet" media="all" href="css/style.css" />
<link rel="stylesheet" media="all" href="css/reset.css" />
</head>
<body>
<!-- ここから -->
<header class="header">
<div class="container">
<div class="header-top">
<h1 class="logo"><a href="index.html">Sample</a></h1>
<div class="tel">TEL：00-0000-0000</div>
</div>
<div class="nav">
<ul class="nav-list" role="list">
<li class="nav-item"><a href="#">ホーム</a></li>
<li class="nav-item"><a href="#">会社概要</a></li>
<li class="nav-item"><a href="#">事業内容</a></li>
<li class="nav-item"><a href="#">採用情報</a></li>
<li class="nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>
<!-- ここまで追加 -->
</body>
</html>
HTMLの解説
1. <header class="header">
- headerタグ(
<header class="header">)は Webページのヘッダー部分 を表します。headerタグに囲まれた部分は全てヘッダのコンテンツになります。 class="header"とすることで、class名を指定してCSSを適用できるようにしています。
2. <div class="container">
- ヘッダは画面横幅いっぱいに広がりますが、ヘッダのコンテンツ(ロゴ、電話番号、グローバルナビ、)は横幅いっぱいから少し余白があります。よって、項目が横幅いっぱいに広がらないようにするため、横幅の長さを指定する必要があります。コンテナ(
<div class="container"></div>)はコンテンツの横幅を管理するための要素です。コンテンツには、「ロゴ・電話番号」「グローバルナビ」をまとめています。 class="container"とすることで、class名を指定してCSSを適用できるようにしています。
3. <div class="header-top">
- ヘッダは上部に「ロゴ」と「電話番号」、下部に「グローバルナビ」が縦に並ぶ構造になっています。
<div class="header-top">はヘッダの上部の部分を指します。<h1 class="logo">はサイトのロゴを表します。h1タグはサイトのタイトルやロゴによく使われます。中に<a href="index.html">を入れることで、トップページに戻れるリンクにしています。<div class="tel">電話番号を表示しています。
class="header-top"とすることで、class名を指定してCSSを適用できるようにしています。
4. <div class="nav">
- ヘッダの下部の「グローバルナビ」（サイト内のリンク集）をまとめています。
<ul class="nav-list" role="list">
<li class="nav-item"><a href="#">ホーム</a></li>
<li class="nav-item"><a href="#">会社概要</a></li>
<li class="nav-item"><a href="#">事業内容</a></li>
<li class="nav-item"><a href="#">採用情報</a></li>
<li class="nav-item"><a href="#">お問い合わせ</a></li>
</ul>
<ul class="nav-list" role="list">
ulタグはリスト（箇条書き）を表します。ulはunordered listの略です。 role="list"の属性を付与することでアクセシビリティを向上させています。スクリーンリーダーで「リスト」と認識されやすくなります。<li class="nav-item">
リストの1つ1つの項目です。<a href="#">
各項目にはaタグを設定しています。aタグはリンクを表します。href="#" は仮のリンクです。実際のページURLを入れれば動きます。
CSS
style.cssには以下のCSSを追加します。
.header {
display: flex;
justify-content: center;
}
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
}
.container {
max-width: 1200px;
width: 100%;
}
.logo {
font-size: min(calc(20px + 30 * (100vw - 280px) / 1720), 50px);
}
.tel {
font-size: min(calc(18px + 30 * (100vw - 280px) / 1720), 40px);
}
.nav-list {
display: flex;
}
.nav-item {
flex: 1 0 auto;
}
.nav-item a {
padding: 1rem;
text-align: center;
}
CSSの解説
1. .header
display: flex;
要素を横並びにしています。justify-content: center;
flexを指定したコンテンツを中央寄せに配置します。
2. .header-top
display: flex;
ロゴと電話番号を横並びにします。align-items: center;
上下の位置を中央に揃えます。justify-content: space-between;左端にロゴ、右端に電話番号を配置します。padding: 10px 15px;上下10px・左右15pxの余白をつけます。
3. .container
max-width: 1200px;
最大幅を1200pxに制限します。画面が大きくても横に広がりすぎないようにします。width: 100%;
画面が狭いときは幅いっぱいに広がります。
4. .logo
font-size: min(calc(20px + 30 * (100vw - 280px) / 1720), 50px);
画面の横幅に応じて文字の大きさが変わる「レスポンシブな文字サイズ」です。calc(...)は計算でサイズを指定するCSS関数です。min(...)を使うことで、最大でも50pxまでに制限しています。
5. .tel
.logoと同じく、レスポンシブな文字サイズを設定しています。- こちらは最小18px、最大40pxで変化します。
6. .nav-list
display: flex;
ナビゲーションメニュー（リスト）を横並びにします。
7. .nav-item
flex: 1 0 auto;
各メニュー項目を均等に配置しつつ、必要に応じて幅を広げます。
8. .nav-item a
padding: 1rem;
各リンクに余白をつけて、クリックしやすくします。text-align: center;
文字を中央に揃えます。
動作確認
ブラウザで開くと表示は次のようになります。
