CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-indentプロパティでテキストのインデントを設定する方法

CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。

構文

CSS text-indentプロパティの基本構文は以下のとおりです。

Selector {
    text-indent: /*value*/
}

指定できる主な値は次のとおりです。

  • <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。
  • <percentage>：包含ブロックの幅に対する割合（%）で指定します。
  • 負の値：逆方向（左側）へインデントされ、テキストがはみ出して表示されます。

使用例1：段落と見出しへの適用

以下の例では、article要素に「25%」のインデントを設定し、h3要素には「-0.8em」の負の値を指定しています。負の値を指定すると、1行目だけが左側に飛び出すような表示になります。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: flex;
    float: left;
    margin: auto;
    padding: 10px;
}
article {
    text-indent: 25%;
    background-color: darkseagreen;
    padding: 15px;
    font-size: 1.3em;
}
h3 {
    text-indent: -0.8em;
}
</style>
</head>
<body>
<div>
<h3>Doing it our way. Nothing gonna turn us back now.</h3>
<article>
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. This is demo paragraph. </article>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSのtext-indentプロパティでテキストのインデントを設定する方法

使用例2：リストへの適用

次の例では、ul要素に対してtext-indentを「23px」で設定し、背景画像と組み合わせています。リスト項目のテキストが一定の幅で字下げされているのがわかります。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style: none;
    display: flex;
    float: left;
    text-indent: 23px;
    background-image: url("https://www.tutorialspoint.com/angular4/images/angular-4.jpg");
    font-size: 1.5em;
}
li {
    border: thin solid;
}
</style>
</head>
<body>
<ul>
<li>This is demo text. This is demo text.</li>
<li>Angular 4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. </li>
<li>Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc</li>
<li>This is demo text. This is demo text.</li>
</ul>
</body>
</html>

出力結果

上記のコードを実行すると、次のように表示されます。

CSSのtext-indentプロパティでテキストのインデントを設定する方法

まとめ

text-indentプロパティは、要素の1行目だけに字下げを適用できるCSSプロパティです。pxやemなどの長さの単位、包含ブロックの幅に対する割合（%）で指定でき、負の値を使えば逆方向のインデントも可能です。段落やリストの可読性を高めたい場面でぜひ活用してみてください。

  1. CSSのcolorプロパティでテキストの色を設定する方法

    CSSのcolorプロパティは、要素内のテキスト（文字）の色を指定するために使用します。色の値には、色名キーワード（red、blueなど）、16進数カラーコード（#ff0000など）、rgb()・hsl()などの関数表記が利用でき、Webページの文字色を柔軟にコントロールできます。 構文 CSSのcolorプロパティの基本構文は以下のとおりです。 セレクタ { color: /* 値 */ } 色の主な指定方法 キーワード： red、blue、rebeccapurple など定義済みの色名 16進数（HEX）： #ff0000 のような形式 RGB関数： rgb(255, 0, 0)

  2. CSSのtext-transformプロパティでテキストの大文字・小文字を変換する方法

    CSSのtext-transformプロパティを使うと、要素内のテキストの大文字・小文字の表示形式を簡単に制御できます。指定できる値は、capitalize、lowercase、uppercase、full-width、full-size-kana、noneの6種類です。 構文 CSSのtext-transformプロパティの構文は以下のとおりです。 Selector {    text-transform: /*value*/ } 指定できる値の一覧 capitalize … 各単語の先頭文字を大文字にします uppercase … すべての文字を大文字にします lo