箇条書き (CSS)


箇条書きのスタイル

 箇条書きはHTMLのul, olタグで作ります。この箇条書き項目のスタイルを決める属性がlist-styleです。その他、list-style-image, list-style-position, list-style-type属性が用意されています。


list-style

 list-style属性はlist-style-image, list-style-position, list-style-typeをまとめて設定します。

list-style: list-style-type list-style-position list-style-image|initial|inherit;
#ul1 {
  list-style: square inside;
}

list-style-image

 list-style-image属性は、箇条書き項目の先頭に付く●などの代わりに画像を表示するのに使います。画像を指定するときは、url関数を使用します。

#ul2 {
  list-style-image: url("myc1.png");
}

list-style-position

 list-style-positionは、箇条書き項目の位置を指定します。値はinsideまたはoutsideを指定します。

#ul3 {
  list-style-position: inside;
}

#ul4 {
  list-style-position: outside;
}

inside

outside

 

list-style-type

 list-style-typeは箇条書き項目の左に表示される●などを変更するのに使用します。以下のような指定ができます。

list-style-typeul/ olスタイル
discul黒い丸 (デフォルト)
squareul黒い正方形
circleul白い丸
katakanaolカタカナ
hiraganaolひらがな
cjk-ideographicol漢数字
upper-romanolI, II, III ...
upper-latinolA, B, C ...
lower-romanoli, ii, iii, ...
lower-latinola, b, c, ...

<ul style="list-style-type: square;">
<li>群馬県</li>
<li>埼玉県</li>
<li>千葉県</li>
</ul>

<ol style="list-style-type: katakana;">
<li>東京都</li>
<li>神奈川県</li>
<li>山梨県</li>
</ol>
  1. 東京都
  2. 神奈川県
  3. 山梨県

 

ナビゲーション・バー

 一覧表を使ってナビゲーション・を作ることができます。

<style>
.menu_li0 {
  float: left;
  background-color: #d0ffd0;
  border: groove medium green;
  width: 120px;
  text-align: center;
  padding: 3px;
}

.menu_li1 {
  background-color: #d0ffff;
  border: groove medium blue;
  width: 120px;
  text-align: center;
  padding: 3px;
}
</style>

<ul style="list-style-type: none">
<li class="menu_li0"><a href="../../index.html">Home</a></li>
<li class="menu_li0"><a href="text.html">Prev</a></li>
<li class="menu_li0"><a href="table.html">Next</a></li>
</ul>

<br style="clear: left" />
<ul style="list-style-type: none">
<li class="menu_li1"><a href="../../index.html" class="menu_a">Home</a></li>
<li class="menu_li1"><a href="text.html" class="menu_a">Prev</a></li>
<li class="menu_li1"><a href="table.html" class="menu_a">Next</a></li>
</ul>


 

 

このページの先頭へ戻る