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

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

   

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

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

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。
ここでは、positionプロパティを利用して、タグの部分を作成していきます。



この動画で学べること

・背景の<li>タグに対してスタイルをかける方法
・カテゴリタグをマークアップしてスタイルをかける方法



背景の<li>タグに対してスタイルをかけよう

前回のつづきで、記事のボックスである<li>タグに背景のスタイルを指定していきます。
背景にborderプロパティで薄いグレーの境界線を表示させます。



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



次に余白の調整をしたいので、<dd>タグに対して内側の余白をとっていきます



div#top_right ul li dl dd {
padding: 20px 20px 0;
}



保存してブラウザで見てみましょう。
テキスト部分が背景の中央に寄って、見やすくなりました。



カテゴリタグをマークアップしてスタイルをかけよう

では次に、カテゴリタグを表示させていきましょう。
まず、HTMLの記事の画像を表示させている<img>タグのしたに<span>タグを書き、カテゴリ名を記述していきます。
カテゴリタグを画像の右上に表示させたいので、CSSではpositionプロパティを使って指定していきます。
基準となる<dt>タグの部分にposition: relative;を記述していきます。



<dt>
<img src="images/tmb_5.jpg" height="152" width="247">
<span class="new_categoyu_tag">ウェブデザイン</span>
</dt>



div#top_right ul li dl dt {
width: 247px;
height: 152px;
float: left;
margin-right: 20px;
position: relative;
}<span></span>



カテゴリタグに対して、まずボックスの横幅と縦幅を指定し、背景の色や文字スタイルをかけていきましょう。
背景色は少し不透明度が下がっているので、rgba()を使って定義していってください。


div#top_right span.new_categoyu_tag {
font-size: 14px;
font-weight: bold;
padding: 0 10px;
width: auto;
height: 34px;
background-color: rgba(246,273,77,0.9);
}