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

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

   

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

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

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。
ここでは、記事一覧の背景の色や境界線、レイアウトを、デザインと同じになるように調整します。



この動画で学べること

・記事一覧にスタイルをかける方法



記事一覧にスタイルをかけていこう

記事一覧にスタイルをかけていきましょう。に
まずは、<dt>と<dd>タグに横幅と縦幅を指定し、floatをかけて横並びにしていきます。



div#top_right ul li dl dt {
width: 247px;
height: 152px;
float: left;
margin-right: 20px;
}

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



保存してブラウザで見てみます。
画像と文章の部分を横並びにすることができました。
では次にタイトル部分、<h4>タグの中の<a>タグに文字のスタイルを設定していきましょう。



div#top_right h4 a {
font-size: 16px;
font-weight: bold;
}



次に、日付部分の<span>タグにも文字のスタイルをかけていきましょう。
文字スタイルが書けたら、日付の左側にはアイコンがありますので背景画像として表示させます。
画像のパスの次にno-repeatを記述して、1度だけ画像を表示させるという指定をしてください。
また、文字と画像が被ってしまうので、文字の左側に内側の余白をあけて文字が被らないようにしましょう。



span.new_date {
color: #dcdddf;
background: url(images/new_date.png) no-repeat left 2px;
padding-left: 18px;
}




一度保存してブラウザで見てみましょう。
日付の文字スタイルが変更され、アイコンが上手く表示できました。
キーワード部分も同じデザインなので、span.new_dateのスタイルをそのままコピーして、class名と画像のパスだけを変更します。



span.new_tag{
color: #dcdddf;
background: url(images/tag.png) no-repeat left 2px;
padding-left: 18px;
}



再度ブラウザで見てみましょう。
キーワードにも日付の部分と同じスタイルを適応させることができました。