概要
CSSプロパティ「border-left」は、要素の左辺の境界線(ボーダー)の太さ(border-width)、スタイル(border-style)、色(border-color)をまとめて指定するショートハンドプロパティです。左辺の他、border- top, border-bottom, border-right プロパティがあります。
また4辺をまとめて指定する場合は、border プロパティを使用します。
<div class="border-left">border-leftを指定した要素</div>
<style>
.border-left {
border-left: 3px solid #000;
}
</style>
値の指定方法
順番は順不同でいれることができます。もし、指定をしなかった場合はそのプロパティの初期値が入ります。またその中の「スタイル」は、指定をしないと初期値が「none」なので、表示がされませんので気をつけましょう。
{ border-left: 値 スタイル 色 }
値について
指定できる値の種類です。
値 | 説明 |
---|---|
value | 単位はpx, emなどが可能です。マイナス値は入れられません |
keyword | thin, medium, thickが入ります |
スタイルについて
指定できるスタイルは以下の通りです。それぞれの表示は border-style で詳しく解説しています。
値 | 説明 |
---|---|
none | ボーダーは表示されません |
solid | 一本線のボーダーが表示されます |
dotted | 1列にならんだドット模様のボーダーが表示されます |
dashed | 破線のボーダーが表示されます |
double | 二本線のボーダーが表示されます |
groove | 立体的で窪んだ線が表示されます |
ridge | 立体的で隆起した線が表示されます |
inset | grooveと似てますが立体的で窪んだ線が表示されます |
outset | ridgeと似てますが、立体的で隆起した線が表示されます |
色について
指定できる色の種類です。
値 | 説明 |
---|---|
color | 色を指定します. #000000やrgb(0,0,0)でも指定できます |
プロパティの種類について
「border」 プロパティは、4辺それぞれに異なった値をいれることができませんが、細分化したプロパティを使用することによって、値を変更することができます(指定可のみ)。それぞれのプロパティをまとめた一覧になりますので確認してみてください。
プロパティ名 | 4辺一括で指定される内容 | 細分化プロパティ名 |
---|---|---|
border | ボーダーの太さ、スタイル、色を指定できる | 4辺指定可。border-top、border-bottom、border-left、border-right |
border-width | 太さを指定できる | 4辺指定可。border-top-width、border-bottom-width、border-left-width、border-right-width |
border-style | スタイルを指定できる | 4辺指定可。border-top-style、border-bottom-style、border-left-style、border-right-style |
border-color | 色を指定できる | 4辺指定可。border-top-color、border-bottom-color、border-left-color、border-right-color |
border-image | 背景を指定できる | 4辺指定不可。border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat |
使用例
実はこのサイトの見出しでも使用されています。「border-left」 プロパティで左の装飾線を、 border-bottom プロパティで下線を表現しています。
<h1 class="border-left">見出し1</h1>
<p>ようこそWWWクリエイターズへ</p>
<style>
h1 {
font-weight: bold;
padding: 0 0 6px 20px;
position: relative;
border-bottom: 2px solid #e84c29;
}
h1:after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
border-left: 3px solid #f87f7f;
}
.border-left {
border-left: 8px solid #e84c29;
}
</style>
仕様書
CSS Backgrounds and Borders Module Level 3