list-style-positionプロパティ

TOPページに戻る > CSS

スポンサード リンク

list-style-positionプロパティ

リストマークの表示位置を指定できます
値にinsideを指定するとリスト項目の要素の内側にリストマークを表示することができます
通常はリストマークがリスト項目の文章の外側に表示されますが、値にinsideを指定すれば文章と一体感を出せます
初期値はoutsideです

使い方(書式)

セレクタ { list-style-position: 値; }                                    

list-style-positionプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 リスト項目 ol要素 ul要素 li要素 displayの値がlist-itemになっている要素
子要素へのスタイルの継承 する

プロパティの値 説明
inside リスト項目の要素の内側にリストマークを表示する
outside リスト項目の外にリストマークを表示する。初期値

実際の指定方法

.hoge {
 list-style-position: outside;  /* リスト項目の要素の内側にリストマークを表示 */
 list-style-type: square;       /* リスト項目にリストマークを表示 */
 border: solid 1px;             /* わかりやすいように枠線を表示 */
   }
.hoge2 {
 list-style-position: inside;   /* リスト項目の要素の外側にリストマークを表示 */
 list-style-type: square;       /* リスト項目にリストマークを表示 */
 border: solid 1px;             /* わかりやすいように枠線を表示 */
  }

html部分

<p>実際の表示</p>
<ul class="hoge">
<li>リスト項目の表示位置</li>
<li>list-style-position: outside;</li>
<li>リスト項目の要素の内側にリストマークを表示</li>
</ul>

<ul class="hoge2">
<li>リスト項目の表示位置</li>
<li>list-style-position: inside;</li>
<li>リスト項目の要素の外側にリストマークを表示</li>
</ul>

実際の表示





(C)2012 ホームページ作成無料