CSSでぶら下げインデントにする。

Posted by admin in : Categories: WEBデザイン

      

例えば

*ぶら下げインデント
普通に改行すると、このように*の下に回り込んで表示されます。

上の例では2行目の先頭が1行目の先頭と同じ位置になっていますが、1行目の「ぶら下げインデント」が注意書きなどの見出しだった場合、改行した行の先頭を1文字分右にずらして表示させたいこともあります。
このような場合にCSSで調整することができるので紹介します。

以下の例はCSSを適用したものです。

*ぶら下げインデント
CSSを適用すると、このように改行した行は*の下に回り込まずに1文字分右にずらして表示させることができます。

CSSのサンプル

上の例ではクラス名をtextIndentとして
padding-leftで全体を1文字分右にずらし、
text-indentで1行目だけを1文字分左に戻す。
というようなイメージで指定しています。

Address

〒515-2332 三重県松阪市嬉野津屋城町1355-4
Phone: 0598-30-5698
Mobile:080-6929-0023

Email: webmaster@aquacube.biz
Website: www.aquacube.biz
Facebook Twitter Rss

お問い合わせ