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

見出し、ということで

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

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

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がどのくらいか、が感覚でわかってくるようになってきます。
作っていれば自然となってきますので、あまり焦らず進めていきましょう。
では、次です。


関連記事

  1. 画像を表示する

  2. 気がつくとすごいテクニックと、そのテクニックを使ってはいけない理由

  3. Crescent Eveをダウンロード

  4. メニューをデザインする

  5. 文字を太字にする

  6. 自分で集客対策ができる

お手本ナビの無料HPデザイン

ランダムピックアップ