実践コーディングスキル - 第9章 Lesson5

第11回:ランキング一覧のCSSを記述しよう(2)

   

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

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

ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。
ここでは、ランキング一覧のHTMLに対して、レイアウトに関するCSSをかけていきます。



この動画で学べること

・完成した記事を複製して残りの記事を作成する方法



ランキング記事の1つ目を完成させよう

ランキング記事一覧の余白をとって、一記事目を完成させましょう。
まず、画像とタイトルの間の余白をとるため、<dt>タグにmargin-rightを書けます。



div#ranking_top ul li dl dt{
width: 89px;
height: 55px;
float: left;
margin-right: 10px;
}



次に画像と境界線の間の余白をとるため、<li>タグにmarginとpaddingをとりましょう。



div#ranking_top ul li{
width: 348px;
height: 55px;
border-bottom: 1px dotted #dcdddf;
margin-top: 15px;
padding-bottom:14px;
}



これで、1つ目の記事のスタイルは完成です。



完成した記事を複製して残りの記事を作成しよう


完成した記事を複製して、合計4つの記事を作りましょう。
<li>タグをコピー&ペーストして、画像のパス、カテゴリタグの文字の中身を書き換えていきます。
カテゴリタグは、共通の部分をclass名ranking_tagで、背景の色など異なる部分は別のclass名でCSSを記述をしていたいと思いますので、まずは<div>id名ranking_tagだった部分のHTMLをclassに変えて、CSSの方も「#」を「.」に変更します。
そして、webdesign、wordpress、webmarketingのid名に、それぞれ背景の色を指定していきましょう。



span .ranking{
color: #fff;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
}
span.webdesign { background-color: #f6ac4d; }
span.wordpress { background-color: #e18c7c; }
span.webmarketing { background-color: #acd598; }



では保存してブラウザで見てみましょう。
4つの記事が表示され、カテゴリタグに異なる背景の色を指定することができました。