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

CSSのlist-style-positionでリストマーカーをボックスの内側・外側どちらに表示するか指定する方法

箇条書きリストのマーカー（黒丸や番号など）を、リスト項目のボックスの内側に表示するか、外側に表示するかを制御できるのが list-style-position プロパティです。このプロパティには、主に次の2つの値を指定できます。

list-style-position の値一覧

値説明
inside テキストが2行目以降へ折り返された場合、テキストはマーカーの真下に回り込みます。また、テキスト全体が「outside」指定時の開始位置にインデントされて表示されます。
outside テキストが2行目以降へ折り返された場合、各行は1行目のテキスト開始位置（マーカーの右側）に揃えられます。これがデフォルト値です。

inside と outside の違いのポイント

  • outside（外側）： マーカーがコンテンツボックスの外側に置かれます。折り返し行も最初の行のテキスト位置に揃うため、一般的な箇条書きらしい見た目になります。
  • inside（内側）： マーカーがボックスの内側に含まれるため、折り返し行がマーカーの下まで回り込むのが特徴です。

サンプルコード

以下のコードを実行すると、list-style-position プロパティの実際の動作を確認できます。ul 要素と ol 要素のそれぞれで、inside と outside を組み合わせて指定しています。

<html>
   <head>
   </head>
   <body>
      <ul style = "list-style-type:circle; list-style-position:outside;">
         <li>BMW</li>
         <li>Audi</li>
      </ul>
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>BMW</li>
         <li>Audi</li>
      </ul>
      <ol style = "list-style-type:decimal;list-style-position:outside;">
         <li>BMW</li>
         <li>Audi</li>
      </ol>
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>BMW</li>
         <li>Audi</li>
      </ol>
   </body>
</html>

この例では、1つ目の ul 要素で円形マーカー（circle）を外側に、2つ目の ul 要素で四角マーカー（square）を内側に表示しています。同様に、ol 要素でも10進数（decimal）と小文字アルファベット（lower-alpha）の番号スタイルに対して inside / outside を切り替えています。

ブラウザで表示し、リスト項目のテキストが折り返す程度までウィンドウ幅を狭めると、inside と outside で2行目以降のインデントのされ方が異なることがひと目で確認できます。

  1. CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

    CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。 clip-pathプロパティの基本構文 clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。 Selector {    clip-path: /*値*/; } polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっ

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

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