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

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

見出しをバーの形で表示するCSSのサンプル

<スポンサーリンク>

ブログとかで、見出しの部分が横棒のバーみたいになって表示されていることがあると思う。
こいつをどうやってCSSで表現するか。

イメージとしてはこんな感じ。
超雑だけど。
f:id:sho322:20131127221532j:plain

見出しはだいたいのブログがそうであるように、h2タグだ。
画像のようにバーにするためのCSSはこんな感じになる。

.article { width: 600px;} /* 見出しの横幅 */
.article h2 {
	font-size: 1.2em; /* 見出し文字のサイズ */
	margin: 0; /* 見出しのまわりに挿入される余白の削除 */
	margin-bottom: 20px; /* 見出しと文章の間隔 */
	background-color: #33FF99; /* 見出しの背景の色 */
	line-height: 25px; /* バーの高さ */
	padding-left: 20px; /* バーの内側の左の余白サイズ */
}

.text {
	font-size: 0.8em; /* 文章の文字サイズ */
	line-height: 1.5; /* 文章の行の間隔 */
	font-family: Meiryo; /* フォントの種類 */
}

.text p{
	margin: 0; /* 文章のまわりの余白 */
	margin-bottom: 30px; /* 文章の段落の間隔 */
	padding-left: 25px; /* 文章の左側の余白 */
}

で、元になるHTMLはこんな感じ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>見出しをバーにして表示</title>
<link rel="stylesheet" type="text/css" href="bar.css">
</head>
<body>
<div class="article">
	<h2>ダービースタリオンは神のゲーム</h2>
	<div class="text">
	<p>マチカネイワシミズと一番安い馬の組み合わせが最高だった。</p>
	</div>
</div>
</body>
</html>

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

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

参考にしたのはこの本で、この本はすごくいい。
何がいいかというと、Webサイトを作る上で「これ、どうやってやればいいんだろう?」と思う部分が、章ごとに体系的にまとめられていることだ。
CSSのサンプルも1行1行に意味をちゃんと書いてくれて、真似するだけでHTMLとCSSの勉強になる。
一番実践的で、一番使いやすい本だと言える。