実践コーディングスキル - 第10章 Lesson6

第15回:記事一覧に対してCSSを記述しよう(2)

   

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

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

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。
ここでは、新着記事の本文や<a>タグにスタイルを記述していきます。



この動画で学べること

・新着記事の本文や<a>タグにスタイルをかける方法



新着記事の本文や<a>タグにスタイルをかけていこう

今回は、記事本文の<p>タグに対してスタイルをかけていきましょう。
文字のサイズ、行間の指定をし、上に10pxの余白をとってください。



div#top_right ul li dl dd p {
font-size: 13px;
line-height: 21px;
margin-top: 10px;
}



次に、<a>タグで囲んだ「…続きを読む」の部分がクリックできるかわからない状態なので、スタイルを変更してリンクだということをわかりやすくします。
文字の色をオレンジにし、下線を引くように指定してください。



div#top_right ul li dl dd p a {
color: #f6ac4d;
text-decoration: underline;
}



最後に、記事のボックスである<li>タグに背景のスタイルを指定していきます。
横幅と縦幅を指定しますが、縦幅は画像のサイズと同じにして、レイアウト崩れを起こさないようにしましょう。



div#top_right ul li {
width: 650px;
height: 152px;
background-color: #fff;
}