概要
list-style-typeプロパティは、CSSでリストのマーカー（記号）の種類を設定するためのプロパティです。このプロパティを使用することで、ul（順不同リスト）、ol（順序付きリスト）などのリスト項目のマーカーを自由にカスタマイズすることができます。例えば、ディスク、数字、アルファベット、ローマ数字など多様な形式を指定でき、ウェブページのデザインに合わせたリスト表示が可能になります。
list-style-typeの基本
list-style-typeプロパティは、リストアイテムのマーカーのスタイルを変更するために使われ、以下のようなスタイルを設定できます。
list-style-typeの構文
ul {
list-style-type: <type>;
}
<type>には、以下のようなさまざまなマーカーの種類を指定することができます。
主なlist-style-typeの値
順不同リスト（ul）のマーカー
disc（デフォルト）: ● ディスクcircle○ 空洞の円square■ 四角形noneマーカーなし
順序付きリスト（ol）のマーカー
decimal（デフォルト）: 1, 2, 3, …decimal-leading-zero01, 02, 03, …lower-romani, ii, iii, …upper-romanI, II, III, …lower-alphaa, b, c, …upper-alphaA, B, C, …lower-greekα, β, γ, …armenianArmenian numbering (ա, բ, գ, …)georgianGeorgian numbering (ა, ბ, გ, …)
各値の使用例
基本的な使用例
以下のコードは、順不同リストと順序付きリストでlist-style-typeを適用する例です。
ul {
list-style-type: circle;
}
ol {
list-style-type: upper-roman;
}
この設定では、順不同リストのマーカーが空洞の円に、順序付きリストのマーカーが大文字のローマ数字になります。
カスタムナンバリングスタイル
ol.custom-list {
list-style-type: lower-alpha;
}
この例では、順序付きリストのマーカーが小文字のアルファベットになります。a, b, c, … といった形式で表示され、文章や説明文の箇条書きなどに役立ちます。
マーカーを非表示にする
リストのスタイルをシンプルにしたい場合や、リストアイテムを独自のスタイルで装飾したい場合には、list-style-type: none;を使用してマーカーを非表示にすることができます。
ul.no-markers {
list-style-type: none;
padding: 0;
margin: 0;
}
この設定により、マーカーが非表示になり、シンプルなレイアウトが実現できます。
使用シーンに応じたlist-style-typeの活用例
ナビゲーションメニューのデザイン
list-style-typeを調整して、ウェブサイトのナビゲーションメニューに個性的なスタイルを適用できます。
ul.nav-menu {
list-style-type: none; /* マーカーを非表示 */
display: flex;
gap: 20px;
}
ul.nav-menu li {
padding: 5px 10px;
}
この例では、ナビゲーションメニューに不要なマーカーを非表示にし、シンプルな横並びのレイアウトにしています。
特定のリストマーカーを使用したコンテンツ装飾
記事やブログの中で、特定の内容を強調するために、異なるマーカーを使用したリストを組み合わせることができます。
ul.features {
list-style-type: square;
}
ol.important-steps {
list-style-type: decimal-leading-zero;
}
このスタイルでは、特徴を箇条書きにしたり、重要な手順を示すリストに異なるマーカーを使用することで、視覚的な区別が容易になります。
まとめ
list-style-typeプロパティを使用することで、リストの表示スタイルを柔軟にカスタマイズでき、ウェブデザインに大きな変化をもたらすことができます。基本的なスタイルだけでなく、個性的なリスト表示が求められる場面でも役立ちます。マーカーを非表示にしたり、独自のレイアウトを設定することで、よりクリエイティブなリストデザインを実現してみてください。