KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > Web・DTPデザイン > CSSでぶら下げインデント

Web・DTPデザイン

CSSでぶら下げインデント

KENスクールONLINE

みなさんこんにちは。
今回は、CSSでぶら下げインデントをする方法をご紹介します。

 

 

そのまま記述したテキストは、文字列が折り返された際に見栄えがよくありません。
ここにぶら下げインデントを設定すると以下のようになります。

 

 

すごくスッキリして見やすくなりましたね!

ぶら下げインデントの設定は非常に簡単です。
以下のコードを見てください。

 

 

padding-leftで1文字分左に余白をつくり、text-indentで左に1文字分ずらしています。
このように設定するだけで、簡単にぶら下げインデントが適用できます。
是非試してみてくださいね。

この記事に関連する講座

HTML5とCSS3を基礎から学ぶ

詳しくはこちら