CSS-リスト
リストは、番号付きまたは箇条書きのセットを伝えるのに非常に役立ちます。この章では、CSSを使用してリストの種類、位置、スタイルなどを制御する方法について説明します。
リストを制御するために使用できる次の5つのCSSプロパティがあります-
ザ・ list-style-type マーカーの形状や外観を制御できます。
ザ・ list-style-position 2番目の行に折り返される長いポイントを最初の行に揃えるか、マーカーの始点の下から開始するかを指定します。
ザ・ list-style-image 箇条書きや数字ではなく、マーカーの画像を指定します。
ザ・ list-style 前述のプロパティの省略形として機能します。
ザ・ marker-offset マーカーとリスト内のテキストの間の距離を指定します。
次に、これらのプロパティの使用方法を例とともに示します。
list-style-typeプロパティ
リストスタイル型のプロパティには、順不同リストの場合と注文したリスト内の文字の番号付けのスタイルで(また、マーカーとして知られている)あなたは箇条書きの形やスタイルを制御することができます。
順序付けされていないリストに使用できる値は次のとおりです-
シニア番号 | 値と説明 |
---|---|
1 | none NA |
2 | disc (default) 塗りつぶされた円 |
3 | circle 空の円 |
4 | square 塗りつぶされた正方形 |
順序付きリストに使用できる値は次のとおりです-
値 | 説明 | 例 |
---|---|---|
10進数 | 数 | 1,2,3,4,5 |
10進数の先行ゼロ | 番号の前に0 | 01、02、03、04、05 |
下位アルファ | 小文字の英数字 | a、b、c、d、e |
アッパーアルファ | 大文字の英数字 | A、B、C、D、E |
下ローマ | 小文字のローマ数字 | i、ii、iii、iv、v |
アッパーローマン | 大文字のローマ数字 | I、II、III、IV、V |
下ギリシャ語 | マーカーはギリシャ語です | アルファ、ベータ、ガンマ |
低ラテン語 | マーカーは低ラテン語です | a、b、c、d、e |
アッパーラテン | マーカーはアッパーラテンです | A、B、C、D、E |
ヘブライ語 | マーカーは伝統的なヘブライ語の番号付けです | |
アルメニア語 | マーカーは伝統的なアルメニアの番号付けです | |
ジョージア語 | マーカーは伝統的なグルジアの番号付けです | |
cjk-表意文字 | マーカーは単純な表意文字です | |
ひらがな | マーカーはひらがな | a、i、u、e、o、ka、ki |
カタカナ | マーカーはカタカナです | A、I、U、E、O、KA、KI |
ひらがないろは | マーカーはひらがないろは | i、ro、ha、ni、ho、he、to |
カタカナ-いろは | マーカーはカタカナいろは | I、RO、HA、NI、HO、HE、TO |
ここに例があります-
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
次の結果が得られます-
list-style-positionプロパティ
list-style-位置プロパティは、マーカーが箇条書きを含むボックスの内部または外部に表示するかどうかを示します。2つの値のうちの1つを持つことができます-
シニア番号 | 値と説明 |
---|---|
1 | none NA |
2 | inside テキストが2行目に入ると、テキストはマーカーの下に折り返されます。また、リストの値がoutsideの場合、テキストが開始された場所にインデントされて表示されます。 |
3 | outside テキストが2行目に入ると、テキストは最初の行の先頭(箇条書きの右側)に揃えられます。 |
ここに例があります-
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
次の結果が得られます-
list-style-imageプロパティ
リストスタイルイメージは、あなたがあなた自身の箇条書きスタイルを使用できるように、画像を指定することができます。構文はbackground-imageプロパティに似ていますが、プロパティの値を開始するurlという文字の後に括弧で囲まれたURLが続きます。指定された画像が見つからない場合は、デフォルトの箇条書きが使用されます。
ここに例があります-
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
次の結果が得られます-
リストスタイルのプロパティ
リストスタイルは、あなたが単一の式にすべてのリストプロパティを指定することができます。これらのプロパティは、任意の順序で表示できます。
ここに例があります-
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
次の結果が得られます-
マーカーオフセットプロパティ
マーカーオフセットプロパティを使用すると、マーカーとそのマーカーに関連するテキストの間の距離を指定することができます。その値は、次の例に示すような長さである必要があります-
残念ながら、このプロパティはIE6またはNetscape7ではサポートされていません。
ここに例があります-
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
次の結果が得られます-