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

第8回:ピックアップ記事のCSSを書いてみよう(2)

   

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

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

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



この動画で学べること

・カテゴリタグをデザインして、positionプロパティで右上に配置させる方法



カテゴリタグをデザインして、positionプロパティで右上に配置させよう

ピックアップ記事の右上にあるカテゴリタグのデザインをしましょう。
まずは、HTMLファイルの画像を書いた<img>タグの次に<span>タグを使って書いていきましょう。
<span>タグはページの中で何度も使う可能性があるので、id名をつけておきましょう。



<p id="pickup_thumb">
<img src="images/pickup.jpg" alt="Mobile Web Design">
<span id="pickup_tag">ウェブデザイン</span>
</p>




HTMLが書けたら、まずはrgba() を使って背景の色を指定しましょう。
また、内側の余白をかけ、文字のスタイルを変更します。
そして、文字を縦方向の中央揃えにするために、line-heightの指定もしましょう。



span#pickup_tag {
background-color: rgba(246,172,77,0.9);
padding: 0 10px;
font-size: 14px;
color: #fff;
width: auto;
height: 32px;
line-height: 32px;
}



では保存してブラウザで見てみましょう。
カテゴリタグのデザインが完成しました。



では最後に、このカテゴリタグをpositionタグを使って画像の右上に配置させていきたいと思います。
まずは#pickup_thumbに基準となるボックスであることを示すposition: relative;を書き、基準からどれだけずらすかをn#pickup_tagに記述していきます。



div#pickup_thumb {
width: 580px;
height: 256px;
position: relative;
}


span#pickup_tag {
background-color: rgba(246,172,77,0.9);
padding: 0 10px;
font-size: 14px;
color: #fff;
width: auto;
height: 32px;
line-height: 32px;
position: absolute;
top: 0;
right: 0;
}



では保存してブラウザで見てみましょう。
カテゴリタグが画像の右上に配置されました。
これで、ピックアップ記事が完成しました。