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

CSSを使って順序なしリストに四角いビュレット（行頭記号）を作る方法

CSSのlist-style-typeプロパティを使えば、順序なしリスト（<ul>）の行頭記号を簡単に四角形へ変更できます。この記事では、その具体的な手順と表示例をわかりやすく解説します。

デフォルトのビュレットは「黒丸（disc）」

Webページ上の順序なしリスト（<ul>）は、特に指定しない場合、丸いビュレット（黒丸）が表示されます。これはブラウザのデフォルトスタイルによるものです。

丸いビュレットは、CSSでは次のように指定されています。

ul {
  list-style-type: disc;
}

実際の表示は以下のようになります。

  • HTML
  • CSS
  • JavaScript

list-style-type を「square」に変更する

ビュレットを四角にしたい場合は、デフォルトのlist-style-typeの値をsquareに上書きするだけです。

ul {
  list-style-type: square;
}

この設定を適用すると、行頭記号が次のように四角く表示されます。

  • HTML
  • CSS
  • JavaScript

四角いビュレットを使うメリット

四角いビュレットは丸型に比べてやや珍しいデザインですが、サイトのトーンやテーマによっては非常に相性が良いことがあります。たとえば、シャープでモダンな印象を与えたいデザインや、幾何学的な要素を取り入れたレイアウトには、四角いビュレットが効果的です。

どのような見た目を目指しているかを考慮しながら、disc・circle・squareなど、list-style-typeの各値を使い分けてみてください。

  1. CSSでリストの箇条書きマーカーをスタイリング＆アニメーション化する方法

    CSSの list-style プロパティを使用すると、順序なしリスト（<ul>）や順序付きリスト（<ol>）の箇条書きマーカー（ブレット）を自由にカスタマイズできます。デフォルトのマーカーを非表示にしたうえで、box-shadow や :hover 疑似クラス、CSSカウンターなどを組み合わせることで、マウスオーバー時に動きのある魅力的なリストを作成できます。list-styleプロパティの基本構文CSSの list-style プロパティは、次のように記述します。li { list-style: /*値*/; }none を指定するとデフォルトのマーカーが消

  2. 【HTML入門】四角い箇条書き（スクエア）の順序なしリストを作成する方法

    HTMLで順序なしリスト（番号のないリスト）を作成するには、<ul>タグを使用します。リスト全体は<ul>タグで囲み、各項目は<li>タグで記述します。項目の先頭に表示されるマーカーには、disc（黒丸）・square（四角）・circle（白丸）などがあり、何も指定しない場合のデフォルトは小さな黒丸（disc）です。 四角い箇条書きを作るためのCSSプロパティ 四角形（square）の箇条書きを持つ順序なしリストを作成するには、CSSのlist-style-typeプロパティを使用します。ここでは、HTML要素に直接スタイルを指定できるstyle属性（イン