HTMLで記事を書く（素材付き／その2）

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

さて、「HTMLで記事を書く」第二回目は、見出しについて扱ってみたいと思います。

ブログで文章を書くとき、とくに長い文章だとメリハリをつけるのに苦労したことはありませんか？

そんなときに役立つのが『見出し』です。HTMLではヘディングタグといって<hx>～</hx>という形で使用できます。大きな見出しから順番に、h1、h2、h3…h6　と続きます。

ヘディングタグの簡単な理解

アメブロでは、記事タイトルに大親分のh1タグが使われています。本でいえば、章変わりのときに1ページ丸々「第○章　○○○○○○○」というタイトルだけが書かれているの区切りのページ。次に続く本文中でも適宜、見出しが使われています。そのおかげで文章の流れが分かりやすくなり、読みやすくなっていますよね。

HTML（HTML5）も一緒で、アメブロの記事なら1つの記事にh1タグが使えるのは1回のみ。次の見出しはh2、そのまとまりの中でさらに小さい見出しをつけたければh3…　と、階層的に見出しがつけられていきます。

デフォルトの状態の場合、見出しタグで括れば、WinXP＋IE9では以下のように表示されます。

ちょっとそっけないですよね。

当ブログでは、この文章の上の「ヘディングタグの簡単な理解」の部分は、
<h2>ヘディングタグの簡単な理解</h2>
というふうに書くことで、ご覧のように表示されるようにCSSを設定してカスタマイズしています。

h3くらいまでしか使わないと思いますので、すぐ使えるh2、h3のカスタマイズ例をこれからご説明いたします。

ただアメブロの場合、デフォルトの設定では記事タイトル部分、つまりh1設定が少し弱いので、そちらも同時にカスタマイズしたほうがよいかも知れません。

h1タグのカスタマイズは、「アメブロ記事タイトルのカスタマイズ」で書いていますので、あわせてご参照ください。

h2、h3タグのカスタマイズ例

先のデフォルト状態の設定を見ていただくと分かるように、文字の大きさや太さで違いを出して、大きい見出しから小さい見出しにかけてアクセントの付け方が弱くなっているのが分かると思います。それに準じて、h3よりh2のほうが少し目立つように設定すると、直感的にも分かりやすくなります。

カスタマイズの方法を、ここでは強調具合の弱いものから順に、次のように分類して説明してゆきたいと思います。

色を変えることで見出しっぽく見せる
さらにボーダー（線）を引くことで見出しっぽく見せる
背景画像を使うことで見出しっぽく見せる
背景色をつけることで、見出しっぽく見せる

ちなみに、下の見出しは、h3タグで囲まれています。

色を変えることで見出しっぽく見せる

このやり方は、h3設定の時などには結構有効です。ブログの本文は、articleTextという名前のついたボックスのなかに収まっていますので、たとえば次のように指定します。

.articleText h3 {
	margin: 20px 10px 10px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	font-size: 100%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #993300; /* 文字の色 */
}

これで、ブラウザのデフォルトフォントと同じ大きさで、茶色っぽい太字になります。

この設定をすると、<h3>上のサンプルの見出しの見え方</h3>と書けば、

上のサンプルの見出しの見え方

のように見えます。

見出しタグがある前と後では内容に変化があるのが普通なので、それを直感的に分かりやすいように、上のマージンを20pxにして、下の10pxより広めに取っています。

さらにボーダー（線）を引くことで見出しっぽく見せる

見出しっぽく見せるのに、いちばん簡単で効果的な方法といえます。ボーダーの引き方や太さで、h2にもh3にも利用できるので便利です。

では、左に太め、下に点線のラインを引く例を見てみましょう。

.articleText h2 {
	margin: 30px 10px 20px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	padding: 3px 5px 3px 5px; /* 文字周囲のパディング指定は順番に、上 右 下 左 の順 */
	border-top: none; /* 上のボーダーはなし */
	border-right: none; /* 右側のボーダーはなし */
	border-bottom: 1px dotted #7dd2e7; /* 下側のボーダー */
	border-left: 5px solid #7dd2e7; /* 左側のボーダー */
	font-size: 120%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #e93c00; /* 文字の色 */
}

この設定を呼び出すと、次のように見えます。

ボーダーで強調した見出し

ボーターは他に数種類ありますが、dashed（破線）とdouble（二重線）を憶えておけばよいでしょう。

背景画像を使うことで見出しっぽく見せる

次に背景画像を使う方法です。先のボーダーの例の左側のボーダーを設定せずに、その位置に背景画像を置いてみます。

.articleText h2 {
	margin: 30px 10px 20px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	padding: 5px 5px 2px 28px; /* 文字周囲のパディング指定は順番に、上 右 下 左 の順 */
	background-image: url('使いたい画像のURL'); /* 背景画像 */
	background-position: 0 3px; /* 左上を起点に、横方向、縦方向の順番で指定 */
	background-repeat: no-repeat; /* 繰り返し。repeat-x、 repeat-y も指定可能 */
	border-top: none; /* 上のボーダーはなし */
	border-right: none; /* 右側のボーダーはなし */
	border-bottom: 1px dotted #7dd2e7; /* 下側のボーダー */
	border-left: none; /* 左側のボーダーなし */
	font-size: 120%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #e93c00; /* 文字の色 */
}

この設定により、

アイコン付き見出しの例

とこんな感じに見えるようになりました。

もう一例、グラデーションのある背景画像を設定した例です。やり方は同じ。画像をx軸方向に繰り返すところが違っています。グラデーション背景を効果的に見せるために、下だけでなく、上にも同じボーダーを設定してみます。

.articleText h2 {
	margin: 30px 10px 20px 0; /* 周囲のマージン指定は順番に、上 右 下 左 の順 */
	padding: 5px 5px 5px 5px; /* 文字周囲のパディング指定は順番に、上 右 下 左 の順 */
	background-image: url('http://stat.ameba.jp/user_images/20120224/15/jalan2-net/f1/1c/g/o0010005011813410009.gif'); /* 背景画像 */
	background-position: left middle; /* 左上を起点に、横方向、縦方向の順番で指定 */
	background-repeat: repeat-x; /* 繰り返し */
	border-top: 1px dotted #7dd2e7; /* 上のボーダーはなし */
	border-right: none; /* 右側のボーダーはなし */
	border-bottom: 1px dotted #7dd2e7; /* 下側のボーダー */
	border-left: none; /* 左側のボーダーなし */
	font-size: 120%; /* 文字の大きさ */
	font-weight: bold; /* 文字の太さ */
	color: #e93c00; /* 文字の色 */
}

すると、

サンプル背景画像を下に貼り付けておきます

というふうに見えます。

サンプル素材をいくつか用意しました。よろしければご自由にご利用ください。