実践コーディングスキル - 第8章 Lesson9

第8回:ピックアップ記事のCSSを書いてみよう(1)

   

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

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

ウェブマガジンのピックアップ記事を作成する方法を解説しています。
ここでは、ピックアップ記事に関するCSSを、デザインと同じになるように記述していきます。



この動画で学べること

・ピックアップ記事の背景スタイルを変更する方法
・記事タイトルの文字スタイルを変更する方法



ピックアップ記事の背景スタイルを変更しよう

前回マークアップしたピックアップ記事の部分にスタイルをかけていきたいと思います。
まず、<p>id名pickup_thumbに表示した画像の横幅と縦幅を設定します。
そして、背景のボックスの外側に薄いグレーの境界線をつけていきましょう。
この時、境界線を付け加えることによって、要素の幅が上下左右に1pxずつ増えてしまいますので、横幅と縦幅を2pxずつ小さくします。
また、オレンジの背景色を白色に書き換えておいてください。



#pickup_thumb {
width: 580px;
height: 256px;
}


#pickup_wrapper {
width: 580px;
height: 358px;
background-color: #fff;
float: left;
margin-right: 30px;
border: 1px solid #dcdddf;
}



では一度保存してブラウザで見てみましょう。
背景と境界線の指定をしたことで、だいぶ見本に近づきました。



記事タイトルの文字スタイルを変更しよう

では次にタイトルの文字スタイルを変更していきたいと思います。
まずは<dt>タグに文字の大きさ、<dt>タグの中の<a>タグに文字の太さを指定するコードを書いていきましょう。
日付部分の<dd>タグには、背景の境界線と同じ薄いグレーの色を指定しましょう。



div#top_pickup dl dt{
font-size: 18px;
}

div#top_pickup dl dt a {
font-weight: bold;
}
#pickup_wrapper dl dd {
font-size: 12px;
font-weight: bold;
color: #dcdddf;
}



保存してブラウザで見てみます。
文字のスタイルが変更できました。
最後に、タイトルに内側の余白をかけていきましょう。



div#top_pickup dl {
padding: 15px 20px;
}



これで、記事タイトルの部分が完成です。