WEBページの作り方－<header>タグの使い方－
皆さん、こんにちは🌞
観測史上最速で梅雨が明けてしまい、長い夏が
始まりましたね(*´Д｀)
水分補給をしながら、体調管理に気を付けて
暑い夏を乗り切りましょうね！
前回は、WEBフォントの導入方法と簡単なSEO対策を
解説しました。
もう一度復習をしたい方や、SEO対策を確認したい方
など下記URLより前回の記事をぜひ見てみて下さいね！
URL：WEBページの作り方－WEBフォント・SEO対策－ - ゆるゆるWEBブログ
今回は、実際に作りたいデザインを確認しながら
<body>タグ内を書いていきましょう(^^)/
この記事で学べること！
-
<body>タグ内で<header>と入力すると
ヘッダー領域が作成される
- <div>タグで要素を入れる領域を作ることが出来る
- <nav>タグでナビゲーションメニューを作ることが出来る
- <ul>・<li>タグで箇条書きのリストができる
- 拡張機能『Go Live』で作ったものをリアルタイムで確認できる
それでは、始めていきましょう(^^)/
目次
- 1.【復習】<body>部分とは
- 2.作るWEBページを確認する
- 3.<body>タグ内にヘッダー領域を作る
- 4.<header>タグ内に<div>タグで要素を入れる領域を作る
- 5.<nav>タグでナビゲーションメニューを作成する
- 6.本日の文法まとめ
1.【復習】<body>部分とは
HTMLでは、<head>部分と<body>部分に分けて
コードを書くとお話しました。
それぞれの部分の役割ですが
- <head>部分・・・Google Chromeなどのクローラーに認識してもら部分
(検索した際、上位表示するのに大切な部分に
なります)
- <head>部分・・・私たち人が見る部分を表現する部分
2.作るWEBページを確認する
ここからは実際に作るWEBページを確認しながら、
<body>部分を書いていきましょう。
①作るWEBページを確認する
まずはシングルカラムレイアウトを作っていきます。
(全体が分かるように表示倍率30％で貼り付けています)
丸ごと1ページ作りたところですが、
デザインの調整がしやすいように下記の羽の画像のある
上部(ヘッダー)と下部(フッター)を作っていきましょう。
今回の記事ではヘッダーのみ作っていきます。
フッターは次回の記事で作っていきましょう。
3.<body>タグ内にヘッダー領域を作る
ここからはVSCodeを開いてヘッダー領域の作り方を
見ていきましょう！
下記の手順に従って実際にヘッダー領域を作ってみましょう。
①『common.html』を開く
『VSCode』を立ち上げる
→前回作成した『common.html』を開く
もし『common.html』が自動選択されていなければ、
画面上部の『ファイル』→『フォルダーを開く』
→『デスクトップ』→『common.html』の順で
前回作成したhtmlファイルを選択する。
②<body>タグ内にヘッダー領域を作る
<body></body>タグの間をクリック、
エンターを押して改行し、<header>タグを
下記のように記述する。
<header>と入力するとヘッダー領域が作成され
その中に要素を入れていくことでヘッダー部分が出来上がっていきます！
③ヘッダー領域に名前を付ける
ヘッダー領域に下記のよう名前をつけましょう。
(名前を"header"とするとわかりやすいです)
class属性を使って名前をつけることがポイントです(*'ω'*)
今後、CSSでスタイルを調整する際に領域を指定する
必要があり、その為に名前をつけています！
4.<header>タグ内に<div>タグで要素を入れる領域を作る
『ヘッダーとフッター部分』の画像を見るとヘッダー領域には
『羽のロゴ』と『はじめに』・『適応障害とは』・・・と
4つのナビゲーションメニューが表示されています。
タグ内に要素を配置するとき、それぞれ要素を入れる
領域を作ることがポイントです！
(<header>が土地だとすると、中のそれぞれの要素が家のイメージです)
それでは、<header>タグの中にロゴを入れる領域と
ナビゲーションメニューの領域の2つを作り、
更にそれを囲む領域の3つを作っていきましょう。
①<div>タグでロゴを入れる領域を作る
<header class="header"></header>タグの間を
クリック、エンターを押して改行し、
<div>タグを下記のように記述する。
(名前は"header-inner"とします)
divはdivision(分割)の略で、領域を作るときは
<div>タグでそれぞれの領域を作っていきます。
②<img>タグで領域内にロゴを指定する
<div class="header-inner"></div>タグの間を
クリック、エンターを押して改行し、
<img>タグを下記のように記述する。
パスを使って画像を指定するのですが、
画像保存用のフォルダを作ったり、パスの指定方法を
解説する必要があるため、先にナビゲーション
メニューを作成していきます。
5.<nav>タグでナビゲーションメニューを作成する
ナビゲーションメニューはヘッダー領域右側の
『はじめに』・『適応障害とは』・・・の部分になります。
クリックするだけで見たいページに飛ぶことが出来ます！
下記の手順に従って実際にナビゲーションメニューを
作ってみましょう。
①<div>タグでナビゲーションメニューの領域を作る
<img>タグの横をクリックしエンターを押して改行し、
<div>タグを下記のように記述する。
<div>タグを使ってheader-inner領域の中に
ナビゲーションメニュー領域のheader-site-menuが
出来ました。
②<nav>タグでナビゲーションメニューを作る
<div class="header-site-menu"></div>タグの間を
クリック、エンターを押して改行し、
<nav>タグを下記のように記述する。
③<ul>・<li>タグでナビゲーション項目を記載する
<nav class="site-menu"></nav>タグの間を
クリック、エンターを押して改行し、
<ul>・<li>タグを下記のように記述する。
○○の部分はご自身の好きな項目にしてみて下さいね(^_-)-☆
④拡張機能の『Go Live』で作ったものを確認する
最初の記事でVSCodeに拡張機能の『Go Live』を入れました。
『Go Live』はリアルタイムで作ったものを確認する機能です。
『Go Live』をクリックしてナビゲーションメニューを
確認してみましょう！
今回は<div>タグの使い方に絞って解説をしました。
キリがいいので今回はこれで終わりにしましょう(^^)/
6.本日の文法まとめ
-
<body>タグ内で<header>と入力すると
ヘッダー領域が作成される
- <div>タグで要素を入れる領域を作ることが出来る
- <nav>タグでナビゲーションメニューを作ることが出来る
- <ul>・<li>タグで箇条書きのリストができる
- 拡張機能『Go Live』でリアルタイムで作ったものを確認できる
次回はパスを使った画像の指定や
<a>タグでリンクを飛ばす準備をしていきます(^^♪
(本来なら<img>タグの所で続けて解説したいのですが
パスの説明や画像格納フォルダの作成・フリーの
画像取得サイトの紹介など長くなるため、
今回は<div>タグで領域を作ることを優先に
解説しました。)
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
