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

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

   

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

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

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。
ここでは、backgroundプロパティを利用して、アイコン付きの見出しをマークアップします。



この動画で学べること

・背景画像を使った見出しの作成方法



背景画像を使った見出しを作成しよう

今回は、新着記事の見出しを作っていきましょう。
まず、HTMLファイルに必要なタグを記述します。
<div>id名top_rightの中に<h2>で見出しを作ってください。
HTMLの記述ができたら、CSSに移り、#top_rightの高さを自動で調整できるautoに変更しておきます。



<div id="top_right">
<h3>新着記事一覧</h3>
</div>



div#top_right {
width: 650px;
height: auto;
float: right;
margin-top: 30px;
}



では、見出し部分のスタイルを適応させていきましょう。
まずは、文字のサイズや太さなどを指定します。



div#top_right h3 {
font-size: 22px;
font-weight: bold;
}



ブラウザで見てみると文字が大きく、太くなりました。
次に、見出しの左側にあるアイコンを背景画像として表示させましょう。
何も設定しないと見出しに画像が敷き詰められた状態で表示されますので、画像のパスの次にnp-repeatと入力します。
np-repeatの次に画像の位置を調整するleft 5px も書いていきましょう。
最後に、文字と画像が被らないようにpadding-leftをかけて余白をあければ、見出しの完成です。



div#top_right h3 {
font-size: 22px;
font-weight: bold;
background: url(images/new_icon.png) no-repeat left 5px;
padding-left: 30px;
}