トップページ > スタイルシートリファレンス > list-style-position

★スタイルシートリファレンス

list-style-position …… マーカーの表示位置を指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

list-style-positionプロパティは、リストの先頭に表示するマーカーの表示位置を指定する際に使用します。

■値

outside
マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント(字下げ)された形になります。
inside
マーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。

■使用例

HTMLソース

<ul style="list-style-position: outside">
<li>一本でも<br>にんじん</li>
<li>ニ足でも<br>サンダル</li>
<li>三艘でも<br>ヨット</li>
</ul>

<ul style="list-style-position: inside">
<li>一本でも<br>にんじん</li>
<li>ニ足でも<br>サンダル</li>
<li>三艘でも<br>ヨット</li>
</ul>
↓↓↓

ブラウザ上の表示

  • 一本でも
    にんじん
  • ニ足でも
    サンダル
  • 三艘でも
    ヨット
  • 一本でも
    にんじん
  • ニ足でも
    サンダル
  • 三艘でも
    ヨット

■関連項目

list-style …… マーカーに関する指定をまとめて行う
list-style-image …… マーカー画像を指定する
list-style-type …… マーカー文字の種類を指定する
list-style-position …… マーカーの表示位置を指定する
marker-offset …… マーカーとの間隔を指定する
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ