HOME > 開発者向けBLOG > Webデザイン >  1文字のぶら下がりインデント

Technology Note 開発者向けBLOG

Webデザイン

1文字のぶら下がりインデント

こんにちは、ゼノフィ渡部です。

1文字のぶら下がりインデントをご紹介いたします。

注釈「※」の行の後は、通常1文字分のインデントをされることが多いと思います。その表現を実現する際、テーブル要素、フロートをかけるなどの方法がいくつかありますが、全てのブラウザに対して完璧ではないものの、CSSで実現することができます。

ul要素とp要素を例にしてみます。ul要素では「ul.hang」に「width: 300px;」として折り返す際の幅を決め、「ul.hang li」には「padding-left: 1em;」で「text-indent: -1em;」のマイナス分だけの左パディングを指定しています。「padding-left: 1em;」は「text-indent: -1em;」のマイナスをした分のズレを調整しています。「text-indent: -1em;」で最初の行だけを1文字分左にすることを可能にしています。

p要素では幅を決めていません。HTMLソースを見ていただければわかりますが、<br />要素を入れ、強制的に改行することで「※注意」以降のインデントをさせる位置を任意に決めています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* ul li  */
ul.hang {
  list-style-type: none; /* リストスタイルを消去 */
  width: 300px; /* 幅を指定 */
  margin: 0 0 40px;
  padding: 0; /* 余分なパディングを消去 */
}
 
ul.hang li {
  margin: 0 0 20px;
  padding-left: 1em; /* 1文字分の左パディング */
  text-indent: -1em; /* 最初の行だけを1文字分左に */
}
 
/* p */
p.hang {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
  padding-left: 1em; /* 1文字分の左パディング */
  text-indent: -1em; /* 最初の行だけを1文字分左に */
}

p要素には「<br />」要素が記述されています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ul class="hang">
    <li>
        ※ぶら下っています。ぶら下っています。ぶら下っています。ぶら下っています。ぶら下っています。
    </li>
    <li>
        ※ぶら下っていますでしょうか。ぶら下っていますでしょうか。ぶら下っていますでしょうか。ぶら下っていますでしょうか。
    </li>
    <li>
        ※ぶら下っているはずです。ぶら下っているはずです。ぶら下っているはずです。ぶら下っているはずです。ぶら下っているはずです。
    </li>
</ul>
 
<p class="hang">
    ※注意<br />ぶら下がりインデントを実行。
</p>

今回ご紹介した方法は、全角、半角英数字を含む場合、一部のブラウザではきれいインデントをしてくれませんので、調整が必要な場合があります。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* ul li  */
ul.hang {
  list-style-type: none; /* リストスタイルを消去 */
  width: 300px; /* 幅を指定 */
  margin: 0 0 40px;
  padding: 0; /* 余分なパディングを消去 */
}
 
ul.hang li {
  margin: 0 0 20px;
  padding-left: 1em; /* 1文字分の左パディング */
  text-indent: -1em; /* 最初の行だけを1文字分左に */
}
 
/* p */
p.hang {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
  padding-left: 1em; /* 1文字分の左パディング */
  text-indent: -1em; /* 最初の行だけを1文字分左に */
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ul class="hang">
    <li>
        ※ぶら下っています。ぶら下っています。ぶら下っています。ぶら下っています。ぶら下っています。
    </li>
    <li>
        ※ぶら下っていますでしょうか。ぶら下っていますでしょうか。ぶら下っていますでしょうか。ぶら下っていますでしょうか。
    </li>
    <li>
        ※ぶら下っているはずです。ぶら下っているはずです。ぶら下っているはずです。ぶら下っているはずです。ぶら下っているはずです。
    </li>
</ul>
 
<p class="hang">
    ※注意<br />ぶら下がりインデントを実行。
</p>

<

>

PAGETOP