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

【CSS】border-left-colorプロパティで左ボーダーの色を変更する方法

border-left-colorプロパティは、要素の左側のボーダー（境界線）の色だけを個別に変更するためのCSSプロパティです。上下左右すべてのボーダー色を一括で指定するborder-colorとは異なり、左辺のみに適用されるため、デザインのアクセント付けや特定部分の強調表示に便利です。

使用例

以下のコードは、border-left-colorプロパティを使って、左ボーダーの色を赤（#FF0000）に変更する例です。

<html>
   <head>
      <style>
         p.demo {
            border:4px solid;
            border-left-color:#FF0000;
         }
      </style>
   </head>
   <body>
      <p class="demo">
         border-left-colorプロパティの表示例
      </p>
  </body>
</html>

指定できる値

border-left-colorには、以下のような形式で色を指定できます。

  • カラーネーム（例：red、blue、green）
  • 16進数カラーコード（例：#FF0000、#00f）
  • RGB / RGBA値（例：rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)）
  • HSL / HSLA値（例：hsl(0, 100%, 50%)）
  • transparent（透明）

注意点

border-left-colorを単独で指定しても、ボーダーのスタイル（border-style）が設定されていないと色は表示されません。上記の例では、あらかじめborder: 4px solid;でスタイルと太さを設定しているため、左側の色だけが赤く変わります。なお、このプロパティの初期値は現在の文字色（currentcolor）です。

  1. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none

  2. CSSのlist-style-imageプロパティの使い方｜箇条書きのマーカーを画像に変更する方法

    list-style-imageプロパティとはCSSのlist-style-imageプロパティを使うと、箇条書き（リスト）のマーカーとして、通常の黒丸（ビュレット）や数字の代わりに任意の画像を指定できます。オリジナルのアイコンや矢印画像などをリストの先頭に表示したい場合に便利なプロパティです。値にはurl()関数で画像ファイルのパスを指定します。指定できるのは<ul>や<ol>、<li>などdisplay: list-itemが適用される要素です。基本的な書式list-style-image: url(画像のパス);使用例以下のコードでは、最初のリスト項目