HTML DOMのtextIndentプロパティとは？構文・値・実装例をわかりやすく解説
HTML DOMのtextIndentプロパティは、HTMLドキュメント内の要素におけるテキストの1行目（最初の行）のインデント（字下げ）を取得・設定するために使用されます。段落の先頭に余白を作りたい場合などに活用できる、便利なスタイルプロパティです。
構文
textIndentプロパティの基本的な構文は以下のとおりです。
値を取得する場合
object.style.textIndent
値を設定する場合
object.style.textIndent = "value";
指定できる値
「value」には以下のいずれかの値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値に戻します。 |
| percentage（%） | 親要素の幅に対する割合（パーセンテージ）でインデント量を指定します。 |
| length | pxやemなどの長さの単位でインデント量を指定します。 |
実装例
ここでは、ボタンをクリックすると段落の1行目がインデントされるサンプルを紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style textIndent Property Example</h1>
<p>
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Set textIndent</button>
<script>
function add() {
document.querySelector('p').style.textIndent = "80px";
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、ブラウザには次のように表示されます。
「Set textIndent」ボタンをクリックすると、JavaScriptによって段落の1行目に80pxのインデントが設定され、テキストの先頭が字下げされます。
このように、DOMのstyleオブジェクト経由でtextIndentプロパティを操作することで、JavaScriptから動的に段落のインデントを制御することが可能です。
-
HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説
HTML DOMのuserSelectプロパティは、HTMLドキュメント内で要素のテキストがユーザーによって選択可能かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、Webページ上のテキストのコピーやドラッグによる選択を柔軟に制御できます。構文userSelectプロパティの基本的な構文は以下のとおりです。userSelectの値を取得する場合object.style.userSelectuserSelectの値を設定する場合object.style.userSelect = value;設定できる値valueには以下のいずれかの値を指定できます。値説明autoブラ
-
HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説
HTML DOMのstyle.directionプロパティは、要素内のテキストの流れる方向（文字方向）を取得・設定するために使用されるプロパティです。デフォルト値は「ltr」となっています。この記事では、directionプロパティの基本的な使い方から、設定できる値、実際に動作するコード例までをわかりやすく解説します。directionプロパティの構文directionプロパティをJavaScriptで設定する場合、以下のような構文を使用します。object.style.direction = ltr|rtl|initial|inherit;設定できる値の一覧directionプロパティには、