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

CSSのlist-style-position:outsideでリストマーカーをボックスの外側に設定する方法

CSSで箇条書き（リスト）のマーカーを、コンテンツボックスの外側に配置したい場合は、list-style-positionプロパティに値 outside を指定します。

outside を指定したときの挙動

outside を指定すると、マーカー（記号や番号）はボックスの外側に表示されます。そのため、テキストが2行目以降へ折り返されても、各行のテキストは1行目の先頭位置に揃えられます。なお、outside はこのプロパティの初期値です。

一方で inside を指定すると、マーカーはボックスの内側に表示され、折り返し行はマーカーの下ではなく、マーカーと同じ位置から始まります。レイアウトの見た目が大きく変わるので、用途に応じて使い分けるとよいでしょう。

コード例

<html>
   <head>
   </head>
   <body>
      <ul style = "list-style-type:circle; list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      <ol style = "list-style-type:decimal;list-style-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

コードのポイント

  • <ul>要素では list-style-type: circle を指定しているため、白抜きの丸いマーカーがボックスの外側に表示されます。
  • <ol>要素では list-style-type: decimal を指定しているため、数字（1、2、3…）がボックスの外側に表示されます。
  • どちらのリストも list-style-position: outside が設定されているため、長いテキストが折り返しても2行目以降は1行目のテキスト開始位置に揃います。
  1. CSSのhanging-punctuationプロパティで句読点を行ボックスの外側に配置する方法

    hanging-punctuationプロパティとは CSSのhanging-punctuationプロパティを使用すると、句読点（カンマや句点など）をテキストの行ボックスの外側に「ぶら下げ」て配置できるかどうかを指定できます。特に日本語や中国語などの組版において、行頭や行末の句読点を美しく揃えたい場合に役立つプロパティです。 指定できる値の一覧 番号値と説明 1.none句読点をぶら下げません。これが初期値です。 2.first先頭行の開始側（行頭）の外側に句読点を配置できるようにします。 3.last最終行の終了側（行末）の外側に句読点を配置できるようにします。 基本的な使

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

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