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

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

CSSで段落テキストをインデントする方法

段落のテキストの先頭行を字下げ（インデント）するには、CSSの text-indent プロパティを使用します。このプロパティを使うことで、段落の最初の行だけを任意の幅だけずらして表示できます。

指定できる値

text-indent プロパティには、インデント幅を示す数値またはパーセンテージ（%）を指定できます。単位としては cm、px、em なども利用可能です。負の値を指定すれば、逆方向に字下げすることもできます。

サンプルコード

以下のコードを実行すると、text-indent プロパティによる字下げの動作を確認できます。この例では、段落の1行目だけが2cm分インデントされます。

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

押さえておきたいポイント

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属性の指定が推奨されま