Revision 290535 of list-style-position

  • Revision slug: CSS/list-style-position
  • Revision title: list-style-position
  • Revision id: 290535
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

概要

list-style-position は、{{ 原語併記('主要ブロックボックス','principal block box') }} 内のマーカーボックスの位置を設定する CSS プロパティです。このプロパティと、関連する他のプロパティを同時に指定するのに便利な {{ cssxref("list-style") }} というプロパティも存在します。

  • {{ Xref_cssinitial() }}: outside
  • 適用対象: display:list-item のスタイルを持つ要素
  • {{ Xref_cssinherited() }}: 継承する
  • メディア: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: 指定値

構文

list-style-position:  inside | outside | inherit

outside
マーカーボックスは主要ブロックボックスの外側に描画されます。
inside
マーカーボックスは主要ブロックボックスの最初のインラインボックスとなり、要素の内容はそれに続けて描画されます。

{{ CSSLiveSample("list-style") }}

  <ul>
    <li>Lorem ipsum <br> dolor sit amet <br> consectetuer</li>
    <li>sed diam nonummy <br> nibh euismod tincidunt <br> ut laoreet</li>
  </ul>

表示結果

  • Lorem ipsum
    dolor sit amet
    consectetuer
  • sed diam nonummy
    nibh euismod tincidunt
    ut laoreet

ブラウザ毎の互換性

{{ CompatibilityTable() }}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 {{ CompatNo() }} 4.0 3.5 10. (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Firefox は list-style-position:inside をサポートしておらず、2000 年よりこれを持ちません(情報元){{ 訳注('要確認') }}

仕様

参照

  • list-style 関連 CSS プロパティ: {{ Cssxref("list-style") }}、{{ Cssxref("list-style-type") }}、{{ Cssxref("list-style-image") }}

Revision Source

<div>{{ CSSRef() }}</div>


<h2 id=".E6.A6.82.E8.A6.81">概要</h2>
<p><code>list-style-position</code> は、{{ 原語併記('主要ブロックボックス','principal block box') }} 内のマーカーボックスの位置を設定する CSS プロパティです。このプロパティと、関連する他のプロパティを同時に指定するのに便利な {{ cssxref("list-style") }} というプロパティも存在します。</p>

<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn>: <code>outside</code></li>
  <li><dfn>適用対象</dfn>: <code>display:list-item</code> のスタイルを持つ要素</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn>: 継承する</li>
  <li><dfn>メディア</dfn>: {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn>: 指定値</li>
</ul>


<h2 id=".E6.A7.8B.E6.96.87">構文</h2>
<pre>list-style-position:  inside | outside | inherit</pre>
<h3 id=".E5.80.A4">値</h3>
<dl>
  <dt>
    outside</dt>
  <dd>
    マーカーボックスは主要ブロックボックスの外側に描画されます。</dd>
  <dt>
    inside</dt>
  <dd>
    マーカーボックスは主要ブロックボックスの最初のインラインボックスとなり、要素の内容はそれに続けて描画されます。</dd>
</dl>
<h2 id=".E4.BE.8B">例</h2>
<p>{{ CSSLiveSample("list-style") }}</p>
<pre>  &lt;ul&gt;
    &lt;li&gt;Lorem ipsum &lt;br&gt; dolor sit amet &lt;br&gt; consectetuer&lt;/li&gt;
    &lt;li&gt;sed diam nonummy &lt;br&gt; nibh euismod tincidunt &lt;br&gt; ut laoreet&lt;/li&gt;
  &lt;/ul&gt;
</pre>

<h3 id=".E8.A1.A8.E7.A4.BA.E7.B5.90.E6.9E.9C">表示結果</h3>

<ul style="list-style:square;">
  <li>Lorem ipsum<br>
    dolor sit amet<br>
    consectetuer</li>
  <li>sed diam nonummy<br>
    nibh euismod tincidunt<br>
    ut laoreet</li>
</ul>




<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E6.AF.8E.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ブラウザ毎の互換性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{ CompatNo() }}</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>10. (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>Firefox は <code>list-style-position:inside</code> をサポートしておらず、2000 年よりこれを持ちません(<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=36854" title="https://bugzilla.mozilla.org/show_bug.cgi?id=36854">情報元</a>){{ 訳注('要確認') }}</p>
<h2 id=".E4.BB.95.E6.A7.98">仕様</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position">CSS 2.1 #list-style-position</a></li>
  <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-position">CSS 3 Lists #list-style-position</a> 草案</li>
</ul>
<h2 id=".E5.8F.82.E7.85.A7">参照</h2>
<ul>
  <li><code>list-style</code> 関連 CSS プロパティ: {{ Cssxref("list-style") }}、{{ Cssxref("list-style-type") }}、{{ Cssxref("list-style-image") }}</li>
</ul>

<!-- languages({ "en-US": "en-US/docs/CSS/list-style-position", "es": "es/docs/CSS/list-style-position", "fr": "fr/docs/CSS/list-style-position", "pl": "pl/docs/CSS/list-style-position"}) -->
Revert to this revision