HOME
HTML/CSS
CSSで1行目の見出し項目をぶら下げインデントする

CSSで1行目の見出し項目をぶら下げインデントする

注意書きや箇条書きなど段落の1行目に見出し項目がある文章で、項目を目立たせるために、2行目以降を字下げすることがあります。これを簡単に実現する方法です。注意書きとか箇条書きなど、非常に使う場面が多いと思うのでので、かなり役立つテクニックです。ていうか、このテクニック皆さん知ってますよね。。。一応、CSS初心者の方向けということで載せておきます。

HTMLコード

 
<ul>
    <li>※ああああああああああああああああああああああああああああああああああああ</li>
    <li>※いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</li>
    <li>※うううううううううううううううううううううううううううううううううううううううう</li>
</ul>

CSSコード

 
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;」で１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出すということです。

date 2010.10.29