読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

CSS 見出しの区切りを画像で表示する

HTML/CSS
<スポンサーリンク>

1.基礎

前回の記事の続編。
CSS 見出しの下に区切り線を表示する

今回は、見出しの部分に画像を使ってみる。
女性のブログとか、見出しのところにかわいい絵が使われていることが多いけれど、そういうかわいい見出しはCSSをいじることで実現することができる。

2.サンプル

以下のHTMLは前回の記事とほぼ同じ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>見出しの下に区切り線</title>
<link rel="stylesheet" type="text/css" href="./css/test2.css">
</head>
<body>
<div class="post">
	<h2>記事の見出し的なやつ</h2>

	<div class="text">
		<p>見出しに下線をつけると、本文と見出しの区別がつきやすくなる。
			逆に下線をつけないと、でかい文字と見出しの違いがわかりづらくなる。</p>
	</div>

	<h2>記事に複数の見出しをつけることもあるよね</h2>
	<div class="text">
		<p>見出しを作ると、記事にメリハリがつくこともある。
			見出しを付けない人もいるので、好みによる。個人的に、見出し代わりに画像を挿入するのはあまり好みではない。</p>
	</div>	
</body>
</html>

CSSを以下のように書くと、見出しに画像を表示することができる。

.post {width: 600px;}

.post h2 {
	font-size: 1.4em; /* 見出しの文字のサイズ */
	background-image: url(../img/test.jpg);
	padding-left: 60px; /* これで見出しの文字の位置を調整する */
	padding-bottom: 20px; /* 見出しの文字と画像の位置の調整。見出しと区切り線の間隔に画像の高さを足したものを指定する。*/
	padding-top:10px;
	background-repeat: no-repeat; /* 画像が繰り返して表示されないようにする */
	background-position: left bottom; /* 画像の表示位置を指定する */
	margin-bottom: 10px; /* 見出しと本文の間隔を指定する */
	margin: 0; /* 見出しの周りに標準で挿入されてしまう余白を削除する*/
}

.text {
	font-size: 1em;
	line-height: 1.2; /* 文章の行の間隔*/
}

.text p {
	margin: 0; /* 文章の周りに標準で挿入される余白を削除*/
	margin-top: 10px; /* 文章の上の方の余白を挿入 */
	margin-bottom: 20px; /* 段落の間隔*/
}

3.デモ

f:id:sho322:20140130210536j:plain

4.参考

見出しのフリー素材は以下のサイトのものをサンプルとして利用させていただきました。
http://www.templateking.jp/sozai/title/

XHTML/HTML+CSSスーパーレシピブック

XHTML/HTML+CSSスーパーレシピブック

あとは、この本をいつも読んでる。