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

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

テキストのインデント（字下げ）を行うには、CSSの text-indent プロパティを使用します。このプロパティは、段落の最初の行だけをインデントするためのもので、文章の読みやすさやデザイン性を高めたい場合に便利です。

text-indentプロパティの基本

text-indent には、px（ピクセル）、em、% などの単位を指定できます。値が大きいほど、最初の行が右側に大きくずれます。

例1：pxでインデントを指定する

まずは、30px を指定した基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    text-indent: 30px;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<div>
<p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</p>
</div>
</body>
</html>

出力結果

段落の最初の行だけが、左端から30px右にずれて表示されます。2行目以降は通常どおり左揃えになります。

例2：emでインデントを指定する

次に、フォントサイズに連動する em 単位を使った例です。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    text-indent: 15em;
}
</style>
</head>
<body>
<h1>デモ見出し</h1>
<div>
<p>これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。これはデモ用のテキストです。</p>
</div>
</body>
</html>

出力結果

15em を指定したことで、最初の行が大きくインデントされ、文字サイズに応じた柔軟な字下げが実現できます。

まとめ

  • text-indent プロパティは、段落の最初の行のみをインデントします。
  • px や em、% など、さまざまな単位で指定可能です。
  • 日本語の文章では、全角1文字分のインデント（例：text-indent: 1em;）がよく使われます。
  1. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負

  2. CSSのtext-decorationプロパティでテキスト装飾を付ける方法

    CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ