HTMLで段落の先頭行をインデントするコードを紹介します。
段落を字下げするには、スタイルシートの "text-indent" を利用します。
text-indent : (インデント幅)
p {text-indent:1em;}
下記のコードを記述します。
"text-indent:1em"の指定により、1文字分段落の先頭を字下げします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
p {text-indent:1em;}
-->
</style>
</head>
<body>
<p>これは段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
<p>これは2つ目の段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
<p>これは3つ目の段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。段落の先頭行が1文字ぶん字下げされていることが確認できます。
下記のコードを記述します。
"text-indent:0.5em"の指定により、0.5文字分段落の先頭を字下げします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
p {text-indent:0.5em;}
-->
</style>
</head>
<body>
<p>これは段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
<p>これは2つ目の段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
<p>これは3つ目の段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。段落の先頭行が半文字ぶん字下げされていることが確認できます。
下記のコードを記述します。
"text-indent:14px"の指定により、14ピクセル段落の先頭を字下げします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
p {text-indent:14px;}
-->
</style>
</head>
<body>
<p>これは段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
<p>これは2つ目の段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
<p>これは3つ目の段落です。HTMLではPタグで段落を表現できます。HTMLはhtmlタグ内にheadタグとbodyタグを記述します。
headタグにはドキュメントのタイトルやメタ情報を記述します。bodyタグには画面に表示される文章や画像を記述します。</p>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。指定したピクセル数段落の先頭が字下げされます。
