HTMLスキル - 第3章 Lesson6

フッターをマークアップしてみよう

   

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

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

Webサイトのフッターをマークアップする方法を解説しています。フッターに必ずある「コピーライト」の書き方についても学んでいきます。



この動画で学べること

・フッターの作成方法



フッターのマークアップ方法

フッター部分を作成していきましょう。

HTMLファイルの下の方にある<footer>タグの中に記入していきましょう。
<footer>タグの中に
twitter
facebook
と書きましょう。
コピーライトの部分は、「&copy;」と入力します。
書けたら一度保存してブラウザで見てみましょう。



今は全ての要素が横並びの状態なので、twitterとfacebookの後ろに<br>タグを入れて改行させます。
そして、twitterとfacebookのテキストの代わりにに画像を挿入しましょう。
このように記述してください。



 <footer>
<img src="images/icon_twitter.png" alt="アイコン(ツイッター)"><br>
<img src="images/icon_facebook.png" alt="アイコン(フェイスブック)"><br>
&copy; 2015 Yumi Tamura
</footer>



最後に、コピーライトを<p>タグで囲み、文章として認識させましょう。
ブラウザ上で代わりはありませんが、<p>タグで囲むことによって文章と定義できます。


 <footer>
<img src="images/icon_twitter.png" alt="アイコン(ツイッター)"><br>
<img src="images/icon_facebook.png" alt="アイコン(フェイスブック)"><br>
<p>&copy; 2015 Yumi Tamura</p>
</footer>



このように、画像とコピーライトを表示させることができました。