Search
  1. list-style〔リストプロパティの一括指定 〕
  2. list-style-image〔リストマークの画像URLを指定 〕
  3. list-style-position〔リストの項目のインデント方法を指定 〕
  4. 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>
  1. あいうえおかきくけこさしすせそたちつてとなにぬねの
  2. あいうえおかきくけこさしすせそたちつてとなにぬねの

list-style-image
リストマークの画像URLを指定

unknown

list-style-image: none | url("画像のURL")

list-style-imageプロパティは、リストマークの画像を指定します。

リストマークに画像を使用する場合は、list-style-type:none;を指定してリストマークを非表示にしておきましょう。

  • デフォルト値:none
  • 適用:display:list-itemが指定されている全要素
  • 継承:する

list-style-imageプロパティの値
説明
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(デフォルト値)を指定します。

list-style-positionプロパティの値
説明
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>
  • あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  • あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  • あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  1. あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  2. あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  3. あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも

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>
  • あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  • あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  1. あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも
  2. あいうえおかきくけこさしすせそたちつてとなにぬねのたちつてとなにぬねのはひふへほまみむめも

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種類しか対応していません。

list-style-typeプロパティの値
説明
noneリストマーク非表示。
<キーワード>キーワード指定。
ul要素(順序なしリスト)のキーワード
説明
disc●(デフォルト値)
circle
square
 
ol要素(順序ありリスト)のキーワード
説明
decimal1. 2. 3. ...
decimal-leading-zero01. 02. 03. ...
lower-romani. ii. iii. ...
upper-romanⅠ. Ⅱ. Ⅲ. ...
lower-alphaa. b. c. ...
upper-alphaA. B. C. ...
lower-greekα. β. γ. ...
lower-latina. b. c. ...
upper-latinA. B. C. ...
hebrewhebrew ...
armenianarmenian ...
gerorgian1. 2. 3. ...
cjk-ideographic1. 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>
  1. decimal-1
  2. decimal-2
  3. decimal-3

  1. decimal-leading-zero-1 ※IE未対応
  2. decimal-leading-zero-2
  3. decimal-leading-zero-3

  1. lower-roman-1
  2. lower-roman-2
  3. lower-roman-3

  1. upper-roman-1
  2. upper-roman-2
  3. upper-roman-3

  1. lower-alpha-1
  2. lower-alpha-2
  3. lower-alpha-3

  1. upper-alpha-1
  2. upper-alpha-2
  3. upper-alpha-3

  1. lower-greek-1 ※IE未対応
  2. lower-greek-2
  3. lower-greek-3

  1. lower-latin-1 ※IE未対応
  2. lower-latin-2
  3. lower-latin-3

  1. upper-latin-1 ※IE未対応
  2. upper-latin-2
  3. upper-latin-3

  1. hebrew-1 ※IE未対応
  2. hebrew-2
  3. hebrew-3

  1. armenian-1 ※IE未対応
  2. armenian-2
  3. armenian-3

  1. gerorgian-1 ※IE未対応
  2. gerorgian-2
  3. gerorgian-3

  1. cjk-ideographic-1 ※IE未対応
  2. cjk-ideographic-2
  3. cjk-ideographic-3

  1. hiragana-1 ※IE未対応
  2. hiragana-2
  3. hiragana-3

  1. katakana-1 ※IE未対応
  2. katakana-2
  3. katakana-3

  1. hiragana-iroha-1 ※IE未対応
  2. hiragana-iroha-2
  3. hiragana-iroha-3

  1. katakana-iroha-1 ※IE未対応
  2. katakana-iroha-2
  3. katakana-iroha-3

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop