実践コーディングスキル - 第11章 Lesson3

第17回:フッターをマークアップしよう(1)

   

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

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

ウェブマガジンのフッターをマークアップする方法を解説しています。
ここでは、HTMLとCSSを使ってレイアウトを組んでいきます。



この動画で学べること

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



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

今回からフッターの作成に入っていきましょう、いよいよラストスパートですね。
まずはHTMLファイルの記述をしていきます。
HTML5になって新しく追加された<footer>タグを使ってコンテンツ部分の閉じタグを書いたあとに書いていきましょう。



<!-- フッターここから -->
<footer>
</footer>
<!-- フッターここまで -->



HTMLがかけたら、CSSに移りましょう。
まずはフッターの横幅と縦幅、背景色と境界線、のスタイルをかけていきます。
また、コンテンツとフッターの間の余白をとりたいので、margin-topもかけましょう。



footer {
width: 100%;
height: 140px;
background-color: #fff;
border-top: 1px solid #dcdddf;
padding: 20px 0;
margin-top: 60px;
}



一度保存してブラウザで見てみます。
フッターの背景が完成しました。
では次に、ロゴとお問い合せを囲むボックスを新たに作成します。
HTMLの<footer>タグの中に<div>id名footer_innerを追加しましょう。
そしてCSSで真ん中寄せにするために横幅と余白の記述をしていきます。



<footer>
<div id="footer_inner"></div>
</footer>



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



では次に<div>id名footer_innerの中にロゴと住所の部分を書いていきます。
この部分は、<dl><dt><dd>を使って定義型リストを使ってマークアップしていきます。
<dt>タグの中には<img>タグを記述してロゴのパスを入力し、<dd>タグには住所や電話番号などの記載をしてください。



<div id="footer_inner">
<dl>
<dt><img src="images/logo.png" alt="ロゴ" height="52" width="218"></dt>
<dd>株式会社Campus TEL: 000-000-000<br>〒000-0000 京都市京都区京都町00-0 町家ビル2F</dd>
</dl>
</div>



HTMLが書けたら、<dt>,<dd>タグのサイズ、文字スタイルなどを記述していきましょう。



div#footer_inner dt {
width: 218px;
height: 52px;
margin-bottom: 20px;
}
div#footer_inner dd {
font-size: 13px;
line-height: 21px;
}



保存してブラウザで見てみましょう。
フッターのロゴとその下の住所の部分が完成しました。