JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSでリストマーカーをボックス内に配置する方法（list-style-position:inside）

CSSでは、list-style-position プロパティの値を inside に設定することで、リスト項目のマーカー（行頭記号）をボックスの内側に配置できます。

inside を指定したときの挙動

値に inside を指定すると、テキストが2行目以降に折り返した場合、そのテキストはマーカーの真下に回り込んで表示されます。これは、デフォルト値である outside とは異なる点です。

outside の場合は、2行目以降のテキストがマーカーの下ではなく、1行目のテキスト開始位置に揃えられます。一方 inside では、あたかも outside 指定時にテキストが始まる位置へインデントされたかのように表示されるため、ボックス全体の中でマーカーがコンパクトに収まります。

コード例

<html>
   <head>
   </head>
   <body>
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>数学</li>
         <li>社会</li>
         <li>物理</li>
      </ul>
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>数学</li>
         <li>社会</li>
         <li>物理</li>
      </ol>
   </body>
</html>

この例では、<ul> 要素に対して四角形のマーカー（square）と list-style-position: inside を組み合わせており、<ol> 要素に対しては小文字アルファベットの連番（lower-alpha）を inside 配置で表示しています。

  1. CSSのmin-heightプロパティでボックスの最小高さを設定する方法

    CSSの min-height（最小高さ）プロパティは、ボックスがそれ以下に縮まないよう高さの下限を設定するために使われます。コンテンツ量が少なくても指定した高さを確保しつつ、内容が増えた場合は自動的にボックスが拡張されるため、レイアウト崩れを防ぎながら柔軟なデザインを実現できます。min-heightで指定できる値長さ（px、em、remなど）：固定の最小高さを指定します（例：150px）パーセンテージ（%）：親要素の高さに対する割合で指定します使用例<html>    <head>    </head>  

  2. CSSの::markerセレクターでリストの箇条書きマーカーの色を変更する方法

    ::markerセレクターとはCSSの::marker擬似要素は、リスト項目（<li>）に表示される箇条書きマーカーや番号に対して個別にスタイルを適用できるセレクターです。通常、マーカーの色はテキストの色に連動しますが、::markerを使えばマーカーだけの色やフォントサイズを自由に変更できます。構文CSS ::markerセレクターの基本構文は以下の通りです。Selector::marker { attribute: /*値*/; }例1：基本的な使い方以下の例では、ul要素のリストスタイルを「circle」に設定し、li::markerに対して緑色を指定しています。&l