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

第14回:floatを使ってdtとddを横並びにしよう

   

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

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

お知らせ部分のマークアップ方法を、初心者向けに解説しています。
ここでは、floatを使って、日付であるdtと本文であるddを横並びにするfloatを記述します。



この動画で学べること

・<dt>と<dd>をfloatで横並びにする方法



<dt>と<dd>をfloatで横並びにする方法

今回は、定義型リストの<dt>と<dd>をfloatで横並びにさせましょう。
前回記述したCSSの続きに、floatを追加して左に流すという命令を書いていってください。


div#right h2 dt {
font-size: 12px;
color: #b8b8b8;
float: left;
}

div#right dd {
font-size: 13px;
float: left;
}



保存してブラウザで見てみましょう。
float解除を書いていないので、すべての文字が左に流れてしまいました。
float解除をするために<div class="clear"></div>を<dd>の下に一個ずつ書いてもいいのですが、とても長くなってしまうので、今回は回りこむ余白をなくしてあげる、つまり<dt>と<dd>に横幅を指定する、という方法でやっていきたいと思います。
Photoshopで調べてみると、<dt>は94px、<dd>は556pxですので、widthプロパティで書いていきましょう。
また、line-heightプロパティ使って要素に中央揃えしたテキストにしたいと思いす。



div#right dt {
font-size: 12px;
color: #b8b8b8;
float: left;
width: 94px;
line-height: 40px;
}

div#right dd {
font-size: 13px;
float: left;
width: 556px;
line-height: 40px;
}



では保存してブラウザで見てみましょう。
回りこみがなくなり、一覧が上手く表示されました。