htmlcss テキストのインデント幅の指定

CATEGORY: HTML/CSS

2013年4月26日

テキストの最初の行のインデント幅を指定するには、「text-indent」プロパティを利用する。

指定する値は「長さ」または「パーセンテージ」で指定し、マイナスの値も指定可能。

マイナス値を指定してボックスの外にはみ出した部分の表示は、「overflow」プロパティで制御する。

以下の例の場合、クラス「indented」を指定した p 要素の最初の行は「1em」分インデントされて表示される。

p.indented {
  text-indent: 1em;
}

次のように「text-indent」に「-1em」（マイナス値）を指定し、さらに「margin-left」に「1em」を指定すると、最初の行以外は、「1em」インデントされているように見える。

p.indentx {
  text-indent: -1em;
  margin-left: 1em;  /* または、padding-left: 1em; */
}

これを利用すると以下のように表示することができる。この例では（注意）の文字数（４）からそれぞれ「-4em」「4em」に指定

（注意）|初期設定では、WordPress はクエスチョンマークと多くの数字からなる URL を使用していますが、パーマリンクとアーカイブ用にカスタムな URL 構造を作成することもできます。これにより、リンクの見た目、使いやすさ、そして継続性を改善できます。

インデントする長さを、その値によって「jQuery」を使って自動的に変更する方法は以下を参照。

「インデントする長さを、jQuery を使って動的に変更する」