CSSのborder-top-colorプロパティで上罫線の色を変更する方法
border-top-colorプロパティとは
CSSのborder-top-colorプロパティを使用すると、要素の上側の境界線(トップボーダー)の色だけを個別に変更できます。境界線全体の色をまとめて変更するのではなく、上辺の色だけを指定したい場合に便利です。
なお、境界線のスタイルがnoneになっていると色は表示されないため、あらかじめborder-style(またはborderの一括指定)で線種を設定しておく必要があります。
使用例
以下のコードを実行して、border-top-colorプロパティの实际的な動作を確認してみてください。
<html>
<head>
<style>
p.demo {
border:3px solid;
border-top-color:#FF0000;
}
</style>
</head>
<body>
<p class = "demo">
border-top-colorプロパティの表示例
</p>
</body>
</html>この例では、まずborder: 3px solid;で全辺に幅3pxの実線を引いた上で、border-top-color: #FF0000;によって上側の境界線のみを赤色に変更しています。他の3辺はデフォルトの色(文字色)のまま表示されます。
指定できる主な値
- カラーネーム:
red、blueなど - 16進数カラーコード:
#FF0000、#008000など - RGB / HSL関数:
rgb(255,0,0)、rgba(255,0,0,0.5)、hsl(0, 100%, 50%)など - transparent: 透明色を指定
同様に、下・左・右の境界線にもそれぞれborder-bottom-color、border-left-color、border-right-colorプロパティで個別の色を指定できます。
-
CSSでボタンの背景色を変更する方法【初心者向け解説】
CSSでボタンの背景色を変更するには、background-colorプロパティを使用します。このプロパティに任意のカラーコードやカラー名を指定するだけで、ボタンの見た目を簡単にカスタマイズできます。background-colorプロパティの基本background-colorは、要素の背景色を設定するためのCSSプロパティです。ボタン以外にも、divやリンクなど、あらゆるHTML要素に適用できます。値には「yellow」のようなカラー名のほか、「#ff0000」のような16進数カラーコードや、「rgb(255, 255, 0)」のようなRGB値も指定可能です。サンプルコード以下のコードを実
-
CSSでプレースホルダーの色を変更する方法|::placeholder疑似要素の使い方
CSSで入力フォームのプレースホルダー(placeholder)の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素(Chrome・Firefox・Safari などの主要ブラウザに対応):-ms-input-placeholder … Internet Explorer 1