CSSリスト - リストマーカーの表示位置設定 | list-style-position
2008/05/29 22:16Update
list-style-positionはCSSリストの表示のスタイルに関連する属性で、リスト要素(ul、ol、liなど)の先頭のマーカーの表示位置を指定します。 本文はlist-style-positionについて学びたいと思います。
CSSリスト関連記事:
◇ リスト要素概要
◇ list-style-type
◇ list-style-image
◇ list-style-position
CSSのlist-style-position属性は、上のリスト要素の先頭のマーカーの表示位置を指定します。
■ 書き方
list-style-position: outside | inside;
■ 値
◇ outside: デフォルト。リスト要素の先頭のマーカーがリスト内容領域の外側に表示されます。
◇ inside: リスト要素の先頭のマーカーがリスト内容領域の内側に表示されます。
■ 指定例
ul {
list-style-position: inside;
}
◇ デフォルト(指定しない)
<ul>
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>
表示:
◇ list-style-position: outside;
<ul style="list-style-position: outside;">
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>
表示:
◇ list-style-position: inside;
<ul style="list-style-position: inside;">
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>
表示:
◇ リスト要素概要
◇ list-style-type
◇ list-style-image
◇ list-style-position
list-style-position属性
CSSのlist-style-position属性は、上のリスト要素の先頭のマーカーの表示位置を指定します。
■ 書き方
list-style-position: outside | inside;
■ 値
◇ outside: デフォルト。リスト要素の先頭のマーカーがリスト内容領域の外側に表示されます。
◇ inside: リスト要素の先頭のマーカーがリスト内容領域の内側に表示されます。
■ 指定例
ul {
list-style-position: inside;
}
list-style-position属性の使用例
◇ デフォルト(指定しない)
<ul>
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>
表示:
- リストてすと、あいうえおあいうえお
- リストてすと、あいうえおあいうえお
◇ list-style-position: outside;
<ul style="list-style-position: outside;">
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>
表示:
- リストてすと、あいうえおあいうえお
- リストてすと、あいうえおあいうえお
◇ list-style-position: inside;
<ul style="list-style-position: inside;">
<li>リストてすと、あいうえおあいうえお</li>
<li>リストてすと、あいうえおあいうえお</li>
</ul>
表示:
- リストてすと、あいうえおあいうえお
- リストてすと、あいうえおあいうえお
Sponsored Link
- Relative Articles
- CSS背景 - ページや要素の背景の一括設定 | background - (2008/05/27 17:06)
- CSSリスト - リストマーカーの種類設定 | list-style-type - (2008/05/29 14:10)
- CSSリスト - リストマーカーの種類設定 | list-style-image - (2008/05/29 15:12)
- CSSリスト - リストマーカーのまとめ設定 | list-style - (2008/05/29 22:13)
- CSSテーブル - キャプションの表示位置設定 | caption-side - (2008/05/30 20:36)