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

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

   

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

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

ウェブマガジンのフッターをマークアップする方法を解説しています。
ここでは、ロゴや会社情報などの情報をデザインと同じになるように作成していきます。



この動画で学べること

・お問い合せ部分のマークアップ方法
・<textarea>タグとボタンでフォームを作る方法



お問い合せ部分のマークアップをしよう

フッターの右側にあるお問い合せ部分を作っていきましょう。
前回作った<dl>タグの下に、新たに<div>ボックスを作成し、id名をcontactにしておきます。
<div>ボックスの中には、<h4>タグで見出しを記述しますが、途中でスタイルを変えたい部分は<span>タグで囲んでいきましょう。
HTMLが書けたら、ボックスや見出しに対してスタイルをかけていきます。



<div id="contact">
<h4>お問い合わせ<span>お問い合わせおまちしております</span></h4>
</div>



div#contact {
width: 374px;
height: auto;
}

div#contact h4 {
font-size: 16px;
font-weight: bold;
}

div#contact h4 span {
font-size: 12px;
margin-left: 10px;
}



保存してブラウザで見てみましょう。
前回作成したロゴや住所の下に今記述したHTMLが表示されました。
ロゴは左側に、お問い合せは右に配置したいので、dlと#contactにそれぞれfloatをかけていきましょう。
また、この2つのボックスをくるむ<div>タグにclass名cfを追加してfloatを解除させてください。



#footer_inner dl {
float: left;
}

div#contact {
width: 374px;
height: auto;
float: right;
}



では保存してブラウザで見てみましょう。
2つのボックスを横並びにすることができました。