4-14-1a　リスト・順序なし

箇条書きリストを作成する方法です。<ul> 要素と<li> 要素を使用致します。（<ul> 要素はブロックレベル要素です）。 リストで書き出したい部分を<li>～</li>タグで囲み、それを<ul> タグで一括りにすると囲まれた部分が一つにリストになります。

ちなみに <ul> とは 『Unordered List （順序の無いリスト）』 の略で、<li> タグは 『List Item （リストの項目）』 という意味の略語です。

[ 関連事項 ： HP-TIPS > HPの作り方 > リスト・順序あり ]

pagetop

4-14-1b　リストの記号

リストの記号は list-style-typeプロパティを利用致します（約9種類あります）。

list-style-type: disc ;
黒丸（●）です。これが初期値です。
list-style-type: circle ;
白丸（○）です。
list-style-type: square ;
四角（■）です。
list-style-type: decimal ;
数字の123です。
list-style-type: lower-roman ;
小文字のローマ数字（i ii iii）です。
list-style-type: upper-roman ;
大文字のローマ数字（I II III）です。
list-style-type: lower-alpha ;
小文字のアルファベット（a b c）です。
list-style-type: upper-alpha ;
大文字のアルファベット（A B C）です。
list-style-type: none ;
記号を設定しない項目です。

具体的な見本は下記「4-14-1d」の講座をご覧下さい ませ。

pagetop

4-14-1c　リストの記号（画像）

リストの記号を画像にする時はlist-style-imageプロパティを利用致します。

list-style-image: url("ファイル名.拡張子") ;
画像ファイルを指定致します。例 ： ("img/flower.gif")
list-style-type: none ;
画像を設定しない項目です。これが初期値です。

ただし、この方法だと画像の位置が決められない為に、 実際はbackgroundプロパティとbackground-positionプロパティ、padding-leftプロパティを 利用する方が多いようです。（具体的には 下記の記述をご覧下さい ませ）

pagetop

4-14-1d　具体例

リスト記号の見本をclass属性 を利用して表示してみました。

CSS

<head> ～ </head> 内に記述して下さい。
<style type="text/css">
<!--

.siro { list-style-type: circle ; } /* 記号は○ */
.sikaku { list-style-type: square ; } /* 記号は■ */
.suuji { list-style-type: decimal ; } /* 記号は数字 */
.roma-1 { list-style-type: lower-roman ; } /* 記号は小文字のローマ数字 */
.roma-2 { list-style-type: upper-roman ; } /* 記号は大文字のローマ数字 */
.alpha-1 { list-style-type: lower-alpha ; } /* 記号は小文字のアルファベット */
.alpha-2 { list-style-type: upper-alpha ; } /* 記号は大文字のアルファベット */
.nasi { list-style-type: none ; } /* 記号はなし */

.point {
list-style-type: none; /* デフォルトの記号（●）を消す */
background: url(img/point.gif) no-repeat; /* 画像のURL、リピートはしない */
background-position: 0px 4px; /* 画像の位置　上下・左右 */
padding-left: 20px; /* 画像からテキストまでの位置 */
}

-->
</style>

[ 関連事項 ： HP-TIPS > CSS > 外部スタイルシートの記述方法 ]


HTML

<body> ～ </body> 内に記述して下さい。

<ul>
<li>バラ</li>
<li>桜</li>
<li>チューリップ</li>
</ul>

<ul class="siro">
<li>ガーベラ</li>
<li>梅</li>
</ul>

<ul class="sikaku">
<li>あじさい</li>
<li>桃</li>
</ul>

<ul class="suuji">
<li>パンダ</li>
<li>キリン</li>
</ul>

<ul class="roma-1">
<li>ぞう</li>
<li>トラ</li>
</ul>

<ul class="roma-2">
<li>コアラ</li>
<li>ライオン</li>
</ul>

<ul class="alpha-1">
<li>ケーキ</li>
<li>チョコレート</li>
</ul>

<ul class="alpha-2">
<li>クッキー</li>
<li>マシュマロ</li>
</ul>

<ul class="nasi">
<li>ここは記号無しの見本です。</li>
</ul>

<ul class="point">
<li>記号が画像見本です。</li>
</ul>

表示結果


上記のリストをIEとOPERA、Firefoxで表示し、その見た目の違いを画像にしてみました（詳細はこちらから どうぞ［約10.0KBあります］）。

pagetop

4-14-1e　リストの階層化

このリストはそれぞれ入れ子（階層を作る事）も出来ます。入れ子にしたい <li> ～ </li> の中に別の <ul> ～ </ul> を入れてみて下さい。

HTML

<body> ～ </body> 内に記述して下さい。

<ul>
<li>パスタ料理
<ul>
<li>ミートソース</li>
<li>カルボナーラ</li>
<li>ペペロンチーノ</li>
</ul>
</li>

<li>ケーキ
<ul>
<li>苺のショートケーキ</li>
<li>チーズケーキ</li>
<li>モンブラン</li>
</ul>
</li>
</ul>

表示結果

こちらも IEとNN、OPERA、firefoxで表示してそれぞれを画像 にしてみました（約5.0KB）。 IEとNN、Firefoxでは「ミートソース」や「苺のショートケーキ」等の部分は白丸（○）になっているのですが、OPERAでは全て黒丸（●）で表示されております。

pagetop