「レスポンシブ」ヘッダーを作る Part1【HTML編】

今回から3回に分けてレスポンシブWebサイトの第一歩。
レスポンシブ用のヘッダーに挑戦していきましょう。

この記事を見ればレスポンシブヘッダーを簡単に作れるようになります。

次の動画のように、シンプルなレスポンシブヘッダーが完成形。


DEMO site:: https://responsiveheader.logss.net/

最初の準備
まずどこでもいいんで「Header」というフォルダを作ってください。

そのなかに「index.html」というファイルを作りましょう。

※フォルダ階層

Header/
└ index.html

できたらindex.htmlファイルをエディタで開けば準備完了。

準備ができたところで、さっそくHTMLの部分からやっていきます。

First Step: head部分にviewportを設定しよう

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

</html>

最初はhead部分にviewportを設定することが重要。

これがないとレスポンシブサイトが動かなくて絶望することに…
6行目のmetaタグ。viewportをしっかり書いておこう。

簡単にいえば、このmetaタグをいれておくだけでブラウザ側で勝手に幅を計算するよ~って感じ。

Next Step: ヘッダーの左側、タイトル部分を作っていこう

<body>
  <header class="header_bg">
    <div class="header_contents">
      <h1>Responsive</h1>
    </div>
  </header>
</body>

つぎはヘッダーの左側。タイトル部分をh1で作っていきます。

ヘッダーを作るときは必ずheaderタグを最初に書きましょう

SEO的に大事なこと。コードの意味は下記。

Next Step: ヘッダーの右側、ナビゲーションを作っていこう

  

Responsive

次はナビゲーション部分。
h1の下に4行目~10行目のコードを追加しよう。

ナビゲーションには、navタグを必ず使って書くこと。

これはしっかりGoogleのロボットに伝えるため。その中にナビゲーションの中身を書きましょう。

コードの意味は下記。

Final Step: レスポンシブ用のハンバーガーメニューを作っていこう

  

Responsive

最後はレスポンシブヘッダーで使う、ハンバーガーメニューを作っていきます。

※ハンバーガーメニューとは?
見た目(三本の線)がハンバーガーに見えるからハンバーガーメニュー

そしたらh1の下に4行目~8行目のコードを追加していきましょう。

正直、メニューのラインの数は2つでも3つでもOK。今回は3つ。

コードの意味は下記。

さて、この時点では何も表示されないです。
ですが次にやるCSSでしっかりとハンバーガーメニューがでてくるので安心してください。

HTMLの完成形はつぎのような感じになればOK。

html完成形

今回はここまで。

次回はCSSで見た目をデザインしていくところをやっていきましょう。

次のStepへ≫「レスポンシブ」ヘッダーを作る Part2【CSS編】