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

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

   

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

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

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



この動画で学べること

・ランキング記事一覧のCSSを書く方法



ランキング記事一覧のCSSを書く方法

ランキング記事一覧のCSSを書いていきましょう。
まずは、<li>タグの横幅と縦幅を指定し、薄いグレーの境界線を適応させます。


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



次に、リストの中身にもスタイルをかけていきましょう。
画像が表示される<dt>タグとタイトルの<dd>タグそれぞれに横幅と縦幅を指定をします。
また、画像とタイトルを横並びにするために、それぞれにfloat: left;をかけましょう。



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

div#ranking_top ul li dl dd{
width: auto
height: 55px;
float: left;
}



次に、記事タイトル部分のHTMLに<a>タグを追加し、別のページにジャンプできるようにします。
また、書いた<a>タグの文字のスタイルを指定していきましょう。


<h3><a href="#">記事タイトル</a></h3>



div#ranking_top h3 a {
font-size: 13px;
font-weight: bold;
}



最後にカテゴリタグのCSSを書いていきましょう。
文字のサイズ、色、太さを指定し、内側の余白をとります。
そして背景をオレンジにして、完成です。



span#ranking_tag {
color: #fff;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
background-color: #f6ac4d;
}



保存していブラウザで見てみましょう。
ランキング記事一覧の画像、タイトル、カテゴリタグのスタイリングができました。