文章をより綺麗に整形するCSSサンプル

CSS

p.sample5:first-letter{
	font-weight:bold;
	font-size:24px;
}

HTML

<p class="sample5">最初の文字がだけが大きくなるサンプルです</p>

CSS

p.sample4 {
	text-indent: 1em;
}

HTML

<p class="sample4">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへのあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへの</p>

CSS

p.sample6:first-line{
	font-weight:bold;
	font-size:large;
	color:orange;
}

HTML

<p class="sample6">1行目だけが大きくなるサンプルです。1行目だけが大きくなるサンプルです。1行目だけが大きくなるサンプルです。1行目だけが大きくなるサンプルです。</p>

CSS

.sample1 p:first-child {
	font-weight:bold;
	font-size:large;
	color:orange;
}

HTML

<div class="sample1">
<p>最初のp要素にだけ適用されます。</p>
<p>最初のp要素にだけ適用されます。</p>
<p>最初のp要素にだけ適用されます。</p>
</div>

CSS

.sample2 p:nth-of-type(2n+1) {
	font-weight:bold;
	font-size:large;
	color:orange;
}

HTML

<div class="sample2">
<p>1段目のPです。</p>
<p>2段目のPです。</p>
<p>3段目のPです。</p>
</div>

CSS

.sample3 p:nth-of-type(5n+1) {
	font-weight:bold;
	font-size:large;
	color:orange;
}

HTML

<div class="sample3">
<p>1段目のP</p>
<p>2段目のP</p>
<p>3段目のP</p>
<p>4段目のP</p>
<p>5段目のP</p>
<p>6段目のP</p>
<p>7段目のP</p>
<p>8段目のP</p>
</div>