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

第15回:擬似クラスを使って奇数行に背景の色を適応させよう

   

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

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

お知らせ部分のマークアップ方法を、初心者向けに解説しています。
ここでは、擬似クラスを利用して、奇数行のタグに対して背景の色を設定します。



この動画で学べること

・定義型リストの奇数の段に背景色を指定する方法



定義型リストの奇数の段に背景色を指定しよう

まずは、<dt>と<dd>に背景色を指定しましょう。


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

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



これで、すべての背景に色がつきます。
でも今回は、すべての段ではなく奇数の段に背景色を設定したいので、擬似クラスを追加します。
タグ名の後ろにnth-of-type(odd)と書くことで、「奇数行目に」という指定ができます。
<dt>と<dd>タグの両方に同じスタイルをかけたいので、「,(カンマ)」で区切って書きましょう。



div#right dt:nth-of-type(odd), 
div#right dd:nth-of-type(odd) {
background-color: #f5f5f5;
}




保存してブラウザで見てみましょう。
奇数行目にだけ、灰色の背景色がつきました。
最後に、お知らせ部分の全体の余白の調整をします。
見出しの下の余白15px、日付の左側の余白15pxを書きが、このときレイアウトの崩れがおこるので、横幅の調整も一緒にやっていきましょう。



div#right h2 {
font-size: 12px;
color: #555555;
margin-bottom: 15px;
}

div#right dt {
font-size: 12px;
color: #b8b8b8;
float: left;
width: 79px;
line-height: 40px;
background-color: #f5f5f5;
padding-left: 15px;
}



では、保存してブラウザで見てみましょう。
余白の調整もうまくいき、お知らせ部分が完成しました。