3回に分けて、レスポンシブ(タブレット・スマホ対応)デザインに対応したヘッダー部分を作っていきましょう。
今回は、まずHTMLをやっていきましょうか。

JavaScriptは使うけど、JQueryは使わないから注意してね

レスポンシブ対応ヘッダーをつくるHTML編

最終的に下記のようなヘッダー部分が作れるよ。今回は、HTMLの部分だけ作っていこう

header pc

header sp
header sp opend

HTMLのすべて

まず、『Header』というフォルダを作り、その中に『index.html』というファイルを作成しましょう。

index.htmlの中に下記コードを書いていきます。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="master.css">
  <title>Hello</title>
</head>

<body>
  <header>
    <div class="container">
      <h1>Hello</h1>
      <nav id="Header-Nav" class="header-nav">
        <a href="" class="nav-list">Link</a>
        <a href="" class="nav-list">About</a>
        <a href="" class="nav-list">Profile</a>
        <a href="" class="nav-list">Contact</a>
      </nav>
      <div id="Hamburger" class="hamburger">
        <div></div>
        <div></div>
        <div></div>
        <p>MENU</p>
      </div>
    </div>
  </header>
  <script type="text/javascript" src="master.js"></script>
</body>

</html>

主に使うのは、オレンジ色がついた部分、13行目~29行目まで。

大きく分けて2つの作業があって、ヘッダー部分を作るのと、ハンバーガーメニュー(ハンバーガーボタン)を作ること。

トグルメニュー(ハンバーガーメニューと呼ばれることもある)もしくはナビゲーションバー(英語版)として機能し、ボタン操作により折り畳まれたり、画面上に表示されたりする。

ヘッダー部分を作る

header pc

<h1>Hello</h1>
<nav id="Header-Nav" class="header-nav">
  <a href="" class="nav-list">Link</a>
  <a href="" class="nav-list">About</a>
  <a href="" class="nav-list">Profile</a>
  <a href="" class="nav-list">Contact</a>
</nav>

これがヘッダー部分。

『h2タグ』の場所が左側タイトル部分、この部分はあとで画像に差し替えることもできるし『aタグ』を入れてトップページに移動するリンクにしてもあり。

次に『navタグ』の部分が右側リンクの部分だね。
『aタグ』の部分を追加していけば、もっと沢山リンクが作れるから良かったら作ってみて。

 『divタグ』はなるべく使わないで『navタグ』を使うようにしよう

ハンバーガーメニューを作る

header sp

<div id="Hamburger" class="hamburger">
  <div></div>
  <div></div>
  <div></div>
  <p>MENU</p>
</div>

画像の右側部分、タブレットやスマホにしたとき現れるようにするよ。

全て『divタグ』でOK。
ちなみに、HTMLだけじゃ『MENU』の文字しか表示されないからCSSでやっていく必要があるよ。

 メニューの横棒は2~4行目の『divタグ』を増やすか、減らすかすれば本数が調整できるよ

さてこれでHTMLは終わったから、ここまで。
次は、CSSの部分を作って見た目をきれいに作るところまでやろうか。

人気記事【必読】"見やすく修正しやすいコード"につながる本『リーダブルコード』