THE HAM MEDIA BLOG

覚え書き用にエントリーしておきます。
『CSS：1行目の頭文字だけ前に出したい時｜Web仕事人の部屋』
というところで、CSSのtext-indentを使って、
一行目だけを他の文字よりも前に出す方法が載っていたので、
自分も試しにやってみました。

ぶら下げインデントとは

文書作成ソフトであるWord(ワード)とかを使っている人は
この言葉を知っている人がいると思いますが、
段落の中で、一行目だけ前にだして、 二行目以下を少しインデントをかけているのを
「ぶら下げインデント」と言います。

ページをつくっていく中で、
どうしてもぶら下げインデントを使いたいことが出てきても、
今までやり方を知らなかったので、かなり悩んでいました。

今回、僕が普段読んでいるブログで、
その方法がエントリーされていたので、
自分もメモ代わりに書いておこうと思います。

ポイントはマイナスマージンを使ったtext-indent

インデント表示したいのはリストとかの見出しマークなので、
「※」や「＊」などの文字をリストの前に持ってくるようにしてみます。

HTMLソース

<ul>
    <li>※THE HAM MEDIA</li>
    <li>※THE HAM MEDIA<br />
        THE HAM MEDIA</li>
    <li>※THE HAM MEDIA<br />
        THE HAM MEDIA<br />
        THE HAM MEDIA</li>
</ul>

一つのリスト内容が長過ぎて、自動的に改行になってしまったり、
デザインの都合で改行が必要になったりする場合があると思うのですが、
今回は簡単にbrを使って再現。

CSSソース

ul {
    margin-left: 1.0em;
}
li {
    text-indent: -1.0em;
}

1emは、文字一文字分のサイズに相当するので、
その文右側にインデントして、
一行目だけ左側にでるように、text-indentで
マイナスマージンを指定しておくだけでOKです。
text-indentは要素の一行にしか適応されないプロパティなので、
ぶら下げインデントや字下げに用いるのには最適なのです。

どのようになるかというと↓

ブラウザによっては表示が変化

少し注意したほうがいいのは、
ブラウザやCSSの設定によっては、インデントの幅がかわってしまう。
その場合はemの指定ではなくて、pxなどに変えて設定した方がいい。
上でプレビューしてみたのも、ブラウザによって見え方が違う。
デフォルトの状態でも、Safariなどではインデントが大きくとられていたので、
設定は十分注意しておこなった方がいいでしょう。