(ア) 今までにやったことを用いて、見出しを装飾する

見出し、ということで<h2>を装飾してみましょう。
ここで出てくることは、全て今までの復習です。

これまでの知識を反芻（はんすう）しながら作業していってくださいね。

h2 {
 background: url(./images/bg_h2.png) 0 0 no-repeat;
        height: 50px;
     color: #336633;
}

※背景画像（bg_h2.png）の高さが50pxなので、50pxと設定しています。

ずれてしまってますねー。
こんな時は、どうすれば良かったでしょう？
考えてみてましょう。

・・・・・・。

・・・・・。

・・・・。

・・・。

・・。

・。

正解は、paddingを使う、でした。
それでは、paddingを使ってみます。

h2 {
   background: url(./images/bg_h2.png) 0 0 no-repeat;
        padding:26px 0 0 66px;
   height: 50px;
     color: #336633;
}

どうでしょう。

このように表示されれば、OKです。
実際に、自分で作るときは、この26pxや66pxという値は、自分でちまちま動かしながらチェックしてみてください。

そのうち、1pxがどのくらいか、10px、100pxがどのくらいか、が感覚でわかってくるようになってきます。
作っていれば自然となってきますので、あまり焦らず進めていきましょう。
では、次です。

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。