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

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

   

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

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

フッターのマークアップ方法を、初心者向けに解説しています。
ここでは、フッターに記述したhtmlに、デザインと同じになるようなcssを記述していきます。



この動画で学べること

・フッターにスタイルをかける方法



フッターの背景にスタイルをかけよう

フッターにCSSでスタイルをかけていきたいと思います。
フッター部分にPhtoshopで調べた背景の色を指定し、heightをautoにして高さを自動で調節できるようにしましょう。
そして、<div>id名footer_innerに、フッターを真ん中寄せにするための記述をしていきます。



footer {
background-color: #63abd4;
width: 100%;
height: auto;
padding: 30px 0;
}

#footer_inner {
width: 960px;
margin: 0 auto;
}



保存してブラウザで見てみましょう。
背景の色が変わり、真ん中に寄ったことによって、フッター全体の指定ができました。



ページトップへのCSSを書こう


次に、ページトップへのCSSを書いていきましょう。
ページトップへの部分のボックスは横幅78px、縦幅20pxになります。
また、<a>タグの下線を消し、line-heightで文字を中央揃えにするという指定をします。



p#pagetop a {
width: 78px;
height: 20px;
background-color: red;
text-align: center;
color: white ;
display: block;
text-decoration:none;
line-height: 20px;
}



保存してブラウザで見てみましょう。
PAGETOPが指定したスタイルに変更されました。
次は、positionというプロパティを使って、このPAGETOPをフッターの背景から突き出でたように指定したいと思います。
まず、#footer_innerに基準となるposition: relative;を基準し、そこからどれだけずらすかをp#pagetop a に書きます。
そして、背景の色をフッターの背景の色に書き換えてください。



#footer_inner {
width: 960px;
margin: 0 auto;
position: relative;
}<span></span>

p#pagetop a {
width: 78px;
height: 20px;
background-color: #63abd4;
text-align: center;
color: white ;
display: block;
text-decoration:none;
line-height: 20px;
position: absolute;
top: -20;
right: 0;
}



保存してブラウザで見てみましょう。
PAGETOPが見本と同じように、フッターから突き出た位置にになりました。



ナビゲーションにCSSをかけよう

次に、ナビゲーション部分のCSSを書いていきましょう。
まずは<ul>タグを右寄せに、<li>タグを横並びにし、左側に内側の余白をとります。



footer nav {
float: right;
}

footer nav ul li {
float: left;
margin-left: 20px;
}



<li>の中の<a>タグにもスタイルをかけていきましょう。



footer nav ul li a {
color: #white;
font-weight: bold;
font-size:14px;
text-decoration: underline;
}




フッター全体の余白を調整しよう

今は、すべての要素が詰まった状態になっているので、内側の余白を作っていきましょう。
#footer_innerにpaddingをかけます。
また、ナビゲーション部分には外側の余白をとります。



#footer_inner {
width: 960px;
margin: 0 auto;
padding: 20px 0;
}

footer ul {
margin-top: 24px;
}



では保存してブラウザで見てみましょう。
フッター部分が完成しました。