- 最終更新日
- CSS
2行目以降の文章をインデント！CSSの「text-indent」プロパティの利用方法
インデントとは日本語で「字下げ」という意味です。
小説などの1行目は1文字分の空白がありますが、あれが「字下げ」ですね。ホームページでは逆に2行目以降をインデントする事が多いです。
例えば注意事項などを追加で記述する時に「・」や「※」を頭に置いて箇条書きの文章を表示したりします。そんな時に2行目が「・」や「※」と同じ位置ではなくインデントさせた方が見やすいんです。
「text-indent」の使い方
「インデントなし」・「2行目以降をインデント」・「1行目をインデント」の3パターンをご覧ください。
【インデントなし】
※これは「text-indent」を使っていません。
1行目と2行目以降の頭が揃うデフォルトの状態です。
【2行目以降をインデント】
※「text-indent」を使って2行目以降をインデントしています。
1行目の「※」の部分だけ飛び出た状態です。
2行目以降をインデントするタグはすぐ下のコードです。
indent01.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>2行目以降インデント</title>
- <style>
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box
- }
-
- div {
- padding: 20px;
- border: 1px solid #c1c1c1
- }
-
- .indent01 {
- text-indent: -1em;
- padding-left: 1em
- }
- </style>
- </head>
- <body>
- <div>
- <p class="indent01">※「text-indent」を使って2行目以降をインデントしています。<br>1行目の「※」の部分だけ飛び出た状態です。</p>
- </div>
- </body>
- </html>
大事なのは「text-indent」と「padding-left」の指定です。
「em」という単位は1文字分という事になります。全体の余白を「padding-left」で空けて「text-indent」で1行目の余白を詰めるという指定になります。
- .indent01 {
- text-indent: -1em;
- padding-left: 1em
- }
【1行目をインデント】
「text-indent」を使って1行目をインデントしています。
1行目の1文字分が空白となった状態です。
1行目をインデントするタグはすぐ下のコードです。
indent02.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>1行目をインデント</title>
- <style>
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box
- }
-
- div {
- padding: 20px;
- border: 1px solid #c1c1c1
- }
-
- .indent02 {
- text-indent: 1em
- }
- </style>
- </head>
- <body>
- <div>
- <p class="indent02">「text-indent」を使って1行目をインデントしています。<br>1行目の1文字分が空白となった状態です。</p>
- </div>
- </body>
- </html>
1行目をインデントする方が単純です。「text-indent」を使って1文字分の余白を開ける指定のみです。
- .indent02 {
- text-indent: 1em
- }
ちょっとした小技的なものなので忘れた時にチェックしてください（笑）。
