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

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

   

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

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

ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。
ここでは、positionプロパティを利用したタグの表示を行います。



この動画で学べること

・ランキングのナンバーの作成方法



ランキング記事一覧を完成させよう

ランキング記事一覧の一番下の記事にだけ、境界線をつけないように指定していきましょう。
このとき使うのは、擬似クラス:last-childを記述し、border-bottom: none;とすることで、最後の記事の境界線を消すことができます。
また、下の余白も必要なくなるのでpadding-bottom: 0;と指定しておきましょう。



#popular_wrapper ul li:last-child {
padding-bottom: 0;
border-bottom: none;
}


次に、ランキングのナンバーを作っていきましょう。
まずは、HTMLの記述から行なっていきます。
<dt>タグの中の<img>タグの下に<span>タグを追加し、class名をranking_numberにし、数字を入力していきます。



<span class="rank_number">1</span>



このように書き、それぞれの記事に中の数字を変えて記述します。
HTMLができたら、CSSでスタイルの指定をしていきましょう。



span.rank_number {
font-size: 12px;
font-weight: bold;
background-color: #434343;
border: 1px solid #fff;
color: #fff;
width: 19px;
height: 19px;
display: inline-block;
text-align: center;
line-height: 19px;
}



最後に、このナンバーの位置を画像の左上に配置させたいと思います。
基準となる<dt>タグにposition: relative;し、span.rank_numberに位置の指定をしましょう。



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

span.rank_number {
font-size: 12px;
font-weight: bold;
background-color: #434343;
border: 1px solid #fff;
color: #fff;
width: 19px;
height: 19px;
display: inline-block;
text-align: center;
line-height: 19px;
position: absolute;
top: 0;
left: 0;
}



保存してブラウザで見てみましょう。
ナンバーを画像の左上に配置することができました。
これで、ランキング記事一覧は完成です。