WEBページの作り方－フッターの作成－
皆さん、こんにちは🍧
梅雨が明け、さっそく台風が来たりと
一気に夏になってしまいましたね(*´Д｀)
暑い日が続きますので、水分補給をしながら
体調管理をしていきましょうね！
前回は相対パスを使った画像の指定や
<a>タグを使ったリンクの飛ばし方を
解説しました！
相対パスや<a>タグの使い方を確認したい方は
下記より前回の記事をぜひ見てみて下さいね！
今回は、<nav>、<a>タグや相対パスなど
今までに学んできたことを凝縮して
ヘッダー部分を作っていきましょう！
この記事で学べること！
それでは、始めていきましょう(^^)/
目次
- 1.コメントアウトでフッター部分を明確にする
- 2.<footer>タグでフッターエリアを作る
- 3.フッターエリア内にナビゲーションメニューを設置する
- 4.フッターエリア内にロゴ画像を設置する
- 5.著作権を表すコピーライトを入れる
- 6.『Go Live』機能でフッター部分を確認する
- 7.本日の文法まとめ
1.コメントアウトでフッター部分を明確にする
ヘッダーを作成する際に、ヘッダー部分を
明確にする為に<!-- headerここから -->と
コメントアウトしましたね。
同じ様にフッターでもコメントアウトをして
みましょう！
①ヘッダー下にコメントアウトを入れる
<!-- headerここまで -->の横でエンターキーを2回押して
スペースを空け、40行目をクリックして
下記のようにコメントアウトする。
キーボードの『Ctrl』キーと『？・/め』のキーを
同時に押すとコメントを入力する緑色の部分が現れ、
中に『footerここから』と入力する。
②更に『footerここまで』をコメントアウトする
フッターの終わりを明確にするために、
下記で更にコメントアウトしてみましょう。
<!-- footerここから -->の横でエンターキーを2回押して
スペースを空け、42行目をクリックして
下記のようにコメントアウトする。
キーボードの『Ctrl』キーと『？・/め』のキーを
同時に押すとコメントを入力する緑色の部分が現れ、
中に『footerここまで』と入力する。
2.<footer>タグでフッターエリアを作る
コメントアウトでフッター範囲を明確にした所で
今度はフッターエリアを作っていきましょう。
①<footer＞タグでフッターエリアを作る
先ほどコメントアウトした
<!-- footerここから -->の横をクリック、
エンターを押して改行し、<footer>タグを
下記のように記述する。
②フッターに名前をつける
cssでのスタイル調整に備えて
<footer>タグに下記のように
名前をつけましょう。
3.フッターエリア内にナビゲーションメニューを設置する
ヘッダーと同じようにして、フッターにも
<nav>タグでナビゲーションメニューを
<img>でロゴを<a>タグでリンクを飛ばし
ましょう。
①<nav>タグでナビゲーションメニューを設置する
<footer></footer>タグの間で
クリック、エンターを押して改行し、
<nav>タグを下記のように記述する。
②<nav>タグに名前をつける
cssでのスタイル調整に備えて
<nav>タグに下記のように
名前をつけましょう。
ヘッダーと同じ『site-menu』とする事で
cssで調整するときに、フッター・ヘッダーを
まとめて調整できる事がポイントです！
③<ul>・<li>タグでナビゲーション項目を記載する
<nav class="site-menu"></nav>タグの間を
クリック、エンターを押して改行し、
<ul>・<li>タグを下記のように記述する。
『はじめに』、『適応障害とは』・・・の部分は
ご自身の好きな項目にしてみて下さいね(^_-)-☆
上の画像では<a>タグを使ってリンクを飛ばして
しまいましたが、詳しくは下記記事の
3.『<a>タグでリンクを飛ばす』の④を見てみて
下さいね！
URL：WEBページの作り方－相対パス・<a>タグの使い方－ - ゆるゆるWEBブログ
4.フッターエリア内にロゴ画像を設置する
ヘッダー同様に、フッターにもロゴ画像を
設置してサイト内の回遊性を上げてみましょう。
①<img>タグを使って画像を指定する
</nav>タグの横をクリック、エンターを押して
改行し、<img>タグを下記のように記述する。
u
相対パスとalt属性で画像が表示できない時の
代替えテキストを記述することで
視認性を上げることが出来ます！
(ユーザビリティと言います)
②<a>タグでリンクを飛ばす
ヘッダー同様にロゴを押した際に、
最初のページに戻るように
<a>タグを下記のように記述する。
<a>タグの位置がずれた際は
『ずれている範囲を左クリック』
→『右クリック』→『選択範囲のフォーマット』
の順で修正しましょう(^_-)-☆
5.著作権を表すコピーライトを入れる
どこかのホームページを見た際に
ページ下に©○○と書かれているのを
見たことがありませんか？
これは『コピーライト』というもので
ページの権利(作成者)は○○ですと
著作権を表しているものです。
実際にフッターにコピーライト(©)を
表示してみましょう！
①『©』でコピーライトを記述する
<p>タグを下記のように記述して
コピーライトを記述しましょう。
『©』で著作権を表すコピーライト(©)を
記述することが出来ます。
②<small>タグで表示を小さくする
コピーライトのお作法として
<small>タグを使って表示を小さくします。
<small>タグを下記のように記述する。
cssでスタイリングするために
class="copyright"と名前をつけてましょう！
6.『Go Live』機能でフッター部分を確認する
『Go Live』はリアルタイムで作ったものを
確認する機能です。
『Go Live』をクリックしてフッター部分を
確認してみましょう！
フッターを表示できたところで
今回はここまでにしましょう(*'ω'*)
相対パスの指定やリンクの飛ばし方など
復習したい方は下記の記事を見てみて
下さいね！
URL：WEBページの作り方－相対パス・<a>タグの使い方－ - ゆるゆるWEBブログ
7.本日の文法まとめ
次回は『common.html』へのCSSの
導入準備を行っていきましょう(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
