CSSのテキストインデントで2行目以降の行頭を字下げする方法

例えば、
「※注意書きホニャララ・・・」
といった記述に対して、右の画像みたいに2行目以降を自動的に字下げしたいケースってありませんか?

今日は このようなケースを、text-indentプロパティを上手く使って、実現する方法を紹介したいと思います。

行頭を字下げするtext-indentプロパティ

text-indentは、段落1行目の行頭を字下げするプロパティ。
HTML・CSSの記述や実際の表示の例は、以下のとおりです。

◆HTML
<p class=”jisage”>
※注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。
</p>

◆CSS
.jisage{
text-indent:1em;
}

◆実際の表示

※注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。

全体を1文字分下げたうえで、1行目の行頭をマイナスに字下げする!

で、本題の2行目以降の行頭を自動で字下げしたいときですが、これは全体を1文字分下げて(右に寄せて)おいて、1行目のみをマイナスに字下げすると考えると良いのです。

以下に、実際の記述例を紹介します。

◆HTML
<p class=”jisage”>
※注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。
</p>

◆CSS
.jisage{
padding-left:1em;
text-indent:-1em;
}

◆実際の表示

※注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。注意文とかで2行目を字下げしたい時は、スタイルカスケードシートのテキストインデントプロパティを上手く使いましょう。

ちょっと特殊なケースかもですが、たまに実務で使うこともありますので。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply