List - リスト・マーカー
- list-style〔リストプロパティの一括指定 〕
- list-style-image〔リストマークの画像URLを指定 〕
- list-style-position〔リストの項目のインデント方法を指定 〕
- list-style-type〔リストマークの指定 〕
list-style
リストプロパティの一括指定
unknown
list-styleプロパティは、リストプロパティを一括指定できるショートハンドです。
- デフォルト値:各プロパティの値を参照
- 適用:display:list-itemが指定されている全要素
- 継承:する
設置サンプル
ul要素(順序なしリスト)のスタイル一括指定例
<style type="text/css"> ul.ul_cls { margin:0 0 0 10px; padding:0 0 0 10px; list-style:square inside none; /* リストスタイル一括指定 */ } </style> <ul class='ul_cls'> <li>あいうえおかきくけこさしすせそたちつてとなにぬねの</li> <li>あいうえおかきくけこさしすせそたちつてとなにぬねの</li> </ul>
- あいうえおかきくけこさしすせそたちつてとなにぬねの
- あいうえおかきくけこさしすせそたちつてとなにぬねの
<style type="text/css">
ul.ul_cls {
margin:0 0 0 10px; padding:0 0 0 10px;
list-style:square inside none; /* リストスタイル一括指定 */
}
</style>
<ul class='ul_cls'>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねの</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねの</li>
</ul>
- あいうえおかきくけこさしすせそたちつてとなにぬねの
- あいうえおかきくけこさしすせそたちつてとなにぬねの
ol要素(順序ありリスト)のスタイル一括指定例
<style type="text/css"> ol.ol_cls { margin:0 0 0 20px; padding:0; list-style:decimal inside none; /* リストスタイル一括指定 */ } </style> <ol class='ol_cls'> <li>あいうえおかきくけこさしすせそたちつてとなにぬねの</li> <li>あいうえおかきくけこさしすせそたちつてとなにぬねの</li> </ol>
- あいうえおかきくけこさしすせそたちつてとなにぬねの
- あいうえおかきくけこさしすせそたちつてとなにぬねの
list-style-image
リストマークの画像URLを指定
unknown
list-style-image: none | url("画像のURL")
list-style-imageプロパティは、リストマークの画像を指定します。
リストマークに画像を使用する場合は、list-style-type:none;
を指定してリストマークを非表示にしておきましょう。
- デフォルト値:none
- 適用:display:list-itemが指定されている全要素
- 継承:する
値
値 | 説明 |
---|---|
none | 画像なし |
URL("画像のURL") | リストマークとして使用する画像のURLを指定。 |
設置サンプル
リストマークに画像を使用する場合
<style type="text/css"> ul.ul_gazo { width:300px; margin:0 0 0 30px; padding:0; list-style-image:url(/content/img/icon/gray/diamonds_1.gif); /* リストマークに画像を指定 */ } ul.ul_gazo li { margin:0 0 5px 0; padding:0; } </style> <ul class="ul_gazo"> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> </ul>
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
リストマークの画像を無効にする場合
<style type="text/css"> ul.ul2 { /* 親要素 */ width:300px; margin:0 0 0 30px; padding:0; list-style-image:url(/content/img/icon/gray/diamonds_1.gif); /* リストマークに画像を指定 */ } ul.ul2 li ul { /* 子要素(入れ子のリスト)*/ margin:5px 0 0 20px; padding:0; /* list-style-imageプロパティは子要素に継承されるため、 子要素のリストマーク画像を無効にするには、 list--style-image:noneを指定する。 */ list-style-image:none; } ul.ul2 li { margin:0 0 5px 0; padding:0; } </style> <ul class="ul2"> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも <ul> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> </ul> </li> </ul>
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
list-style-position
リストの項目のインデント方法を指定
unknown
list-style-position: inside | outside
list-style-positionプロパティは、リストマークの表示位置を指定します。
リストマークとテキストをリストボックス内に含める場合はinside、リストマークをリストボックスの左に配置する場合はoutside(デフォルト値)を指定します。
- デフォルト値:outside
- 適用:display:list-itemが指定されている全要素
- 継承:する
リストマークとテキストをリストボックス内に含める場合はinside、リストマークをリストボックスの左に配置する場合はoutside(デフォルト値)を指定します。
値
値 | 説明 |
---|---|
outside | リストマークをリストボックスの左に配置する(デフォルト値)。 |
inside | リストマークとテキストをリストボックス内に含める。 |
設置サンプル
insideの使用例
<style type="text/css">
ul.ul_inside {
width:90%;
margin:1em 0; padding:0 0 0 10px;
list-style-type:disc;
list-style-position:inside; /* リストマークとテキストをリストボックス内に含める */
}
ol.ol_inside {
width:90%;
margin:1em 0; padding:0 0 0 10px;
list-style-type:decimal;
list-style-position:inside; /* リストマークとテキストをリストボックス内にめる */
}
</style>
<ul class="ul_inside">
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
</ul>
<ol class="ol_inside">
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
</ol>
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
outsideの使用例
<style type="text/css">
ul.ul_outside {
width:90%;
margin:1em 0; padding:0 0 0 26px;
list-style-type:disc;
list-style-position:outside; /* リストマークをリストボックスの左に配置 */
}
ol.ol_outside {
width:90%;
margin:1em 0; padding:0 0 0 26px;
list-style-type:decimal;
list-style-position:outside; /* リストマークをリストボックスの左に配置 */
}
</style>
<ul class="ul_outside">
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
</ul>
<ol class="ol_outside">
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li>
</ol>
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
<style type="text/css"> ul.ul_outside { width:90%; margin:1em 0; padding:0 0 0 26px; list-style-type:disc; list-style-position:outside; /* リストマークをリストボックスの左に配置 */ } ol.ol_outside { width:90%; margin:1em 0; padding:0 0 0 26px; list-style-type:decimal; list-style-position:outside; /* リストマークをリストボックスの左に配置 */ } </style> <ul class="ul_outside"> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> </ul> <ol class="ol_outside"> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> <li>あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも</li> </ol>
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
- あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
list-style-type
リストマークの指定
unknown
list-style-type: none | <キーワード> | inherit
list-style-typeプロパティは、リストマークの種類を指定します。
- デフォルト値:disc
- 適用:display:list-itemが指定されている全要素
- 継承:する
値
ブラウザによってサポートされていないリストマークがあります。 Firefoxは順序ありリスト(ol要素)のキーワードに全て対応していますが、IEは「decimal」、「decimal-leading-zero」、「lower-roman」、「upper-roman」の4種類しか対応していません。
値 | 説明 |
---|---|
none | リストマーク非表示。 |
<キーワード> | キーワード指定。 |
値 | 説明 |
---|---|
disc | ●(デフォルト値) |
circle | ○ |
square | ■ |
値 | 説明 |
---|---|
decimal | 1. 2. 3. ... |
decimal-leading-zero | 01. 02. 03. ... |
lower-roman | i. ii. iii. ... |
upper-roman | Ⅰ. Ⅱ. Ⅲ. ... |
lower-alpha | a. b. c. ... |
upper-alpha | A. B. C. ... |
lower-greek | α. β. γ. ... |
lower-latin | a. b. c. ... |
upper-latin | A. B. C. ... |
hebrew | ![]() |
armenian | ![]() |
gerorgian | 1. 2. 3. ... |
cjk-ideographic | 1. 2. 3. ... |
hiragana | あ. い. う. ... |
katakana | ア. イ. ウ. ... |
hiragana-iroha | い. ろ. は. ... |
katakana-iroha | イ. ロ. ハ. ... |
設置サンプル
キーワード指定による表示のされ方(ul要素の場合)
<style type="text/css"> div#list_ul ul { margin-left:20px; padding-left:0; } </style> <div id="list_ul"> <ul style="list-style-type:desc"> <li>disc-1</li> <li>disc-2</li> <li>disc-3</li> </ul> <hr /> <ul style="list-style-type:circle"> <li>circle-1</li> <li>circle-2</li> <li>circle-3</li> </ul> <hr /> <ul style="list-style-type:square"> <li>square-1</li> <li>square-2</li> <li>square-3</li> </ul> </div>
- disc-1
- disc-2
- disc-3
- circle-1
- circle-2
- circle-3
- square-1
- square-2
- square-3
キーワード指定による表示のされ方(ol要素の場合)
<style type="text/css"> div#list_ol ul { margin-left:20px; padding-left:0; } </style> <div id="list_ol"> <ol style="list-style-type:decimal;"> <li>decimal-1</li> <li>decimal-2</li> <li>decimal-3</li> </ol> <hr /> <ol style="list-style-type:decimal-leading-zero;"> <li>decimal-leading-zero-1 ※IE未対応</li> <li>decimal-leading-zero-2</li> <li>decimal-leading-zero-3</li> </ol> <hr /> <ol style="list-style-type:lower-roman;"> <li>lower-roman-1</li> <li>lower-roman-2</li> <li>lower-roman-3</li> </ol> <hr /> <ol style="list-style-type:upper-roman;"> <li>upper-roman-1</li> <li>upper-roman-2</li> <li>upper-roman-3</li> </ol> <hr /> <ol style="list-style-type:lower-alpha;"> <li>lower-alpha-1</li> <li>lower-alpha-2</li> <li>lower-alpha-3</li> </ol> <hr /> <ol style="list-style-type:upper-alpha;"> <li>upper-alpha-1</li> <li>upper-alpha-2</li> <li>upper-alpha-3</li> </ol> <hr /> <ol style="list-style-type:lower-greek;"> <li>lower-greek-1 ※IE未対応</li> <li>lower-greek-2</li> <li>lower-greek-3</li> </ol> <hr /> <ol style="list-style-type:lower-latin;"> <li>lower-latin-1 ※IE未対応</li> <li>lower-latin-2</li> <li>lower-latin-3</li> </ol> <hr /> <ol style="list-style-type:upper-latin;"> <li>upper-latin-1 ※IE未対応</li> <li>upper-latin-2</li> <li>upper-latin-3</li> </ol> <hr /> <ol style="list-style-type:hebrew;"> <li>hebrew-1 ※IE未対応</li> <li>hebrew-2</li> <li>hebrew-3</li> </ol> <hr /> <ol style="list-style-type:armenian;"> <li>armenian-1 ※IE未対応</li> <li>armenian-2</li> <li>armenian-3</li> </ol> <hr /> <ol style="list-style-type:gerorgian;"> <li>gerorgian-1 ※IE未対応</li> <li>gerorgian-2</li> <li>gerorgian-3</li> </ol> <hr /> <ol style="list-style-type:cjk-ideographic;"> <li>cjk-ideographic-1 ※IE未対応</li> <li>cjk-ideographic-2</li> <li>cjk-ideographic-3</li> </ol> <hr /> <ol style="list-style-type:hiragana;"> <li>hiragana-1 ※IE未対応</li> <li>hiragana-2</li> <li>hiragana-3</li> </ol> <hr /> <ol style="list-style-type:katakana;"> <li>katakana-1 ※IE未対応</li> <li>katakana-2</li> <li>katakana-3</li> </ol> <hr /> <ol style="list-style-type:hiragana-iroha;"> <li>hiragana-iroha-1 ※IE未対応</li> <li>hiragana-iroha-2</li> <li>hiragana-iroha-3</li> </ol> <hr /> <ol style="list-style-type:katakana-iroha;"> <li>katakana-iroha-1 ※IE未対応</li> <li>katakana-iroha-2</li> <li>katakana-iroha-3</li> </ol> </div>
- decimal-1
- decimal-2
- decimal-3
- decimal-leading-zero-1 ※IE未対応
- decimal-leading-zero-2
- decimal-leading-zero-3
- lower-roman-1
- lower-roman-2
- lower-roman-3
- upper-roman-1
- upper-roman-2
- upper-roman-3
- lower-alpha-1
- lower-alpha-2
- lower-alpha-3
- upper-alpha-1
- upper-alpha-2
- upper-alpha-3
- lower-greek-1 ※IE未対応
- lower-greek-2
- lower-greek-3
- lower-latin-1 ※IE未対応
- lower-latin-2
- lower-latin-3
- upper-latin-1 ※IE未対応
- upper-latin-2
- upper-latin-3
- hebrew-1 ※IE未対応
- hebrew-2
- hebrew-3
- armenian-1 ※IE未対応
- armenian-2
- armenian-3
- gerorgian-1 ※IE未対応
- gerorgian-2
- gerorgian-3
- cjk-ideographic-1 ※IE未対応
- cjk-ideographic-2
- cjk-ideographic-3
- hiragana-1 ※IE未対応
- hiragana-2
- hiragana-3
- katakana-1 ※IE未対応
- katakana-2
- katakana-3
- hiragana-iroha-1 ※IE未対応
- hiragana-iroha-2
- hiragana-iroha-3
- katakana-iroha-1 ※IE未対応
- katakana-iroha-2
- katakana-iroha-3