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

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

   

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

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

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。
ここでは、記事一覧の余白の調整し、完成した<li>タグを複製していきます。



この動画で学べること

・positionを使ってカテゴリタグを画像の右上に配置させる方法
・完成した記事を複製する方法



positionを使ってカテゴリタグを画像の右上に配置させよう

前回の続きで、カテゴリタグにスタイルをかけていきましょう。
前回、縦幅と横幅の指定をしましたが、ブラウザで見ても反映されません。
これは、<span>タグがインライン要素だからです。
インライン要素をブロック要素に変えたいので、displayプロパティを使って要素のタイプを変更してください。
また、文字の色、行間などを指定していきます。



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);
display: inline-block;
color: #fff;
line-height: 34px;
}



一度保存してブラウザで見てみます。
横幅や縦幅、文字の色などが反映されていれば、最後にこのカテゴリタグを画像の右上に配置させましょう。



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);
display: inline-block;
color: #fff;
line-height: 34px;
position: absolute;
top: 0;
right: 0;
}



再度保存してブラウザで見てみましょう。
カテゴリタグが画像の右上に配置されました。
これで、1つ目の記事が完成です。



完成した記事を複製して新着記事一覧を完成させよう

完成した記事の<li>タグを複製して、合計5つの記事を作成してください。
ブラウザで見てみると、記事と記事の間の余白がなくて詰まった状態なので、<li>タグに対してmargin-bottomをかけていきましょう。



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



最後に、画像のパスを変えて表示させる画像を変更すれば、新着記事一覧の完成です。