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

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

CSS 見出しの下に区切り線を表示する

スポンサーリンク

※おいさん(id:Doraneko1986)からコメントをいただき、追記しました(「4.追記」の部分)

1.基礎

h2タグなどで見出しを作ることはブログなどではよく見られる。
現時点(2014/01/30)ではこのブログでは区切り線をつけていないけれど、区切り線をつけるためにはborder-bottomを使えばいい。

2.サンプル

サンプルとなるHTMLはこちら。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>見出しの下に区切り線</title>
<link rel="stylesheet" type="text/css" href="./css/test.css">
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
	//特になし(笑)
</script>
</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; /* 見出しの文字のサイズ */
	border-bottom: solid 3px DarkCyan; /* 見出しの区切り線のデザインはここで設定する */
	/*border-bottom: dotted 3px #00FFFF; 区切り線をドットにする場合*/
	margin-bottom: 10px; /* 見出しと本文の間隔を指定する */
	padding-bottom: 2px; /* 見出しと区切り線の間隔を指定する*/
	margin: 0; /* 見出しの周りに標準で挿入されてしまう余白を削除する*/
}

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

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

3.デモ

f:id:sho322:20140130210407j:plain

4.追記

おいさん(id:Doraneko1986)からコメントをいただきました。

こんばんわ。始めてコメントさせてもらいますm(_ _)m このCSSのコードはどこに貼り付けたらいいのでしょう?「カスタマイズ」の「デザインCSS」に直接おいて良いのでしょうか?CSSド素人のわしに教えて貰えればありがたいです(*´∀`*)

おいさんのブログを拝見すると、すでに見出しはとてもキレイに作られていて、返信が遅すぎてしまったように思いますが、返信させていただきます・・・。
遅れてしまい、申し訳ありません。


元々はちょっとしたWebページを作っているときの、勉強メモ的な位置づけで、この記事を書きました。
なので、記事のサンプルはXAMPPという環境上で確認しています。

しかし、そんなことは、(決して馬鹿にする意味ではなく)「CSSド素人」というおいさんにとって、全く重要なことではないかと思います。
XAMPPとかなんじゃいってね。

それで、はてなブログにデザインを反映させたい場合は、
自分の場合は「デザイン」→「カスタマイズ」→「デザインCSS」に以下のように記載します。
でも、これだとスマホには反映されません。

・デザインCSSの中身。

/* <system section="theme" selected="report"> */
@import "/css/theme/report/report.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */

.section h4 {
    font-size: 1.4em; /* 見出しの文字のサイズ */
    border-bottom: solid 3px DarkCyan; /* 見出しの区切り線のデザインはここで設定する */
	/*border-bottom: dotted 3px #00FFFF; 区切り線をドットにする場合*/
	margin-bottom: 10px; /* 見出しと本文の間隔を指定する */
	padding-bottom: 0; /* 見出しと区切り線の間隔を指定する*/
	margin: 0; /* 見出しの周りに標準で挿入されてしまう余白を削除する*/
}

すると、たとえば以下の記事では、見出しに下線が引かれていますね。
http://programming-10000.hatenadiary.jp/entry/20140203/1391438645

それで、なぜ、

.section h4 {

}

みたいに書いたかというと、自分のブログのページのHTMLを見てみたら、こんな感じで見出しが作られていたからです。
chromeなどで、右クリック→「ページのソースを表示」で自分のブログがどんなHTMLで表示されているのか確認できます。
こんな感じ↓

<div class="section">
    <h4>青汁 × 水</h4>
</div>

おいさんの場合は、

<h3>朝、お茶漬けを食い続けて20年</h3>

のように、h3で見出しが囲まれていますので、h3に対して、色々とデザインを設定すればいいかと思います。

で、スマホにもデザインを反映させる方法ですが、先人がめちゃくちゃわかりやすくまとめてくれております。

たとえば、ルナさうるすさんの以下の記事(言及通知飛んだらすみません)や、
はてなブログ カスタマイズ:スマホ用ページでも見出しを表示させてみましょう。

後藤光太郎さんの以下の記事(言及通知飛んだらすみません。いつもブログ楽しませてもらってます)が、この記事よりも、もっとずっと参考になると思います。
はてなブログの本文に施したデザインカスタマイズと、モバイル版への反映


おいさん、返事が遅れてしまってすみませんでした。
コメントありがとうございました。
これからもよろしくお願いします。

5.参考書籍

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

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

Webページなどを作る上で、こんな情報がほしい!と思った情報が網羅されている本。
リファレンスとしても使えるし、丁寧にタグの意味も解説してくれているため、真似するだけで勉強になる。
この本はいつも手元に置いている本だ。