CSS Lists(列表)

リスト属性は、リストアイテムのマークの表示を制御します。

HTMLリストのタイプ

HTMLには、3種類の異なるリストがあります：

• 無序列表 —各リスト項目にアイコンマークが付けられたプロジェクトリスト。

• 順序リスト —各リスト項目に数字が付けられたプロジェクトリスト。

• 定義リスト -各項目の説明を含むプロジェクトリストを確認してください。

リストに関する詳細情報を知りたい場合は、HTMLリストのチュートリアルです。

CSSスタイルリスト

CSSは、最も一般的に使用される無序列表や順序リストをスタイル化するためのいくつかの属性を提供します。これらのCSSリスト属性は通常、以下のことを許可します：

• マークの形状や外観を制御します。

• マークの画像を指定し、アイコンポイントや数字ではなく使用します。

• リストマークとリストテキストの間の距離を設定します。

• リストマークやアイコンポイントが無序列表や順序リストを含む枠の内部か外部に表示されるかを指定します。

リストスタイルのタイプ

デフォルトでは、順序リストの項目はアラビア数字（1、2、3などに番号を付け、無序列表中、アイテムは円形のアイコンマークでマークされます。しかし、listを使用して、-style-type属性は、デフォルトのリストマークのタイプを円形、正方形、ローマ数字、ラテン文字など、他の任何のタイプに変更します。

ul　{
　　　　list-style-type: square;
}
ol　{
　　　　list-style-type: upper-roman;
}

リストマークの位置を変更できます。

デフォルトでは、リストマークはリストアイテムの枠の外部に位置します。しかし、listを使用して、-style-position属性を使用して、マークやアイコンポイントがリストアイテムの枠の内部か外部に表示されるかを指定します。

この属性は値insideまたはoutsideを取り、デフォルト値はoutsideです。値insideを使用すると、これらの行はマークの下に回り込む代わりにインデントされます。

ul.in li {
　　　　list-style-position: inside;
}
ul.out li {
　　　　list-style-position: outside;
}

画像を使用してリストマークとしています。

また、listを使用することもできます。-style-image属性は画像をリストマークとして設定します。

以下例示中的スタイルルールは、無序列表のすべてのアイテムに透明なPNG画像「arrow.png」をリストマークとして割り当てます。

ul　li　{
　　　　list-style-image:　url("arrow.png");
}

上の例は、すべてのブラウザで同じ出力を生成するとは限りません。Internet ExplorerとOperaはFirefox、Chrome、Safariよりも少し高い画像マークを表示します。

画像マークのクロスブラウザ解決策

このlist-style-image属性を使用して画像をアイコンとして使用する場合、テキストの正確な整列がブラウザでできません。解決策は、 background-image CSS属性がプロジェクトアイコンを正確に整列します。まず、リストをアイコンなしに設定します。次に、list要素に非複製の背景画像を定義します。

以下の例は、すべてのブラウザで均等に画像マークを表示します：

ul　{
　　　　list-style-type:　none;
}
ul　li　{
　　　　background-image:　url("arrow.png");
　　　　background-position:　0px　5px;　　　　/*　X-pos　Y-pos　(from　top-left)　*/
　　　　background-repeat:　no-repeat;
　　　　padding-left:　20px;
}

リストスタイルのショートカット属性

このlist-style属性は、これらの3つの属性を定義するショートカット属性ですlist-style-type，list-style-imageおよびlist-style-positionで一箇所のリスト

このスタイルルールは、既に並べられたリストアイテムのリストマークを大文字のラテン文字に設定し、これらの文字はリストアイテムの最前面に表示されます：

ol　{
　　　　list-style:　upper-latin　inside;
}