実践コーディングスキル - 第5章 Lesson7

最終回:フッターを作成しよう

   

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

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

ここでは、フッター部分のマークアップ方法を解説しています。
テキストをセンタリングしたり、内側の余白を調整してフッターを完成させましょう。



この動画で学べること

・コピーライトの書かれたフッターを作成する方法




コピーライトの書かれたフッターを作成しよう

今回は、フッターの作成を行ないましょう。
まず、今黒になっている背景を緑色にしたいので、CSSに次のように記述します。



footer {
width: 100%;
height: 58px;
background-color: #345c39;
margin-top: 20px;
}




一度保存してブラウザで見てみます。
フッター背景が緑になったことを確認したら、コピーライトのマークアップに移って行きましょう。
次のコピーライトを<footer>タグの中に貼り付けて、<p>タグで囲みます。




ーーーーーーーーーーーーーーーーーーーーーーーーー貼り付ける文章ーーーーーーーーーーーーーーーーーーーーーーーーーー



Copyright (C) 2010-2015 Campus inc. All Rights Reserved.



ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



次に、コピーライトの文字を白色にし、真ん中に寄せるためのCSSをfooterに書いていきましょう。
text-alignプロパティで横方向の中央揃えに、line-heightプロパティで縦方向の中央揃えにすることができます。



footer {
width: 100%;
height: 58px;
background-color: #345c39;
margin-top: 20px;
color: #fff;
text-align: center;
line-height: 58px;
}



これで、フッターの完成です。