1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: border-bottom-width
slug: Web/CSS/border-bottom-width
tags:
- CSS
- CSS プロパティ
- CSS 背景と境界
- Reference
- border
- border-bottom
- border-width
translation_of: Web/CSS/border-bottom-width
---
<div>{{CSSRef}}</div>
<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-bottom-width</code></strong> プロパティは、ボックスの下の境界の幅を設定します。</p>
<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers">/* キーワード値 */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* <length> 値 */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* グローバルキーワード */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code><line-width></code></dt>
<dd>明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
<table class="standard-table">
<tbody>
<tr>
<td style="vertical-align: middle;"><code>thin</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">細い境界線</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>medium</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">中くらいの境界線</td>
</tr>
<tr>
<td style="vertical-align: middle;"><code>thick</code></td>
<td style="vertical-align: middle;">
<div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"> </div>
</td>
<td style="vertical-align: middle;">太い境界線</td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>メモ:</strong> 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に <code>thin ≤ medium ≤ thick</code> というパターンに従い、値は同じ文書の中では一貫しています。</p>
</div>
</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Example" name="Example">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div>Element 1</div>
<div>Element 2</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('Example', '100%')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>目立った変更はなし。</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>目立った変更はなし。</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
<p>{{Compat("css.properties.border-bottom-width")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}</li>
<li>他の border-bottom 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, {{Cssxref("border-bottom-color")}}</li>
</ul>
|
