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

CSSのlist-style-positionでリストマーカーの位置を変更する方法

CSSのlist-style-positionプロパティは、リスト項目のマーカー（箇条書きの記号）の表示位置を指定するために使用します。このプロパティを活用することで、マーカーをテキストの内側に配置するか、外側に配置するかを自由にコントロールできます。

list-style-positionの主な値

  • outside（初期値）：マーカーがテキストブロックの外側に表示されます。通常の箇条書きのように、記号が左に突き出た形になります。
  • inside：マーカーがテキストブロックの内側に表示されます。テキストが折り返された際に、マーカーの下に回り込むのが特徴です。

サンプルコード

それでは、実際にlist-style-positionを使った例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
    list-style-position: outside;
}
ul.demo2 {
    list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html>

このサンプルでは、クラス「demo1」を持つリストにはoutsideを、クラス「demo2」を持つリストにはinsideを適用しています。これにより、同じリストでもマーカーの位置がどのように変化するかを比較して確認できます。

出力結果

CSSのlist-style-positionでリストマーカーの位置を変更する方法

上記の出力結果を見ると、「ODI Teams」のリストではマーカーがテキストの外側に表示されているのに対し、「Test Teams」のリストではマーカーがテキストの内側に表示されていることがわかります。レイアウトのデザインに応じて、これらの値を使い分けるとよいでしょう。

  1. CSSの一般兄弟セレクター（〜）とは？基本構文と使い方を実例で解説

    CSSの一般兄弟セレクター（General Sibling Combinator）は、基準となる要素の後ろに続く兄弟要素をすべて選択するためのセレクターです。基準要素と対象要素が同じ親要素を持つ場合にのみ適用されます。隣接兄弟セレクター（+）が直後の1つの要素だけを選択するのに対し、一般兄弟セレクター（~）は後続する該当要素をすべてまとめて選択できる点が特徴です。基本構文CSS一般兄弟セレクターの構文は以下のとおりです。element ~ element { /* 宣言 */ }波線（~）の左側に基準となる要素、右側に選択したい要素を記述します。これにより、左側の要素より後に現れる右側

  2. CSSで基本のリストをリストグループに変換する方法

    CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>