「レスポンシブ」ヘッダーを作る 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的に大事なこと。コードの意味は下記。
- header_bg・・・ヘッダーの背景色や大きさを決める部分
- header_contents・・・ヘッダーのタイトルやナビゲーション部分
- h1・・・ヘッダーのタイトル部分、文字の大きさや色を変更する
Next Step: ヘッダーの右側、ナビゲーションを作っていこう
Responsive
次はナビゲーション部分。
h1の下に4行目～10行目のコードを追加しよう。
ナビゲーションには、navタグを必ず使って書くこと。
これはしっかりGoogleのロボットに伝えるため。その中にナビゲーションの中身を書きましょう。
コードの意味は下記。
- header_nav・・・ナビゲーションの土台部分
- header_nav_lists・・・リストの大きさを決める部分
- nav_link・・・文字の大きさや太さ、色を変える部分
Final Step: レスポンシブ用のハンバーガーメニューを作っていこう
Responsive
最後はレスポンシブヘッダーで使う、ハンバーガーメニューを作っていきます。
※ハンバーガーメニューとは？
見た目(三本の線)がハンバーガーに見えるからハンバーガーメニュー
そしたらh1の下に4行目～8行目のコードを追加していきましょう。
正直、メニューのラインの数は2つでも3つでもOK。今回は3つ。
コードの意味は下記。
- responsive_btn・・・メニューの大きさを決める部分
- menu_line・・・3つ使ってハンバーガーメニューを表現
さて、この時点では何も表示されないです。
ですが次にやるCSSでしっかりとハンバーガーメニューがでてくるので安心してください。
HTMLの完成形はつぎのような感じになればOK。
今回はここまで。
次回はCSSで見た目をデザインしていくところをやっていきましょう。
次のStepへ≫「レスポンシブ」ヘッダーを作る Part2【CSS編】