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

第9回:背景画像を利用した見出しを作ろう

   

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

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

ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。
ここでは、背景画像を利用した見出しの作成をしていきます。



この動画で学べること

・ランキングの見出しを作成する方法



ランキング部分の見出しを作成しよう

今回はランキングの見出しの作成をしたいと思います。
まずは、<div>id名ranking_topの中に<h2>で見出しを作っていきます。
HTMLが書けたら、CSSに移って文字のスタイルを指定しましょう。



<div id="ranking_top">
<h2>人気記事ランキング</h2>
</div>



div#ranking_top h2 {
font-size: 18px;
font-weight: bold;
}




一度保存してブラウザで見てみましょう。
「人気記事ランキング」と表示され、文字が大きくなりました。
では次に、見出しのアイコンを背景画像に表示させ、スタイルをかけて行きましょう。
先ほどの<h2>のスタイルの続きに書いていってください。
また、アイコンの表示は一度だけでいいので、no-repeatを書きましょう。



div#ranking_top h2 {
font-size: 18px;
font-weight: bold;
background: url(images/popular_icon.png) no-repeat left top;
}



再度保存してブラウザで見てみます。
アイコンが表示できましたが、文字と被ってしまっているので、文字の左側に余白をあけていきたいと思います。
また、見出しの下にある線を境界線をborderプロパティで表示させたいと思いますが、位置をデフォルトの状態よりも少し下にしたいので、高も指定して調整しましょう。


div#ranking_top h2 {
font-size: 18px;
font-weight: bold;
background: url(images/popular_icon.png) no-repeat left top;
padding-left: 37px;
border-bottom: 1px solid #dcdddf;
height: 30px;
}