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

CSSで段落のテキストをインデントする方法｜text-indentプロパティの使い方

text-indentプロパティとは

CSSのtext-indentプロパティは、段落のテキストにインデント（字下げ）を設定するために使用します。指定できる値は、パーセンテージ（%）や、インデント幅を表す数値（px・cm・emなど）です。

このプロパティが適用されるのは段落の最初の行のみという点が特徴です。2行目以降のテキスト位置は変わりません。

指定できる主な値

  • 長さ（length）：px、cm、pt、emなどの単位でインデント幅を指定
  • パーセンテージ（%）：親要素の幅に対する割合でインデント幅を指定
  • 負の値：マイナスの値を指定すると、通常とは逆方向（左側）へインデントされます

使用例

以下のコードを実行して、CSSでtext-indentプロパティの動作を確認してみましょう。

<html>
   <head>
   </head>
   <body>
      <p style = "text-indent:2cm;">
         このテキストの最初の行は2cmだけ字下げされて表示され、
         2行目以降は元の位置のまま表示されます。
         これはCSSのtext-indentプロパティによるものです。
      </p>
   </body>
</html>

コードの解説

この例では、段落に対してtext-indent: 2cm;を指定しています。その結果、段落の1行目だけが2cm分右へずれて表示され、2行目以降は通常どおりの位置に配置されます。

文章の読みやすさを向上させたい場合や、書籍のような段落スタイルを作りたい場合に、text-indentプロパティは非常に便利です。

  1. CSSのtext-indentプロパティを使ってテキストをインデントする方法

    CSSのtext-indentプロパティを使用すると、段落の先頭に挿入されるインデント（字下げ）の幅を指定することができます。文章の読みやすさやデザイン性を高めたい場合に便利なプロパティです。基本的な使い方以下の例では、text-indentプロパティを使って、段落の先頭にパーセンテージ指定でインデントを設定しています。<!DOCTYPE html> <html> <head> <style> p { text-indent: 15%; } article { background-color: darkgray; mar

  2. CSSのhyphensプロパティでテキストにハイフンを追加する方法

    CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。 hyphensプロパティの主な値 none：ハイフンによる改行を一切行いません。&shy;などの手動指定も無効になります。 manual：&shy;（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。 auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されま