HTML

<p> 段落

詳細を開く 詳細を閉じる

HTMLコード

段落 : <p>

<p>要素は、


別ウィンドウで表示

<p>aaaaa</p>

CSSを使った実用的な例

司馬遼太郎 著/竜馬がゆく(六)/秘密同盟 より


別ウィンドウで表示

<style>
	p {
		line-height: 1.5;
		text-indent: 1.5em;
	}
</style>

<p>
	桂の感情は果然硬化し、席をはらって帰国しようとした。
	薩摩側も、なお藩の体面と威厳のために黙している。
</p>
<p>
	この段階で竜馬は西郷に、「長州が可哀そうではないか」と叫ぶようにいった。
	当夜の竜馬の発言は、ほとんどこの一言しかない。
	あとは、西郷を射すように見つめたまま、沈黙したからである。
</p>
<p>
	奇妙といっていい。
	これで薩長連合は成立した。
	歴史は回転し、時勢はこの夜を境に討幕段階に入った。
</p>

CSSコード

CSSなし


別ウィンドウで表示

<p class="sample1">sample1</p>
<p class="sample2">sample2</p>
<p class="sample3">sample3</p>

色 : color/background


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	color:			orangered;
}

.sample2 {
	background:		moccasin;
}

.sample3 {
	color:			white;
	background:		saddlebrown;
}

左・中央・右揃え : text-align


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	text-align:			left;
}

.sample2 {
	text-align:			center;
}

.sample3 {
	text-align:			right;
}
	
.sample1, .sample2, .sample3 {
	background:			moccasin;
}

行頭の字下げ : text-indent


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	text-indent:		30px;
}

.sample2 {
	text-indent:		10px;
}

.sample3 {
	text-indent:		-10px;
}
	
.sample1, .sample2, .sample3 {
	background:		moccasin;
	margin-left:		25px;
}

行の高さ(行間の広さ) : line-height


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	line-height:			2;
}

.sample2 {
	line-height:			1.4;
}

.sample3 {
	line-height:			0.8;
}
	
.sample1, .sample2, .sample3 {
	background:			moccasin;
}
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ