スタイルシートの道具箱
当サイトについて リンク集
基礎編1
基礎編2
色リファレンス
小技集		 テキスト
フォント
背景		 配置
ボーダー
ボックス		 リスト
テーブル
フィルタ
その他
　初心者による初心者の為のスタイルシート・リファレンス！ 基礎から応用までの解説とサンプルを是非あなたのホームページ作りに生かして下さい！
■リスト トップページ
リスト：目次

■マークの指定

▲ページTOPへ

list-style-type: (キーワード）

HTMLタグのULやOL、LIを利用してリスト表示をする場合、デフォルトではリストの先頭が黒丸になっていますがそれを他のタイプに変更する事が出来ます。単純なポイント、又は順番を示す数字・文字の二種類に大別されます。スタイルはLIでは無くULかOLに適用します。

指定するキーワードは種類が多いので、幾つかだけ例を示します。詳細はサンプルをご覧下さい。
  • none
  • disc
  • circle
  • square
  • demical
  • lower-roman
  • hiragana
  • katakana-iroha
 マークなし
黒丸
白丸
四角
十進数
ローマ字（小文字）
ひらがな
カタカナ・イロハ

サンプル


■単純なポイントは３種類
  • これは
  • disc
  • です（デフォルト）
 <ul style="list-style-type:disc">
<li>これは</li>
<li>disc</li>
<li>です（デフォルト）</li></ul>
  • これは
  • circle
  • です
 <ul style="list-style-type:circle">
<li>これは</li>
<li>circle</li>
<li>です</li></ul>
  • これが
  • square
  • です
 <ul style="list-style-type:square">
<li>これが</li>
<li>square</li>
<li>です</li></ul>
※黒丸と四角はフォントサイズが小さいと同じ様に見えます。
違いが見え無い場合はブラウザのフォントサイズを大きくして下さい。

  • noneを使って
  • 行頭文字を無くす
  • 事も出来ます
 <ul style="list-style-type:none">
<li>noneを使って</li>
<li>行頭文字を無くす</li>
<li>事も出来ます</li></ul>


■順序付きマーク（IEとNetscapeで共に対応しているもの）
以下のサンプルでは、こちらのソースにおける****の部分に該当のタイプを当てはめたものです。
<ol style="list-style-type:****">
<li>....</li>
<li>....</li>
</ol>

  1. decimal
  2. 十進数で１から
  3. 表示します
  1. lower-roman
  2. ローマ数字の小文字
  3. で表示します
  1. upper-roman
  2. 大文字のローマ数字
  3. で表示します
  1. lower-alpha
  2. 小文字のアルファベットで
  3. 表示します
  1. upper-alpha
  2. 大文字のアルファベット
  3. で表示します
■順序付きマーク（Netscape6.2以上で対応、IE未対応）
  1. decimal-leading-zero
  2. 十進数で、一桁は先頭にゼロを加えます。
  3. 例：01,02,03....
  1. lower-greek
  2. 小文字のギリシャ文字です。
  3. 例：α,β,γ...
  1. upper-greek
  2. 大文字のギリシャ文字です。
  3. 例：Α、Β、Γ...
  1. hebrew
  2. ヘブライ数字で
  3. 表示します
  1. armenian
  2. アルメニア数字で
  3. 表示します
  1. georgian
  2. グルジア数字で
  3. 表示します
  1. lower-latin
  2. 小文字のラテン語で
  3. 表示します
  1. upper-latin
  2. 大文字のラテン語で
  3. 表示します
  1. cjk-ideographic
  2. 漢数字で表示します。
  3. 例：一、二、三・・
  1. hiragana
  2. 50音順のひらがなです
  3. 例：あ、い、う・・
  1. hiragana-iroha
  2. いろは順のひらがなです
  3. 例：い、ろ、は・・
  1. katakana
  2. 50音順のカタカナです
  3. 例：ア、イ、ウ・・
  1. katakana-iroha
  2. イロハ順のカタカナです
  3. 例：イ、ロ、ハ・・

■マークに画像を利用する

▲ページTOPへ

list-style-image:（URL）

リストの先頭に示すマークに画像を当てはめる事が出来ます。埋め込むタグはUL,OL,LIのいずれでも構いません。UL/OLなら全てのリストに、LIに指定すれば、行毎にマークを変更する事が出来ます。

設定値は以下の通りです。
  • URL
  • none
 url("....")という形式でURLを指定します
画像は表示しません

サンプル


  • ←ulに指定された画像
  • ←ulに指定された画像
  • liに指定された画像
  • liに指定された画像
  • liに指定された画像
  • liに指定された画像
  • noneは画像なし。その代わり
  • 通常のマークが表示
  • ←ulに指定された画像
<ul style="list-style-image:url(smp0.gif)">
<li>←ulに指定された画像</li>
<li>←ulに指定された画像</li>
<li style="list-style-image:url(smp1.gif)">liに指定された画像</li>
<li style="list-style-image:url(smp2.gif)">liに指定された画像</li>
<li style="list-style-image:url(smp3.gif)">liに指定された画像</li>
<li style="list-style-image:url(smp4.gif)">liに指定された画像</li>
<li style="list-style-image:none">noneは画像なし。その代わり</li>
<li style="list-style-image:none">通常のマークが表示<</li>
<li>←ulに指定された画像</li>
</ul>

■マークの位置

▲ページTOPへ

list-style-position: (キーワード）

行頭のマークの位置の指定が出来ます。
指定方法は以下の二通りです。
  • outside
  • inside
 マークを外側に置く（初期値）
マークを内側に置く

サンプル


■outside
  • outside（初期値）
    これがoutsideの表示です
  • outsideの設定では文字とマークは別の列に位置します。
  • つまりマークがリストの外側に位置するように見えます
<ul style="list-style-position:outside;">
<li>outside（初期値）<br>これがoutsideの表示です</li>
<li>outsideの設定では文字とマークは別の列に位置します。</li>
<li>つまりマークがリストの外側に位置するように見えます</li>
</ul>


■inside
  • inside
    これがinsideの表示です。
  • insideでは、同じ項目内で改行が発生すると文字はマークの位置まで戻ります。
  • 見え方として内側にマークがあるように見えます。
<ul style="list-style-position:inside;">
<li>inside（初期値）<br>これがinsideの表示です</li>
<li>insideでは、同じ項目内で改行が発生すると文字はマークの位置まで戻ります。</li>
<li>見え方として内側にマークがあるように見えます。</li>
</ul>

■マークの一括設定

▲ページTOPへ

list-style: ● ● ●

リストのマークに関する設定を一括で行います。●には上で紹介した のいずれかの値を入れます。順番は関係ありません。
noneを入れると（つまりtypeとimageプロパティの値がnone）何も表示されなくなります。

また値は省略する事も出来ます。この場合省略された値は初期値が適用されます。
だから例えば
style="list-style-position:inside"
という設定は
style="list-style:inside"
と同じであり、type、image、positionのプロパティを個別に使う必要は基本的にありません。
面倒な人はlist-styleだけで十分って事ですね。

サンプル


  • list-styleだけ使って設定してみます
    ここはinsideの設定になっています。
    でもlist-style-positionは使っていません。
  • 途中で一部の値を変えたい時は
  • そのプロパティだけ後でnoneにする等します
  • そうすればこのように
  • 絵から普通のマークに戻ります。
<ul style="list-style:url(smp0.gif) inside">
<li><b>list-styleだけ使って設定してみます</b><br>
ここはinsideの設定になっています。<br>
でもlist-style-positionは使っていません。
<li>途中で一部の値を変えたい時は</li>
<li>そのプロパティだけ後でnoneにする等します</li>
<li style="list-style-image:none">そうすればこのように</li>
<li style="list-style-image:none">絵から普通のマークに戻ります。</li>
</ul>
▲ページTOPへ