リストなどで2行目以降の行頭をインデントする方法

【この記事の所要時間 : 約 2 分

HTMLでちょっとはまったのがあったので、備忘録的に書いておく。
よく1行目だけインデントで字下げするというのはあるが、それとは違い、問題は、リストなどで1行目は矢印やなにかしらのマークで字下げされている時に改行された2行目の行頭の位置の調整についてである。いわゆる2行目以降のインデントのやり方であるが、やり方がわからずにうんうんうなっていた。キーワードが悪いのか検索をしてもいい情報にめぐり合わないなあ~と思っていたら、やっと発見!
CSSで1行目の見出し項目をぶら下げインデントする

注意書きや箇条書きなど段落の1行目に見出し項目がある文章で、項目を目立たせるために、2行目以降を字下げすることがあります。これを簡単に実現する方法です。

ul {
list-style: none;
width: 250px;
font-size: 0.8em;
line-height: 1.3;
}
li {
margin-bottom: 5px;
padding-left: 1em; /*1em(1文字)分、右に動かす*/
text-indent: -1em; /*最初の行だけ1em(1文字)分、左に動かす*/
color: #666666;
}

「padding-left : 1em;」で1文字分右に動かして、「text-indent : -1em;」で最初の行だけ1文字分左に出すということです。

これでできた!
text-indentでマイナスにするというのは思いつかなかった。
あーこれですっきり!!
より詳しく知りたい方はこちらへ

スラスラわかるHTML&CSSのきほん
狩野 祐東
SBクリエイティブ
売り上げランキング: 2,978
スポンサーリンク
レクタングル(大)広告
  • このエントリーをはてなブックマークに追加
スポンサーリンク
レクタングル(大)広告

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です