CSSのborder-top-colorプロパティの使い方をわかりやすく解説
CSSのborder-top-colorプロパティは、要素の上側の境界線（ボーダー）の色だけを変更するために使用します。境界線全体の色を変えるのではなく、上辺のみ色を指定したい場合に便利です。
基本的な使い方
border-top-colorプロパティには、カラーネーム（例：red）、16進数カラーコード（例：#FF0000）、RGB値など、CSSで利用できる任意の色の値を指定できます。
なお、境界線の色を表示するには、あらかじめborder-styleやborderショートハンドで境界線のスタイル（solid など）と太さを設定しておく必要があります。スタイルが指定されていない場合、色を設定しても境界線は表示されません。
コード例
以下のコードを実行すると、border-top-colorプロパティを使って上側の境界線の色を赤に変更できます。
<html>
<head>
<style>
p.demo {
border:3px solid;
border-top-color:#FF0000;
}
</style>
</head>
<body>
<p class="demo">
Asia is a continent.
</p>
</body>
</html>このコードのポイント
- border:3px solid; で全4辺に幅3pxの実線の境界線を設定しています。
- border-top-color:#FF0000; により、上側の境界線だけが赤色（#FF0000）で表示されます。
- 他の3辺（右・下・左）はデフォルトの色（テキストカラー）のまま表示されます。
補足
類似のプロパティとして、下辺の色を指定するborder-bottom-color、左辺のborder-left-color、右辺のborder-right-colorがあります。また、すべての辺の色を一括で指定したい場合はborder-colorプロパティを使用します。初期値はcurrentColorであり、要素の文字色がそのまま境界線の色として適用されます。
-
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
-
CSSのlist-style-imageプロパティの使い方｜箇条書きのマーカーを画像に変更する方法
list-style-imageプロパティとはCSSのlist-style-imageプロパティを使うと、箇条書き（リスト）のマーカーとして、通常の黒丸（ビュレット）や数字の代わりに任意の画像を指定できます。オリジナルのアイコンや矢印画像などをリストの先頭に表示したい場合に便利なプロパティです。値にはurl()関数で画像ファイルのパスを指定します。指定できるのは<ul>や<ol>、<li>などdisplay: list-itemが適用される要素です。基本的な書式list-style-image: url(画像のパス);使用例以下のコードでは、最初のリスト項目