[CSS]初心者にも分かりやすいスタイルシートのチュートリアル

スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。

Styling Post Headings That Stick Out
demo

下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。

Step 1. Wireframe – HTML

ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。

<div class="post">
<div class="postheader">
		<!--ヘッダ-->
	</div>

	<!--コンテンツ-->
</div>

Step 2. Styling Wireframe – CSS

ヘッダは絶対配置を使用し、コンテンツに重ならないようにpaddingを指定します。

.post {
	margin: 0; padding: 110px 20px 20px;
	float: left;
	width: 560px;
	position: relative;
}
.post .postheader {
	background: url(postheader_bg.gif) repeat-x;
	float: left;
	width: 600px;
	position: absolute;
	left: 0; top: 0;
}

Step 3. Post Header Wireframe – HTML

ヘッダ内の各要素を配置します。
見出しはh2、日付はstrong, small、カテゴリはpを使用します。

<div class="postheader">
	<span class="date"><strong>Oct</strong>25 <small>2009</small></span>
<h2><a href="#">Styling Blog Post Headers with CSS</a></h2>

	<a href="#" class="comments">25</a>


		<span>Category: <a href="#">CSS</a> | Tags: <a href="#">Headings</a>, <a href="#">Tutorials</a></span>
		By <a href="#">Soh Tanaka</a>
	
</div>

Step 4. Styling Post Header – CSS

日付のスタイル

「月」はstrong、「年」はsmallで配置し、全体は「left: -50px;」を使用してコンテンツから突き出しているように配置します。

.date {
	background: url(date_bg.gif) no-repeat;
	width: 46px; height: 57px;
	float: left;
	padding: 3px 5px 3px 0;
	text-align: center;
	font-size: 1.8em;
	position: absolute;
	left: -50px; top: 0;
}
.date strong, .date small {
	font-size: 0.5em;
	text-transform: uppercase;
	display: block;
}

コメントのスタイル

日付と同様に突き出したデザインのため、top, rightに-10pxを指定して配置します。

a.comments {
	position: absolute;
	right: -10px; top: -10px;
	background: url(comment_bubble.gif) no-repeat;
	width: 34px; height: 39px;
	padding: 7px 0 0;
	text-align: center;
	color: #fff;
	font-size: 1.6em;
	text-decoration: none;
}

見出しのスタイル

コメントが見出しの上に配置されているので、重なり合わないようにpaddingで指定します。
text-shadowを使用して対応ブラウザにはより美しい装飾をしています。

.post .postheader h2 {
	margin: 0; padding: 0 25px 0 10px;
	font: normal 2.2em Georgia, "Times New Roman", Times, serif;
	height: 62px; line-height: 62px;
	text-shadow: 1px 1px 1px #cfeb7f;
}
.post .postheader h2 a {
	text-decoration: none;
	color: #222;
	display: block;
}

付帯情報のスタイル

カテゴリ・タグなどの付帯情報はp要素で実装し、背景が適切に表示されるようにpadding-leftに60pxを指定します。

.post .postheader p{
	font-size: 0.9em;
	background: url(author_bg.gif) no-repeat 10px bottom;
	height: 27px; line-height: 27px;
	margin: 0; padding: 0 10px 0 60px;
	color: #fff;
}
.postheader p a {color: #fff;}
.postheader p span {float: right;}

完成

完成したデモは、下記ページを参照ください。

完成したデモ

Post on:2009年10月15日