border-left-style:要素の左辺に設定した境界線の形状を指定する
初期値 | none |
適用対象 | 全ての要素、::first-letter |
継承 | しない |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
border-left-styleプロパティの説明
border-left-style
は、要素の左辺に設定した境界線(外枠、枠線)の形状を指定します。スタイルの種類は、あらかじめ用意されているキーワードから選択します。この値を明示しない限り、要素の境界線は初期値がnone
であるため、表示されない点に注意して下さい。
上下左右すべての境界線の形状を一括で指定する場合はborder-style
を、それ以外の値も含めて一括で指定する場合はショートハンド・プロパティのborder
を使用して下さい。
ほかの辺に表示される境界線の形状を指定する場合は、以下のいずれかのプロパティを使用します。
border-top-style
:上辺の境界線の形状を指定するborder-right-style
:右辺の境界線の形状を指定するborder-bottom-style
:下辺の境界線の形状を指定するborder-left-style
:左辺の境界線の形状を指定する
border-left-styleに指定できる値
- <line-style>
- 境界線の形状を指定するキーワード型の値です。使用できるキーワードには以下のものがあります。
- none
- 境界線を表示しません。この値が指定されていると、
border-width
の太さは0
になります。テーブルのセルがcollasped
で表示される場合は、競合するセルの境界線が優先されます。これが初期値です。 - hidden
- 境界線を隠します。この値が指定されていると、
border-width
の太さは0
になります。テーブルのセルがcollasped
で表示される場合は、競合するセルの境界線を打ち消して表示させません。 - solid
- 境界線を実線で表示します。線を太くすると平面的な直線となります。
- dashed
- 境界線を断続的に切れた線で表示します。線の太さによって点線や破線に見えます。線と線の間隔はブラウザの実装に依存します。
- dotted
- 境界線を連続する丸い点で表示します。点の直径は
border-width
で指定した太さになり、点と点の間隔はブラウザの実装に依存します。 - double
- 境界線を二重の直線で表示します。
border-width
の値をできる限り三等分にし、直線と隙間を等間隔で並べます。つまり、二本の直線と隙間の合計値が線の幅とみなされます。 - groove
- 境界線の中央が凹んでいるように見える直線を表示します。光源が右下に置かれており、左上に影が落ちます。この時、
border-color
で指定した色は自動的に調整され、立体的に見えます。表現的にはridge
の逆です。 - ridge
- 境界線の中央が隆起しているように見える直線を表示します。光源が左上に置かれており、右下に影が落ちます。この時、
border-color
で指定した色は自動的に調整され、立体的に見えます。表現的にはgroove
の逆です。 - inset
- 要素が押し込まれて見えるように明暗を分けた境界線を表示します。上下左右の境界線の色味は
border-color
で指定した値を基準に自動的に調整されます。表現的にはoutset
の逆です。 - outset
- 要素が出っ張って見えるように明暗を分けた境界線を表示します。上下左右の境界線の色味は
border-color
で指定した値を基準に自動的に調整されます。表現的にはinset
の逆です。
border-left-styleの使い方とサンプル
border-left-style
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
border-left-style: none;
border-left-style: hidden;
border-left-style: solid;
border-left-style: dashed;
border-left-style: dotted;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;
/* グローバル値 */
border-left-style: inherit;
border-left-style: initial;
border-left-style: revert;
border-left-style: unset;
border-left-styleの実例
それでは簡単な例を見てみましょう。ここでは、要素の左辺だけに境界線を表示した場合の挙動を確かめます。groove
、ridge
、inset
、outset
は立体的な表現であるため、全ての辺に適用しなければ効果が得られません。
CSS
.samp_box {
padding: 0 1rem;
text-align: center;
}
.samp_box > div {
margin: 1rem auto 0 auto;
padding: 2rem 1rem;
background-color: #eee;
border-left-width: 3px;
}
#border_1 {
border-left-style: solid;
}
#border_2 {
border-left-style: dashed;
}
#border_3 {
border-left-style: dotted;
}
#border_4 {
border-left-style: double;
}
#border_5 {
border-left-style: groove;
}
#border_6 {
border-left-style: ridge;
}
#border_7 {
border-left-style: inset;
}
#border_8 {
border-left-style: outset;
}
HTML
<section class="samp_box">
<p>border-left-style</p>
<div id="border_1">solid</div>
<div id="border_2">dashed</div>
<div id="border_3">dotted</div>
<div id="border_4">double</div>
<div id="border_5">groove</div>
<div id="border_6">ridge</div>
<div id="border_7">inset</div>
<div id="border_8">outset</div>
</section>
表示確認
続いてnone
とhidden
の違いについて確認します。この二つは、どちらも境界線を表示させないという値ですが、要素同士が隣接するテーブルなどの場合に違いが現れます。具体的には、none
は競合するボーダーに影響を与えませんが、hidden
は競合するボーダーも一緒に隠します。
表示確認
CSS
.samp_table {
margin: 1rem auto 0 auto;
width: 80%;
border: none;
border-collapse: collapse;
text-align: center;
}
.samp_table td {
padding: .5rem;
border-top: 3px solid #fc605b;
border-right: 3px solid #fcc15b;
border-bottom: 3px solid #76fc5b;
border-left: 3px solid #5b96fc;
}
#tb_1 td {
border-left-style: none;
}
#tb_2 td {
border-left-style: hidden;
}
HTML
<table class="samp_table">
<caption>全て表示</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<table class="samp_table" id="tb_1">
<caption>border-left-style: none;</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
<table class="samp_table" id="tb_2">
<caption>border-left-style: hidden;</caption>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
border-left-styleに関連するCSSプロパティ
境界線・輪郭線 | |
---|---|
border | 要素の周囲に境界線を付ける |
border-bottom | 要素の底辺に境界線を付ける |
border-bottom-color | 要素の底辺に表示する境界線の色を指定する |
border-bottom-left-radius | 要素の左下の角丸を指定する |
border-bottom-right-radius | 要素の右下の角丸を指定する |
border-bottom-style | 要素の底辺に表示する境界線の形状を指定する |
border-bottom-width | 要素の底辺に表示する境界線の幅を指定する |
border-color | 要素の境界線の色を指定する |
border-image | 要素の境界線に画像を指定する |
border-image-outset | 境界線の画像が要素の縁からはみ出す距離を指定する |
border-image-repeat | 境界線に表示させる画像の繰り返し方を指定する |
border-image-slice | 境界線に指定した画像の使用範囲を指定する |
border-image-source | 境界線に使用する画像ファイルを指定する |
border-image-width | 境界線に指定した画像の幅を指定する |
border-left | 要素の左辺に境界線を付ける |
border-left-color | 要素の左辺に表示する境界線の色を指定する |
border-left-style | 要素の左辺に表示する境界線の形状を指定する |
border-left-width | 要素の左辺に表示する境界線の幅を指定する |
border-radius | 要素の角丸についてまとめて指定する |
border-right | 要素の右辺に境界線を付ける |
border-right-color | 要素の右辺に表示する境界線の色を指定する |
border-right-style | 要素の右辺に表示する境界線の形状を指定する |
border-right-width | 要素の右辺に表示する境界線の幅を指定する |
border-style | 境界線の形状を指定する |
border-top | 要素の上辺に境界線を付ける |
border-top-color | 要素の上辺に表示境界線の色を指定する |
border-top-left-radius | 要素の左上の角丸を指定する |
border-top-right-radius | 要素の右上の角丸を指定する |
border-top-style | 要素の上辺に表示する境界線の形状を指定する |
border-top-width | 要素の上辺に表示する境界線の幅を指定する |
border-width | 境界線の幅を指定する |
outline | アウトラインの装飾を一括で指定する |
outline-color | アウトラインの色を指定する |
outline-offset | アウトラインと要素の空間を指定する |
outline-style | アウトラインの形状を指定する |
outline-width | アウトラインの太さを指定する |