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

CSSでボーダー（境界線）の色を設定する方法

border-color プロパティは、要素のボーダー（境界線）の色を指定するために使用されます。このプロパティを使うことで、枠線の色を自由にカスタマイズできます。

以下のコードを実行すると、border-color プロパティの実際の動作を確認できます。この例では、2px の破線（dashed）ボーダーの色をマルーン（#800000）に設定しています。

サンプルコード

<html>
   <head>
      <style>
         p.demo {
            border: 2px dashed;
            border-color: #800000;
         }
      </style>
   </head>
   <body>
      <p class = "demo">
         David Beckham is a legend.
      </p>
   </body>
</html>

補足ポイント

  • border-color プロパティは、単独で使用しても色は表示されません。border-style（例：solid、dashed、dotted など）が設定されている必要があります。
  • 色の指定方法は、HEX値（#800000）、RGB値（rgb(128,0,0)）、色名（maroon）など、複数の形式に対応しています。
  • 上下左右それぞれのボーダーに対して、border-top-color、border-right-color、border-bottom-color、border-left-color を使って個別に色を指定することも可能です。
  • 4つの値をスペースで区切って指定すると、順に「上・右・下・左」のボーダー色が適用されます。
  1. CSSのoutline-colorプロパティでアウトラインの色を設定する方法

    CSSのoutline-colorプロパティを使うと、要素のアウトライン（輪郭線）の色を指定できます。値の指定方法は、colorプロパティやborder-colorプロパティと同様に、カラーネーム、16進数カラーコード、RGB値のいずれかを使用します。 outline-colorプロパティの主な指定方法 カラーネーム：例）blue、red、green 16進数カラーコード：例）#0000ff RGB値：例）rgb(0, 0, 255) なお、アウトラインを表示するには、outline-colorだけでなくoutline-width（太さ）とoutline-style（スタイル）も一緒に設定

  2. CSSでリンクの色を設定する方法：:linkセレクターの使い方を解説

    Webページ上のリンクの色を変更したい場合、CSSの:link擬似クラスを使用します。この擬似クラスは、まだ訪問していないリンクに対してスタイルを適用するものです。指定できる値は、カラーネーム（例：red）やHEX値（例：#FF0000）、RGB値など、CSSで有効な任意のカラー形式です。:linkセレクターの基本構文a:link { color: カラー値; }サンプルコード以下のコードでは、未訪問のリンクの色を赤（#FF0000）に設定しています。実際にブラウザで実行して、リンクの色が変化することを確認してみましょう。<html> <head>