概要
CSSプロパティ「border-bottom」は、要素の下辺の境界線(ボーダー)の太さ(border-width)、スタイル(border-style)、色(border-color)をまとめて指定するショートハンドプロパティです。下辺の他、border- top, border-left, border-right プロパティがあります。
また4辺をまとめて指定する場合は、border プロパティを使用します。
<div class="border-bottom">border-bottomを指定した要素</div>
<style>
.border-bottom {
border-bottom: 1px solid #000;
}
</style>
値の指定方法
順番は順不同でいれることができます。もし、指定をしなかった場合はそのプロパティの初期値が入ります。またその中の「スタイル」は、指定をしないと初期値が「none」なので、表示がされませんので気をつけましょう。
{ border-bottom: 値 スタイル 色 }
値について
指定できる値の種類です。
値 | 説明 |
---|---|
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 |
使用例
見出しとメニューなど、要素同士を区切る線として使用することがよくみられます。
<p class="border-bottom">定食メニュー</p>
<div>
<ul>
<li>生姜焼き定食</li>
<li>唐揚げ定食</li>
<li>焼き魚定食</li>
</ul>
</div>
<p class="border-bottom">飲み物メニュー</p>
<div>
<ul>
<li>烏龍茶</li>
<li>コーラ</li>
<li>オレンジジュース</li>
</ul>
</div>
<style>
p {
font-weight: bold;
padding-bottom: 10px;
}
.border-bottom {
border-bottom: 1px solid #ccc;
}
</style>
仕様書