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

CSSのtext-indentプロパティの使い方を解説

text-indentプロパティは、段落のテキストの1行目にインデント（字下げ）を設定するために使用されます。値には、cmやpxなどの長さの単位、あるいはインデント幅を示す%（パーセンテージ）を指定することができます。

サンプルコード

次のコードを実行すると、text-indentプロパティの実際の動作を確認できます。

<html>
   <head>
   </head>
   <body>
      <p style = "text-indent:2cm;">
         このテキストの1行目は2cm分インデントされ、2行目以降は通常の位置に表示されます。
         これはCSSのtext-indentプロパティによって実現されています。
      </p>
   </body>
</html>

解説

上記の例では、段落（<p>要素）に対してtext-indent: 2cm;を指定しています。その結果、段落の最初の行だけが2cm分右にずれて表示され、2行目以降は通常どおりの位置から始まります。

なお、text-indentプロパティでよく使われる主な値は以下のとおりです。

  • 長さの単位（px、em、cmなど）： 固定幅でインデントを指定します。
  • %： コンテナ（親要素）の幅に対する割合でインデントを指定します。
  • 負の値： テキストを左側へ突き出す「ぶら下がりインデント」も可能です。

  1. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none

  2. CSSのlist-style-imageプロパティの使い方｜箇条書きのマーカーを画像に変更する方法

    list-style-imageプロパティとはCSSのlist-style-imageプロパティを使うと、箇条書き（リスト）のマーカーとして、通常の黒丸（ビュレット）や数字の代わりに任意の画像を指定できます。オリジナルのアイコンや矢印画像などをリストの先頭に表示したい場合に便利なプロパティです。値にはurl()関数で画像ファイルのパスを指定します。指定できるのは<ul>や<ol>、<li>などdisplay: list-itemが適用される要素です。基本的な書式list-style-image: url(画像のパス);使用例以下のコードでは、最初のリスト項目