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

CSSのborder-left-colorで左ボーダーの色を変更する方法

CSSの border-left-color プロパティを使用すると、要素の左側の境界線（ボーダー）の色だけを個別に変更できます。上下左右すべてではなく左のみ色を変えたい場合に便利なプロパティです。

なお、border-left-color は単独では境界線を表示できません。border ショートハンドや border-left-style などで、あらかじめ境界線のスタイル（solid、dashed など）と太さを設定しておく必要があります。

コード例

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

<html>
<head>
<style>
  p.demo {
    border: 3px solid;
    border-left-color: #FF0000;
  }
</style>
</head>
<body>
  <p class="demo">
    左ボーダーの色が赤く表示されるサンプルです
  </p>
</body>
</html>

色の指定方法

border-left-color の値には、さまざまな形式で色を指定できます。

  • 16進数カラーコード： #FF0000（赤）のように記述します
  • カラーネーム： red、blue などの定義済みの色名
  • RGB値： rgb(255, 0, 0) の形式で指定
  • HSL値： hsl(0, 100%, 50%) の形式で指定

このように border-left-color を活用すれば、デザインに合わせて特定の辺だけ強調したい場合などにも柔軟に対応できます。

  1. CSSのborderショートハンド（一括指定）プロパティの使い方

    borderプロパティは、要素の枠線（ボーダー）の見た目を定義するために使用されるプロパティです。border-width（線の太さ）、border-style（線の種類）、border-color（線の色）という3つの個別プロパティの値を、1つの宣言でまとめて指定できる「ショートハンド（一括指定）プロパティ」です。構文CSSのborderプロパティは、次のように記述します。セレクタ {     border: /*値*/ }値は「太さ スタイル 色」の順に半角スペースで区切って指定するのが一般的です。例えば「2px solid orange」と指定すれ

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

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