WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「リストマークのデザイン」

list-style,list-style-type,list-style-image,list-style-position 「リストマークのデザイン」

リストマークの種類、位置、画像を指定します。

  • 「list-style」は、種類、位置、画像をまとめて指定します。
    種類と画像を両方指定した場合は、画像が優先されます。
  • 「list-style-type」は、種類を指定します。
  • 「list-style-image」は、画像を指定します。
  • 「list-style-position」は、位置を指定します。
CSS Ver.適用要素継承
2.1<li>,<ol>,<ul>
display:list-itemの
要素
する
広告

list-style,list-style-type,list-style-image,list-style-position の指定方法

構文

list-style : list-style-type || list-style-image || list-style-position;

list-style-type : [type];

list-style-image : url | none;

list-style-position : outside | inside;

プロパティ/設定値意味
list-style: list-style-type list-style-image list-style-position; リストマークの種類、位置、画像をスペースで区切って、任意の順で1~3個指定可能。
デフォルト:「タグ毎のスタイル初期値」を参照
list-style-type: disc; 黒丸(・)(初期値)
list-style-type: circle; 白丸(◦)
list-style-type: square ; 四角(▪)
list-style-type: decimal ; 数字(1,2,3,4,5...)
list-style-type: decimal-leading-zero; 2桁の数字(01,02,03,04,05...)
list-style-type: lower-roman; 小文字のローマ数字(i,ii,iii,iv,v...)
list-style-type: upper-roman; 大文字のローマ数字(I,II,III,IV,V...)
list-style-type: lower-greek; 小文字の古代ギリシャ文字(α,β,γ...)
list-style-type: lower-latin; 小文字のアルファベット(a,b,c・・・)
list-style-type: upper-latin; 大文字のアルファベット(A,B,C・・・)
list-style-type: armenian; 伝統的なアルメニア数字
list-style-type: georgian; 伝統的なグルジア数字
list-style-type: lower-alpha; 小文字のアルファベット(a,b,c・・・)
list-style-type: upper-alpha; 大文字のアルファベット(A,B,C・・・)
list-style-type: none ; リストマークなし
list-style-type: 独自のマーカー ; @counter-styleに独自に指定したマーカー(注1)
デフォルト:「タグ毎のスタイル初期値」を参照
list-style-image: url(); url()のカッコ内に画像ファイルのurlを指定
list-style-image: none; 画像ファイルの指定なし(初期値)
デフォルト:「タグ毎のスタイル初期値」を参照
list-style-position: outside; リスト内容の領域の外側に表示される(初期値)
list-style-position: inside; リスト内容の領域の内側に表示される
デフォルト:「タグ毎のスタイル初期値」を参照
(注1)
css3から@counter-styleに独自のマーカーを作成し、指定できる予定ですが、現時点では未対応の様です。 但し、予め定義されているものは、指定可能ですが、ブラウザによっては、未対応の場合があるので注意が必要です。
(ex.hiragana-iroha,cjk-earthly-branch など)
ページTOP

list-style,list-style-type,list-style-image,list-style-position のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 5px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_list-style-t{
  list-style : armenian;
}
.css_list-type{
  list-style-type : armenian;
}
.css_list-style-t-p1{
  list-style : georgian inside;
}
.css_list-t-p1{
  list-style-type : georgian;
  list-style-position : inside;
}
.css_list-style-t-p2{
  list-style : hiragana-iroha outside;
}
.css_list-t-p2{
  list-style-type : hiragana-iroha;
  list-style-position : outside;
}
.css_list-style-t-i{
  list-style : disc url(../../../image/com_ya1.gif);
}
.css_list-t-i{
  list-style-type : disc;
  list-style-image : url(../../../image/com_ya1.gif);
}

<!-- html -->
<div class="common">
  <div class="cssTitle">list-styleにtype指定<br>(armenian アルメニア数字)</div>
  <div>
  <ol class="css_list-style-t">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
  <div class="cssTitle">list-style-type指定<br>(armenian アルメニア数字)</div>
  <div>
  <ol class="css_list-type">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
  <div class="cssTitle">list-styleにtype,position指定<br>(georgian グルジア数字,inside)</div>
  <div>
  <ol class="css_list-style-t-p1">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
  <div class="cssTitle">list-style-type,list-style-position指定<br>(georgian グルジア数字,inside)</div>
  <div>
  <ol class="css_list-t-p1">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
  <div class="cssTitle">list-styleに@counter-styleのtype指定<br>(hiragana-iroha いろは,outside)</div>
  <div>
  <ol class="css_list-style-t-p2">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
  <div class="cssTitle">list-style-typeに<br>@counter-styleのtype指定<br>
  (hiragana-iroha いろは,outside)</div>
  <div>
  <ol class="css_list-t-p2">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
  <div class="cssTitle">list-styleにtype,image指定<br>(disc 黒丸)</div>
  <div>
  <ol class="css_list-style-t-i">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
  <div class="cssTitle">list-style-type,list-style-image指定<br>(disc 黒丸)</div>
  <div>
  <ol class="css_list-t-i">
  <li>リストスタイル1<br>改行</li>
  <li>リストスタイル2<br>改行</li>
  <li>リストスタイル3<br>改行</li>
  </div>
list-styleにtype指定
(armenian アルメニア数字)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行
list-style-type指定
(armenian アルメニア数字)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行
list-styleにtype,position指定
(georgian グルジア数字,inside)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行
list-style-type,list-style-position指定
(georgian グルジア数字,inside)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行
list-styleに@counter-styleのtype指定
(hiragana-iroha いろは,outside)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行
list-style-typeに
@counter-styleのtype指定
(hiragana-iroha いろは,outside)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行
list-styleにtype,image指定
(disc 黒丸)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行
list-style-type,list-style-image指定
(disc 黒丸)
  1. リストスタイル1
    改行
  2. リストスタイル2
    改行
  3. リストスタイル3
    改行

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン