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

第2回:メニュー一覧ページの見出しを作ろう

   

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

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

メニュー一覧ページの見出しを作成する方法を解説しています。
ここでは、見出しタグを使って見出しを表示させ、背景画像を利用した画像の見出しを作成します。



この動画で学べること

・メニュー一覧の見出しの作成の仕方



メニュー一覧の見出しの作成の仕方

前回書いた<h2>タグに対してスタイルを指定していきたいと思います。
まずは、見出しの背景を表示させましょう。
backgroundプロパティを使って画像のパスを指定し、横幅、縦幅を画像のサイズにします。
そして、画像の縁に白い境界線をつければ、背景の完成です。
文字のスタイルも記述して変更していきたいと思います。



h2#heading {
background: url(images/title.jpg) no-repeat;
width: 948px;
height: 70px;
border: 5px solid #fff;
margin-bottom: 20px;
font-size: 27px;
font-weight: bold;
color: #2f5734;
}



一度保存してブラウザで見てみましょう。
画像が表示され、文字が指定したスタイルになりました。
では、表示させた文字を縦方向のど真ん中に表示させたいと思います。
このとき使うのがline-heightプロパティでしたね。
背景の高さと同じpxを指定することで、中央揃えにすることができる便利なプロパティでした。
また、左側にpaddingをかけていきますが、このとき要素も大きくなってしまうのでwidthの調整も忘れずにしましょう。



h2#heading {
background: url(images/title.jpg) no-repeat;
width: 925px;
height: 70px;
border: 5px solid #fff;
margin-bottom: 20px;
font-size: 27px;
font-weight: bold;
color: #2f5734;
line-height: 70px;
padding-left: 23px;
}




保存してブラウザで見てみましょう。
文字の位置が調整され、見出しが完成しました。