MENU
  1. ホーム
  2. CSS
  3. text-indent プロパティ

text-indent プロパティ

CSS
2023.07.30

text-indentプロパティは、ブロックレベル要素の頭部分にインデントを設定するプロパティになります。

text-indentの説明図
text-indentプロパティ
記法

text-indent : インデント量

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>text-indentプロパティに関して</title>
  </head>

  <body>
    <label>text-indentなし</label>
    <p>
      吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。
      何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
    </p>
    
    <label>text-indentあり</label>
    <p class="text-indent">
      吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。
      何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
    </p>
  </body>
</html>
p {
  background-color: #EBEAEB; /* 表示エリアの背景 */
  width: 300px; /* 文字表示エリア */
}
.text-indent {
  text-indent: 1.5rem;
}
出力結果

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

text-indentプロパティ(マイナス値)
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>text-indentプロパティ(マイナス値)に関して</title>
  </head>

  <body>
    <div class="text-area">
      <p class="negative-text-indent">
        ※吾輩は猫である。名前はまだ無い。<br>
        どこで生れたかとんと見当がつかぬ。<br>
        何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
      </p>
    </div>
  </body>
</html>

.text-area {
  display: inline-block; /* div要素の横幅を指定するため */
  width: 400px; /* 文字表示エリア */
  border: 1px solid black;
}
.negative-text-indent {
  text-indent: -1rem;
  margin: 1rem 2rem;
}
出力結果

※吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

相対的に2行目以降が全てインデントされているように見える

CSS