2年 ago
1457 Views

ぶら下げインデントを表現する

text-design

注釈や箇条書きなど、先頭の1文字だけ左側にはみ出す形で2行目以降の文頭を揃えたい場合には、text-indentとmarginプロパティを組み合わせて指定することで「ぶら下げインデント」を表現できる。

■例1:HTMLソース1

<p class="none">
※文章の最初に「※」を使った注釈などでは、text-indentプロパティにマイナスの値を入れて※を1文字分左にずらした上で、marginプロパティで2行目以降を揃えます。これにより、改行しても行頭がずれません。
</p>

cssでぶら下げインデントを指定するので、HTML上で特に空白文字などを入れる必要はありません。

■例1:cssソース1

p.note{
   text-indent:-1em;
   margin-left:1em;
}

text-indentプロパティの値に-1em、margin-leftプロパティの値に1emを指定します。
複数行にわたる場合はul要素などを組み合わせましょう。ずらしたい文字数に合わせて調整します。

■例1

※文章の最初に「※」を使った注釈などでは、text-indentプロパティにマイナスの値を入れて※を1文字分左にずらした上で、marginプロパティで2行目以降を揃えます。これにより、改行しても行頭がずれません。

■例2:HTMLソース2

<ul class="note">
<li>※1 条件を満たした場合に適用となります。</li>
<li>※2 別途お見積りになります。作業内容の内訳に関しては……</li>
</ul>

■例2:cssソース2

ul.note li{
   text-indent:-2em:
   margin-indent:2em;
}

■例2

  • ※1 条件を満たした場合に適用となります。
  • ※2 別途お見積りになります。作業内容の内訳に関しては……
Article Categories:
html&CSS
12345 (No Ratings Yet)
Loading...

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ