Css-lists

提供：Dev Guides
移動先:案内、検索

CSS-リスト

リストは、番号付きまたは箇条書きのセットを伝えるのに非常に役立ちます。 この章では、CSSを使用してリストの種類、位置、スタイルなどを制御する方法を説明します。

リストを制御するために使用できる次の5つのCSSプロパティがあります-

  • list-style-type を使用すると、マーカーの形状または外観を制御できます。
  • list-style-position は、2番目の行に折り返す長いポイントを最初の行に揃えるか、マーカーの開始点の下で開始するかを指定します。
  • list-style-image は、箇条書きまたは番号ではなくマーカーの画像を指定します。
  • list-style は、前述のプロパティの省略形として機能します。
  • marker-offset は、マーカーとリスト内のテキスト間の距離を指定します。

次に、これらのプロパティの使用方法を例とともに示します。

list-style-typeプロパティ

_list-style-type_プロパティを使用すると、順序付けられていないリストの場合の箇条書き（マーカーとも呼ばれる）の形状またはスタイル、および順序付けられたリストの番号付け文字のスタイルを制御できます。

ここに順序なしリストに使用できる値があります-

Sr.No. Value & Description
1

none

NA

2

disc (default)

塗りつぶされた円

3

circle

空の円

4

square

塗りつぶされた正方形

順序付きリストに使用できる値は次のとおりです-

Value Description Example
decimal Number 1,2,3,4,5
decimal-leading-zero 0 before the number 01, 02, 03, 04, 05
lower-alpha Lowercase alphanumeric characters a, b, c, d, e
upper-alpha Uppercase alphanumeric characters A, B, C, D, E
lower-roman Lowercase Roman numerals i, ii, iii, iv, v
upper-roman Uppercase Roman numerals I, II, III, IV, V
lower-greek The marker is lower-greek alpha, beta, gamma
lower-latin The marker is lower-latin a, b, c, d, e
upper-latin The marker is upper-latin A, B, C, D, E
hebrew The marker is traditional Hebrew numbering  
armenian The marker is traditional Armenian numbering  
georgian The marker is traditional Georgian numbering  
cjk-ideographic The marker is plain ideographic numbers  
hiragana The marker is hiragana a, i, u, e, o, ka, ki
katakana The marker is katakana A, I, U, E, O, KA, KI
hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni, ho, he, to
katakana-iroha The marker is katakana-iroha 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-position_プロパティは、マーカーが箇条書きを含むボックスの内側と外側のどちらに表示されるかを示します。 それは2つの値のいずれかを持つことができます-

Sr.No. Value & Description
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プロパティ

_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>

それは次の結果を生成します-

リストスタイルのプロパティ

_list-style_を使用すると、すべてのリストプロパティを1つの式に指定できます。 これらのプロパティは任意の順序で表示できます。

ここに例があります- 

<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>

それは次の結果を生成します-

marker-offsetプロパティ

_marker-offset_プロパティを使用すると、マーカーとそのマーカーに関連するテキスト間の距離を指定できます。 その値は、次の例に示すように長さでなければなりません-

残念ながら、このプロパティはIE 6またはNetscape 7ではサポートされていません。

ここに例があります- 

<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>

それは次の結果を生成します-

「https://www.finddevguides.com/index.php?title=Css-lists&oldid=11638」から取得
Powered by MediaWiki