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

Post on:2009年10月15日

Step 1. Wireframe – HTML

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

<textarea name="code" class="html" cols="60" rows="5">
<div class="post">
	<div class="postheader">
		<!--ヘッダ-->
	</div>
	<!--コンテンツ-->
</div>
</textarea>

</div>

</div>

</textarea>

Step 2. Styling Wireframe – CSS

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

<textarea name="code" class="css" cols="60" rows="5">
.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;
}
</textarea>

.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;

}

</textarea>

Step 3. Post Header Wireframe – HTML

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

<textarea name="code" class="html" cols="60" rows="5">
<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>
	<p>
		<span>Category: <a href="#">CSS</a> | Tags: <a href="#">Headings</a>, <a href="#">Tutorials</a></span>
		By <a href="#">Soh Tanaka</a>
	</p>
</div>
</textarea>

<h2><a href="#">Styling Blog Post Headers with CSS</a></h2>

<p>

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

By <a href="#">Soh Tanaka</a>

</p>

</div>

</textarea>

Step 4. Styling Post Header – CSS

日付のスタイル

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

<textarea name="code" class="css" cols="60" rows="5">
.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;
}
</textarea>

.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;

}

</textarea>

コメントのスタイル

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

<textarea name="code" class="css" cols="60" rows="5">
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;
}
</textarea>

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;

}

</textarea>

見出しのスタイル

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

<textarea name="code" class="css" cols="60" rows="5">
.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;
}
</textarea>

.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;

}

</textarea>

付帯情報のスタイル

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

<textarea name="code" class="html" cols="60" rows="5">
.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;}
</textarea>