ホーム＞コース別ガイド一覧＞枠線の色を設定しよう！
枠線の色を設定しよう！
（border-top-color、border-bottom-color、border-left-color、border-right-color、border-color プロパティ） |
 
|
CSS一覧プロパティ辞典 … border-top-color プロパティ
border-top-color プロパティを使うと、枠線の上側の枠の色を指定できます。値には、「red」のような色名やRGB形式で指定します。
CSS一覧プロパティ辞典 … border-bottom-color プロパティ
border-bottom-color プロパティを使うと、枠線の下側の枠の色を指定できます。値には、「red」のような色名やRGB形式で指定します。
CSS一覧プロパティ辞典 … border-left-color プロパティ
border-left-color プロパティを使うと、枠線の左側の枠の色を指定できます。値には、「red」のような色名やRGB形式で指定します。
CSS一覧プロパティ辞典 … border-right-color プロパティ
border-right-color プロパティを使うと、枠線の右側の枠の色を指定できます。値には、「red」のような色名やRGB形式で指定します。
CSS一覧プロパティ辞典 … border-color プロパティ
border-color プロパティを使うと、枠線の上下左右の枠の色をまとめて指定できます。値には、「red」のような色名やRGB形式で指定します。また、値を１個から４個指定可能で、並べた値の数よって解釈が変わります。詳細は下の「[border-colorプロパティの値]」という表をご覧ください。
[border-colorプロパティの値]
| border-colorプロパティの値の個数 |
効果 |
| スタイルを１個指定した場合 |
上下左右の枠線の色になる。
「border-color: red;」と指定すると、上下左右の枠線が赤色になります。 |
| スタイルを２個指定した場合 |
一つ目の値が上下、二つ目の値が左右の枠線の色になります。
「border-color: red green;」と指定すると、上下の枠線が赤色になり、上下の枠線が緑色になります。 |
| スタイルを３個指定した場合 |
一つ目の値が上、二つ目の値が左右、三つ目の値が下の枠線の色になります。
「border-color: red green blue;」と指定すると、上の枠線が赤色になり、左右の枠線が緑色になり、下の枠線が青色になります。 |
| スタイルを４個指定した場合 |
一つ目の値が上、二つ目の値が右、三つ目の値が下、四つ目の値が左の枠線の色になります。
「border-color: red green blue yellow;」と指定すると、上の枠線が赤色になり、右の枠線が緑色になり、下の枠線が青色になり、左の枠線が黄色になります。 |
覚え方があります！
border-colorプロパティの値のようにCSSで上下左右を表すときは、上、右、下、左、のように時計回りになります。このことを覚えておくと値を入力するときに迷わずにすみますよ！
border-left-colorプロパティ、border-right-colorプロパティを使用し、h1 要素の左右のみの枠線の色を赤に指定しよう！なお、始めにborder-left-style プロパティ、border-right-style プロパティを使用し、h1要素の左右のみに枠線を表示し、border-left-width プロパティ、border-right-width プロパティを使用して枠線の幅を左右共に15pxに指定しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body { background-color: moccasin;}
h1 {
background-color: orange;
text-align: center;
border-left-style: solid;
border-right-style: solid;
border-left-width: 15px;
border-right-width: 15px;
border-left-color: red;
border-right-color: red;
}
span{ font-weight: bold; }
p {
line-height: 1.7em;
text-align: center;
}
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html>
|
|
[border-left-colorプロパティ、border-right-colorプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[border-left-colorプロパティ、border-right-colorプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように h1 要素の左右それぞれの枠線の色が赤に表示されました！
※枠線の色を指定しないと、要素の文字列の色（colorプロパティ）が適応されます。枠線関連の注意事項は「枠線の注意事項！」を参照してください。
