• Home
  • About 概要
  • Service できること
  • Drone 空撮
  • Blog ブログ
  • Privacy Policy
お問い合わせ
CONTACT INFORMATION
三重県松阪市
嬉野津屋城町1355−4
0598-30-5698
月~金曜日 9:00~18:00
Tweets by aquacube
  • Home
  • About
  • Service
  • ドローン・空撮
  • ブログ
  • Privacy Policy
お問い合わせ
To Blog

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

2012.07.25
-
All

例えば

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

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

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

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

CSSのサンプル

[html]
.textIndent{
padding-left: 1em;
text-indent: -1em;
}
[/html]

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

PREVIOUS POST
美猫
NEXT POST
ピエロ
category
  • All
  • News
  • Tips
  • WordPress
archives




LATEST POSTS
  • 2022.08.01
    2022年度夏期休業のお知らせ
  • 2021.12.24
    年末年始の休業のお知らせ
  • 2021.07.21
    7月22日(木)~7月26日(日)休業のお知らせ
GET CONNECTED

Copyright - AQUACUBE

CSSでぶら下げインデントにする。 | ホームページ制作  三重- AQUACUBE(アクアキューブ)