先日、CSSでテキストのぶら下げインデントの実現方法を質問されたことがあったので、やり方をここにも書いておいてみます。

文章の冒頭に「※」などを付け、その後に続く文章が改行された際には、字下げを行う、ぶら下げインデント。

Webページ上でもその様な段落表現をすることは多々ありますが、それをCSSで実装するには、下記の様に指定します。

【例:<p>タグに対してぶら下げインデントを指定する場合】
◆HTML ——————————————–

<p>※ぶら下げインデント用ダミーテキスト。ぶら下
げインデント用ダミーテキスト。ぶら下げインデント用ダ
ミーテキスト。ぶら下げインデント用ダミーテキスト。ぶ
ら下げインデント用ダミーテキスト。ぶら下げインデント
用ダミーテキスト。</p>

◆CSS ———————————————

p {
  padding-left: 1em;
  text-indent: -1em;
}

◆実装デモ ——————————————–

※ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。ぶら下げインデント用ダミーテキスト。

—————————————————

段落に対してtext-indentを「-1em」で一文字分左へずらして、padding-leftで位置を通常に戻すために「1em」をつける。(margin-leftでも可)
これだけの簡単な指定で実現できます。
もちろん<p>タグだけでなく、<li>など他のタグでも使用可能です。

注意点はプロポーショナルフォントはブラウザによって「1em」の解釈が違うので、「・」を使った時など綺麗に揃わない場合もあります。
その際はハック等でブラウザ毎にemの値を「1.2em」といったように微妙に調整する必要がでてきます。。。

ご参考までに。。。

SHARE

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して