• Home
  • Service 提供サービス
  • Drone 空撮
  • PORTFOLIO 事例庫
  • YouTube 動画庫
  • Photo Gellery 写真庫
  • News お知らせ
  • About 概要
  • Privacy Policy 個人情報保護方針
  • 特定商取引法に基づく表記
お問い合わせ
CONTACT INFORMATION
三重県松阪市
嬉野津屋城町1355−4
0598-30-5698
月~金曜日 9:00~18:00
Tweets by aquacube
  • Home
  • Service 提供サービス
  • Drone 空撮
  • PORTFOLIO 事例庫
  • YouTube 動画庫
  • Photo Gellery 写真庫
  • About 概要
  • News お知らせ
  • 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
  • 2024.12.18
    年末年始の休業のお知らせ
  • 2024.08.02
    2024年 夏季休業のお知らせ
  • 2024.05.28
    フィッシングメールにご注意ください
GET CONNECTED

Copyright - AQUACUBE

CSSでぶら下げインデントにする。 | ホームページ、パンフレット、名刺 制作 - AQUACUBE(アクアキューブ) | ホームページ、パンフレット、名刺 制作 – AQUACUBE(アクアキューブ)
よりよいエクスペリエンスを提供するため、当ウェブサイトでは Cookie を使用しています。引き続き閲覧する場合、Cookie の使用を承諾したものとみなされます。OK