実践コーディングスキル - 第2章 Lesson9

第16回:フッターに必要なタグを記述してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

フッターのマークアップ方法を、初心者向けに解説しています。
ここでは、フッターに記述するべきhtmlタグを記述していきます。



この動画で学べること

・フッター部分のHTMLを記述する方法



フッター部分のHTMLを書いていこう

今回は、サイトのフッター部分を作成しましょう。
まずは、HTMLファイルに必要なタグを書いていきたいと思います。
<footer>タグの中に、「ページトップへ」の<p>タグを書き、id名をpagetopにしましょう。
また、ロゴのためいにid名をfooter_logoの<p>タグも記述し、画像を表示させます。



<footer>
<p id="pagetop">
ページトップへ
<p/>
<p id="footer_logo">
<img src="images/logo_footer.png" alt="まごころと優しさを大切に ネストクリニック"
<p/>
</footer>



保存してブラウザで見てみましょう。
ページトップへとロゴが表示されました。
では次に、ナビゲーションを作っていきます。
これはヘッダーのナビゲーションと同じなので、ヘッダーからコピーして先ほどのロゴの<p>タグの下に貼り付けます。



<nav>
<ul>
<li><a href="#">ネストクリニックについて</a></li>
<li><a href="#">担当医の紹介</a></li>
<li><a href="#">医院内の紹介</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>



そして最後に、フッターを真ん中寄せにするためにフッターを囲む<div>ボックスfooter_innerを書いていきましょう。
次回は、フッターにCSSを適応させていく方法を学びます。