HTMLで段落の先頭行をインデントするコードを紹介します。
概要
段落を字下げするには、スタイルシートの "text-indent" を利用します。
書式
記述例
p {text-indent:1em;}
コード例1 : 1文字字下げする
下記のコードを記述します。
"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文字ぶん字下げされていることが確認できます。
コード例2 : 半文字字下げする
下記のコードを記述します。
"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ブラウザで表示します。下図の画面が表示されます。段落の先頭行が半文字ぶん字下げされていることが確認できます。
コード例3 : ピクセル指定する
下記のコードを記述します。
"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ブラウザで表示します。下図の画面が表示されます。指定したピクセル数段落の先頭が字下げされます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2022-12-30
作成日: 2017-01-18
