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

見出し、ということで

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

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

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. 設定をしよう

  4. 段落を意識する

  5. 小見出しをつける

  6. 文字の色を指定する

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

ランダムピックアップ