ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >リスト

リストマークの種類を変える

ul{list-style-type:マークの種類;}でリストマークの種類を指定することが出来ます。

この指定はolタグやliタグにも有効です。

■ リストマークの種類

リストマークの種類には以下のようなものがあります。

マークの種類説明
disc黒丸
circle白丸
square四角
decimal数字
upper-roman大文字のローマ数字
lower-roman小文字のローマ数字
upper-alpha大文字のアルファベット
lower-alpha小文字のアルファベット
noneマーク非表示

【ブラウザ表示】

  • 黒丸
  • 黒丸
  • 白丸
  • 白丸
  • 四角
  • 四角
  • 数字
  • 数字
  • 大文字のローマ数字
  • 大文字のローマ数字
  • 小文字のローマ数字
  • 小文字のローマ数字
  • 大文字のアルファベット
  • 大文字のアルファベット
  • 小文字のアルファベット
  • 小文字のアルファベット
  • マーク非表示
  • マーク非表示

ソース

<ul class="mark1">
<li>黒丸</li>
<li>黒丸</li>
</ul>
<ul class="mark2">
<li>白丸</li>
<li>白丸</li>
</ul>
<ul class="mark3">
<li>四角</li>
<li>四角</li>
</ul>
<ul class="mark4">
<li>数字</li>
<li>数字</li>
</ul>
<ul class="mark5">
<li>大文字のローマ数字</li>
<li>大文字のローマ数字</li>
</ul>
<ul class="mark6">
<li>小文字のローマ数字</li>
<li>小文字のローマ数字</li>
</ul>
<ul class="mark7">
<li>大文字のアルファベット</li>
<li>大文字のアルファベット</li>
</ul>
<ul class="mark8">
<li>小文字のアルファベット</li>
<li>小文字のアルファベット</li>
</ul>
<ul class="mark9">
<li>マーク非表示</li>
<li>マーク非表示</li>
</ul>

外部ファイル

ul.mark1{list-style-type:disc;}
ul.mark2{list-style-type:circle;}
ul.mark3{list-style-type:square;}
ul.mark4{list-style-type:decimal;}
ul.mark5{list-style-type:upper-roman;}
ul.mark6{list-style-type:lower-roman;}
ul.mark7{list-style-type:upper-alpha;}
ul.mark8{list-style-type:lower-alpha;}
ul.mark9{list-style-type:none;}


<body>〜</body>に直接記入する場合

<ul style="list-style-type:disc;">
<li>黒丸</li>
<li>黒丸</li>
</ul>
<ul style="list-style-type:circle;">
<li>白丸</li>
<li>白丸</li>
</ul>
<ul style="list-style-type:square;">
<li>四角</li>
<li>四角</li>
</ul>
<ul style="list-style-type:decimal;">
<li>数字</li>
<li>数字</li>
</ul>
<ul style="list-style-type:upper-roman;">
<li>大文字のローマ数字</li>
<li>大文字のローマ数字</li>
</ul>
<ul style="list-style-type:lower-roman;">
<li>小文字のローマ数字</li>
<li>小文字のローマ数字</li>
</ul>
<ul style="list-style-type:upper-alpha;">
<li>大文字のアルファベット</li>
<li>大文字のアルファベット</li>
</ul>
<ul style="list-style-type:lower-alpha;">
<li>小文字のアルファベット</li>
<li>小文字のアルファベット</li>
</ul>
<ul style="list-style-type:none;">
<li>マーク非表示</li>
<li>マーク非表示</li>
</ul>

■ その他の項目

リストマークの位置を指定する
リストマークを画像にする
リストマークを背景画像にする
リストマークを一括指定
余白、間隔を調整する
リストを並べる

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.