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

CSSのborder-bottom-colorで下境界線の色を変更する方法

CSSのborder-bottom-colorプロパティを使うと、要素の下境界線の色を個別に指定することができます。上下左右の境界線全体ではなく、下側の境界線だけ色を変えたい場合に便利なプロパティです。

以下のコードは、border-bottom-colorプロパティを実装した具体例です。ぜひ実際に動かして挙動を確認してみてください。

サンプルコード

<html>
   <head>
      <style>
         p.demo {
            border:4px solid;
            border-bottom-color:#FF0000;
         }
      </style>
   </head>
   <body>
      <p class = "demo">
         下境界線の色が変わるサンプルです
      </p>
   </body>
</html>

コードの解説

このサンプルでは、まずborder: 4px solid;によって太さ4pxの実線境界線をすべての辺に設定しています。その上で、border-bottom-color:#FF0000;を指定することで、下境界線のみを赤色（#FF0000）に変更しています。

なお、border-bottom-colorを単独で使用しても境界線自体が表示されないため、事前にborder-styleやborder-widthなどの設定が必要になる点に注意しましょう。色の指定にはカラーコードのほか、redのようなカラー名やrgb()関数も使用できます。

  1. CSSでボタンの背景色を変更する方法【初心者向け解説】

    CSSでボタンの背景色を変更するには、background-colorプロパティを使用します。このプロパティに任意のカラーコードやカラー名を指定するだけで、ボタンの見た目を簡単にカスタマイズできます。background-colorプロパティの基本background-colorは、要素の背景色を設定するためのCSSプロパティです。ボタン以外にも、divやリンクなど、あらゆるHTML要素に適用できます。値には「yellow」のようなカラー名のほか、「#ff0000」のような16進数カラーコードや、「rgb(255, 255, 0)」のようなRGB値も指定可能です。サンプルコード以下のコードを実

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

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