CSSのlist-style-positionプロパティでリストマーカーの位置を変更する方法
CSSのlist-style-positionプロパティは、リスト項目のマーカー（行頭記号や番号）の表示位置を設定するために使用します。このプロパティのデフォルト値は「outside」であり、マーカーはリスト項目の外側に配置されます。
list-style-positionプロパティとは
list-style-positionプロパティには、主に以下の2つの値を指定できます。
- outside（デフォルト）：マーカーがリスト項目のテキストブロックの外側に表示されます。
- inside：マーカーがリスト項目のテキストブロックの内側に表示され、テキストが折り返された場合もマーカーの下に回り込みます。
構文
CSSのlist-style-positionプロパティの構文は以下のとおりです。
セレクタ {
list-style-position: /*値*/
}
サンプルコード1：入れ子リストでの位置指定
以下の例では、親リストに「inside」、子リストに「outside」を指定して、マーカーの位置の違いを確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
li {
width: 50%;
margin: 5px;
font-size: 120%;
box-shadow: 0 0 3px 1px black;
background: url("https://www.tutorialspoint.com/dbms/images/dbms.jpg") no-repeat 32px 8px;
list-style-position: inside;
padding: 0 0 10px 20px;
}
ol ol li {
list-style: lower-roman;
list-style-position: outside;
}
</style>
</head>
<body>
<ol>
<li>Black</li>
<li>
Blue
<ol>
<li>Green</li>
<li>Red</li>
</ol>
</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
親リストのマーカーは項目テキストの内側に表示され、子リストではローマ数字のマーカーが外側に表示されていることがわかります。
サンプルコード2：ul要素でのinsideとoutsideの比較
次の例では、2つのul要素を並べて、「outside」と「inside」それぞれのマーカー位置を視覚的に比較しています。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
width: 200px;
box-shadow: inset 0 0 6px green;
list-style-position: outside;
}
ul + ul {
list-style-type: circle;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
1つ目のリストはデフォルトの「outside」でマーカーがボックスの外側に、2つ目のリストは「inside」でマーカーがボックスの内側に表示されています。
まとめ
list-style-positionプロパティを使うことで、リストマーカーを項目の内側（inside）か外側（outside）のどちらに配置するかを簡単に制御できます。デザインやレイアウトの要件に応じて使い分けることで、より読みやすいリストを作成できます。
-
CSSだけでカレンダーを作成する方法をわかりやすく解説【サンプルコード付き】
Webページにカレンダーを表示したいとき、CSS（スタイルシート）だけでも十分に実現できます。JavaScriptなどのスクリプトに頼らなくても、HTMLのリスト要素とCSSを組み合わせるだけで、月表示のカレンダーを見やすいレイアウトで作成することが可能です。 ここでは、月名の表示、前月・次月へのナビゲーション矢印、曜日ヘッダー、日付グリッド、さらに「今日」の日付を円形でハイライトする演出まで含めた、実用的なカレンダーのサンプルコードを紹介します。 サンプルコード CSSでカレンダーを作成するには、以下のように記述します。 <!DOCTYPE html> <html>
-
CSSで基本のリストをリストグループに変換する方法
CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>