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

CSSのlist-style-typeでリストマーカーの形状や外観を制御する方法

list-style-typeプロパティとは

CSSのlist-style-typeプロパティを使うと、箇条書きリスト（<ul>）や番号付きリスト（<ol>）に表示されるマーカーの形状や外観を自由に制御できます。デフォルトの黒丸（disc）だけでなく、白抜きの丸（circle）や四角（square）など、用途に応じたスタイルに変更可能です。

基本的な使い方

以下のコードは、順序なしリストに対してlist-style-typeプロパティを適用し、マーカーを「circle（白抜きの丸）」に変更した例です。

サンプルコード

<html>
<head>
</head>
<body>
   <ul style = "list-style-type: circle;">
      <li>りんご</li>
      <li>マンゴー</li>
      <li>ぶどう</li>
   </ul>
</body>
</html>

このコードを実行すると、各項目の先頭に白抜きの丸いマーカーが表示されます。インラインスタイルではなく、外部CSSファイルや<style>タグ内で指定することもできます。

CSSファイルで指定する場合

ul {
   list-style-type: circle;
}

主なマーカーの種類

list-style-typeプロパティには、以下のような値を指定できます。

  • disc：塗りつぶしの丸（デフォルト）
  • circle：白抜きの丸
  • square：塗りつぶしの四角
  • none：マーカーを非表示にする
  • decimal：算用数字（1、2、3…）※<ol>向け
  • lower-alpha / upper-alpha：小文字・大文字のアルファベット ※<ol>向け

まとめ

list-style-typeプロパティを活用すれば、リストの見た目を簡単にカスタマイズできます。デザインに合わせて適切なマーカーを選び、読みやすいコンテンツを作成しましょう。

  1. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1

  2. 【Windows】SCコマンドでサービスを制御する方法｜状態確認・停止・開始をコマンド1行で

    IT業務に携わるようになると、社内のさまざまなパソコンで動作しているサービスの状態を監視・確認する機会がぐっと増えます。 サービスの管理といえば、多くの人が使っているのが標準的な方法でしょう。管理ツールやコントロールパネルを開き、「サービス」ユーティリティを探して、必要な操作を行うという流れです。 また、ネットワーク上の別のコンピューターやサーバーで動作しているサービスを管理したい場合は、「コンピューターの管理」からリモートマシンに接続し、そこでサービスを操作することになります。 このアプローチ自体に問題はまったくありません。実際、世界中のシステム管理者がこうした標準的なWindowsユーティ