リストなどで頭の1文字を前に出す方法

| コメント(0)
リストなどで1行が長くなってしまうと、

|※テキストテキスト
|※テキストテキストテキストテキ
|ストテキスト
|※テキストテキストテキ

折り返されてこのようになってしまいます。
ですが、折り返されたあとは※ではなく文字の初め(テキストの"テ")に
合わせたいということが殆どかと思います。

今まではpaddingと背景画像を使って再現していたのですが、
もっとずっと楽な方法があること知ったのでメモしておきます。

上の例がリストであるとして、ソースはこのようになっていると思います。

<ul>
<li>※テキストテキスト</li>
<li>※テキストテキストテキストテキストテキスト</li>
<li>※テキストテキストテキ</li>
</ul>

まず、この<li>タグに左paddingを指定します。
1文字分、と指定するのがいいと思いますが、崩れる場合もあるようなので
そのときはピクセルで。

padding-left:1em; または padding-left:12px; など

これで一文字分、右にずれることになります。

| ※テキストテキスト
| ※テキストテキストテキストテ
| キストテキスト
| ※テキストテキストテキ


次に、行の先頭だけ左にずらします。
  • タグにtext-indentを指定します。

    text-indent:-1em;

    これで頭だけ左にずれ、改行後の先頭はテキストに揃う形になります。

    |※テキストテキスト
    |※テキストテキストテキストテキ
    | ストテキスト
    |※テキストテキストテキ


    それにしても、text-indentなんてまさにこういう用途のために
    用意されているようなクラスですよね・・
    もしくは先頭1文字下げるとか。

    普段、画像置き換えのために文字を吹っ飛ばすくらいしか
    使っていなかったので、目から鱗な気分です。
  • コメントする

    このブログ記事について

    このページは、gravity-worksが2011年4月13日 10:28に書いたブログ記事です。

    ひとつ前のブログ記事は「inline-block」です。

    次のブログ記事は「dlで表をつくる方法」です。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。