diff options
Diffstat (limited to 'files')
29 files changed, 1857 insertions, 2343 deletions
diff --git a/files/ja/web/css/border-bottom-color/index.md b/files/ja/web/css/border-bottom-color/index.md index 7bac45b944..a6c9febaab 100644 --- a/files/ja/web/css/border-bottom-color/index.md +++ b/files/ja/web/css/border-bottom-color/index.md @@ -3,23 +3,23 @@ title: border-bottom-color slug: Web/CSS/border-bottom-color tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-color translation_of: Web/CSS/border-bottom-color --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-bottom-color</code></strong> は CSS のプロパティで、要素の下側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-bottom")}} でも設定することができます。</p> +**`border-bottom-color`** は CSS のプロパティで、要素の下側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-bottom")}} でも設定することができます。 -<div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers language-css notranslate">/* <color> 値 */ +```css +/* <color> 値 */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); @@ -30,41 +30,43 @@ border-bottom-color: transparent; /* グローバル値 */ border-bottom-color: inherit; border-bottom-color: initial; +border-bottom-color: revert; border-bottom-color: unset; -</pre> +``` -<p><code>border-bottom-color</code> プロパティは1つの値で指定します。</p> +`border-bottom-color` プロパティは 1 つの値で指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>境界線の色を定義します。</dd> -</dl> +- {{cssxref("<color>")}} + - : 境界線の色を定義します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3> +<h3 id="A_simple_div_with_a_border">境界線が付いた単純な div</h3> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div class="mybox"> - <p>これは周囲に境界線があるボックスです。 +```html +<div class="mybox"> + <p>これは周囲に境界線があるボックスです。 なお、ボックスのその辺が - <span class="redtext">赤</span>になっています。</p> -</div></pre> + <span class="redtext">赤</span>になっています。</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.mybox { +```css +.mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; @@ -72,44 +74,23 @@ border-bottom-color: unset; .redtext { color: red; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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', '#propdef-border-bottom-color', 'border-bottom-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-bottom-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}.</li> - <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-left-color")}}</li> - <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}. + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-left-color")}} + - 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}} diff --git a/files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png b/files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png Binary files differnew file mode 100644 index 0000000000..2a417b6669 --- /dev/null +++ b/files/ja/web/css/border-bottom-left-radius/border-bottom-left-radius.png diff --git a/files/ja/web/css/border-bottom-left-radius/index.md b/files/ja/web/css/border-bottom-left-radius/index.md index 14cb9816bb..856570505f 100644 --- a/files/ja/web/css/border-bottom-left-radius/index.md +++ b/files/ja/web/css/border-bottom-left-radius/index.md @@ -3,32 +3,32 @@ title: border-bottom-left-radius slug: Web/CSS/border-bottom-left-radius tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-left-radius translation_of: Web/CSS/border-bottom-left-radius --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-bottom-left-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。</p> +**`border-bottom-left-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左下の角を丸めます。 -<div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。 -<p>丸みは円または楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p> + -<div style="text-align: center;"><img alt="border-bottom-left-radius.png" class="default internal" src="/@api/deki/files/6136/=border-bottom-left-radius.png"></div> +背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p> +> **Note:** このプロパティの値が `border-bottom-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 -<div class="note"><strong>注:</strong> このプロパティの値が <code>border-bottom-left-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* 角を円にする */ -/* border-bottom-left-radius: <em>radius</em> */ +```css +/* 角を円にする */ +/* border-bottom-left-radius: 半径 */ border-bottom-left-radius: 3px; /* パーセント値 */ @@ -36,158 +36,136 @@ border-bottom-left-radius: 3px; /* ボックスが正方形ならば円、長方形ならば楕円 */ border-bottom-left-radius: 20%; -/* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */ +/* 上と同じ。水平方向 (width) および垂直方向 (height) の 20% */ border-bottom-left-radius: 20% 20%; -/* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */ +/* 水平方向 (width) の 20% および垂直方向 (height) の 10% */ border-bottom-left-radius: 20% 10%; /* 角を楕円にする */ -/* border-bottom-left-radius: <em>horizontal</em> <em>vertical</em> */ +/* border-bottom-left-radius: 水平 垂直 */ border-bottom-left-radius: 0.5em 1em; -border-bottom-left-radius: inherit;</pre> +/* グローバル値 */ +border-bottom-left-radius: inherit; +border-bottom-left-radius: initial; +border-bottom-left-radius: revert; +border-bottom-left-radius: unset; +``` -<p>値１つで指定する場合:</p> +値 1 つで指定する場合: -<ul> - <li>値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。</li> -</ul> + - 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。 -<p>値２つで指定する場合:</p> +値 2 つで指定する場合: -<ul> - <li>最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li> - <li>最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li> -</ul> + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。 + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> +- `<length-percentage>` + - : 円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>ライブ例</th> - <th>コード</th> - </tr> - </thead> - <tbody> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 40px; width: 100px; height: 100px;"> - <div class="hidden">.</div> - </div> - </td> - <td>境界として使用されている円弧 - <pre class="brush: css notranslate"> +## 例 + +<h3 id="Arc_of_a_circle">円弧</h3> + +単一の `<length>` 値は円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { - border-bottom-left-radius: 40px 40px; + border-bottom-left-radius: 40px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40px 20px; width: 100px; height: 100px;"> - <div class="hidden">.</div> - </div> - </td> - <td>境界として使用されている楕円の弧 - <pre class="brush: css notranslate"> +``` + +{{EmbedLiveSample("Arc_of_a_circle")}} + +<h3 id="Arc_of_an_ellipse">楕円弧</h3> + +2 つの異なる `<length>` の値は楕円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-bottom-left-radius: 40px 20px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 100px;"> - <div class="hidden">.</div> - </div> - </td> - <td>ボックスは正方形。境界として使用されている円弧 - <pre class="brush: css notranslate"> +``` + +{{EmbedLiveSample("Arc_of_an_ellipse")}} + +<h3 id="Square_element_with_percentage_radius">正方形の要素にパーセント値の半径</h3> + +正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-bottom-left-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-left-radius: 40%; width: 100px; height: 200px;"> - <div class="hidden">.</div> - </div> - </td> - <td>ボックスは正方形ではない。境界として使用されている楕円の弧 - <pre class="brush: css notranslate"> +``` + +{{EmbedLiveSample("Square_element_with_percentage_radius")}} + +<h3 id="Non-square_element_with_percentage_radius">長方形の要素にパーセント値の半径</h3> + +正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-bottom-left-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 200px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="border: black 3px double; border-bottom-left-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div class="hidden">.</div> - </div> - </td> - <td>背景色は境界で切り取られる - <pre class="brush: css notranslate"> -div { - border-bottom-left-radius:40%; - border-style: black 3px double; - background-color: rgb(250,20,70); - background-clip: content-box; -} -</pre> - </td> - </tr> - </tbody> -</table> - -<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', '#propdef-border-bottom-left-radius', 'border-bottom-left-radius')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-bottom-left-radius")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>一括指定の {{cssxref("border-radius")}} プロパティ</li> - <li>{{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-top-left-radius")}}</li> -</ul> +``` + +{{EmbedLiveSample("Non-square_element_with_percentage_radius")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 一括指定の {{cssxref("border-radius")}} プロパティ +- {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-top-left-radius")}} diff --git a/files/ja/web/css/border-bottom-right-radius/border-bottom-right-radius.png b/files/ja/web/css/border-bottom-right-radius/border-bottom-right-radius.png Binary files differnew file mode 100644 index 0000000000..0e8243b876 --- /dev/null +++ b/files/ja/web/css/border-bottom-right-radius/border-bottom-right-radius.png diff --git a/files/ja/web/css/border-bottom-right-radius/index.md b/files/ja/web/css/border-bottom-right-radius/index.md index 1d683d390a..14708714a3 100644 --- a/files/ja/web/css/border-bottom-right-radius/index.md +++ b/files/ja/web/css/border-bottom-right-radius/index.md @@ -3,185 +3,163 @@ title: border-bottom-right-radius slug: Web/CSS/border-bottom-right-radius tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-right-radius translation_of: Web/CSS/border-bottom-right-radius --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-bottom-right-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。</p> +**`border-bottom-right-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。 -<div>{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。 -<p>丸みは円または楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p> + -<div style="text-align: center;"><img alt="border-bottom-right-radius.png" class="default internal" src="/@api/deki/files/6134/=border-bottom-right-radius.png"></div> +背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p> +> **Note:** このプロパティの値が `border-bottom-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 -<div class="note"><strong>注:</strong> このプロパティの値が <code>border-bottom-right-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* 角を円にする */ -/* border-bottom-right-radius: <em>radius</em> */ +```css +/* 角を円にする */ +/* border-bottom-right-radius: 半径 */ border-bottom-right-radius: 3px; /* パーセント値 */ border-bottom-right-radius: 20%; /* ボックスが正方形ならば円、長方形ならば楕円 */ -border-bottom-right-radius: 20% 20%; /* 上と同じ。水平方向 (width) 及び垂直方向 (height) の 20% */ -border-bottom-right-radius: 20% 10%; /* 水平方向 (width) の 20% 及び垂直方向 (height) の 10% */ +border-bottom-right-radius: 20% 20%; /* 上と同じ。水平方向 (width) および垂直方向 (height) の 20% */ +border-bottom-right-radius: 20% 10%; /* 水平方向 (width) の 20% および垂直方向 (height) の 10% */ /* 角を楕円にする */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.5em 1em; -border-bottom-right-radius: inherit;</pre> +/* グローバル値 */ +border-bottom-right-radius: inherit; +border-bottom-right-radius: initial; +border-bottom-right-radius: revert; +border-bottom-right-radius: unset; +``` -<p>値１つで指定する場合:</p> +値 1 つで指定する場合: -<ul> - <li>値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。</li> -</ul> + - 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。 -<p>値２つで指定する場合:</p> +値 2 つで指定する場合: -<ul> - <li>最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li> - <li>最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li> -</ul> + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。 + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> +- `<length-percentage>` + - : 円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>ライブ例</th> - <th>コード</th> - </tr> - </thead> - <tbody> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 40px; width: 100px; height: 100px;"> - <div class="hidden">.</div> - </div> - </td> - <td>境界として使用されている円弧 - <pre class="brush: css notranslate"> +## 例 + +<h3 id="Arc_of_a_circle">円弧</h3> + +単一の `<length>` 値は円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { - border-bottom-right-radius: 40px 40px; + border-bottom-right-radius: 40px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40px 20px; width: 100px; height: 100px;"> - <div class="hidden">.</div> - </div> - </td> - <td>境界として使用されている楕円の弧 - <pre class="brush: css notranslate"> +``` + +{{EmbedLiveSample("Arc_of_a_circle")}} + +<h3 id="Arc_of_an_ellipse">楕円弧</h3> + +2 つの異なる `<length>` の値は楕円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-bottom-right-radius: 40px 20px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 100px;"> - <div class="hidden">.</div> - </div> - </td> - <td>ボックスは正方形。境界として使用されている円弧 - <pre class="brush: css notranslate"> +``` + +{{EmbedLiveSample("Arc_of_an_ellipse")}} + +<h3 id="Square_element_with_percentage_radius">正方形の要素にパーセント値の半径</h3> + +正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-bottom-right-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="background-color: lightgreen; border: solid 1px black; border-bottom-right-radius: 40%; width: 100px; height: 200px;"> - <div class="hidden">.</div> - </div> - </td> - <td>ボックスは正方形ではない。境界として使用されている楕円の弧 - <pre class="brush: css notranslate"> +``` + +{{EmbedLiveSample("Square_element_with_percentage_radius")}} + +<h3 id="Non-square_element_with_percentage_radius">長方形の要素にパーセント値の半径</h3> + +正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-bottom-right-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 200px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div style="border: black 3px double; border-bottom-right-radius: 40%; height: 100px; width: 100px; background-color: rgb(250,20,70); background-clip: content-box;"> - <div class="hidden">.</div> - </div> - </td> - <td>背景色は境界で切り取られる - <pre class="brush: css notranslate"> -div { - border-bottom-right-radius:40%; - border-style: black 3px double; - background-color: rgb(250,20,70); - background-clip: content-box; -} -</pre> - </td> - </tr> - </tbody> -</table> - -<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', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-bottom-right-radius")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>一括指定の {{cssxref("border-radius")}} プロパティ</li> - <li>{{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-top-left-radius")}}</li> -</ul> +``` + +{{EmbedLiveSample("Non-square_element_with_percentage_radius")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 一括指定の {{cssxref("border-radius")}} プロパティ +- {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-top-left-radius")}} diff --git a/files/ja/web/css/border-bottom-style/index.md b/files/ja/web/css/border-bottom-style/index.md index 35392f014a..43b97e73a4 100644 --- a/files/ja/web/css/border-bottom-style/index.md +++ b/files/ja/web/css/border-bottom-style/index.md @@ -3,27 +3,25 @@ title: border-bottom-style slug: Web/CSS/border-bottom-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - border - - border-bottom - - border-style - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-style translation_of: Web/CSS/border-bottom-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-bottom-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の下側の境界 ({{cssxref("border")}}) における線の形状を設定します。</p> +**`border-bottom-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の下側の境界 ({{cssxref("border")}}) における線の形状を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +> **Note:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。 -<div class="note"><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; @@ -38,43 +36,51 @@ border-bottom-style: outset; /* グローバル値 */ border-bottom-style: inherit; border-bottom-style: initial; +border-bottom-style: revert; border-bottom-style: unset; -</pre> +``` + +`border-bottom-style` プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 + +## 公式定義 -<p><code>border-bottom-style</code> プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<p>こちらの表では border-bottom-style のすべての値を紹介します。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><table> - <tr> - <td class="b1">none</td> - <td class="b2">hidden</td> - <td class="b3">dotted</td> - <td class="b4">dashed</td> - </tr> - <tr> - <td class="b5">solid</td> - <td class="b6">double</td> - <td class="b7">groove</td> - <td class="b8">ridge</td> - </tr> - <tr> - <td class="b9">inset</td> - <td class="b10">outset</td> - </tr> -</table></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">/* 表の外見を定義 */ +## 例 + +<h3 id="Demonstrating_all_border_styles">すべての境界の形状のデモ</h3> + +#### HTML + +```html +<table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table> +``` + +#### CSS + +```css +/* 表の外見を定義 */ table { border-width: 3px; background-color: #52E385; @@ -93,45 +99,22 @@ tr, td { .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} -.b10 {border-bottom-style: outset;}</pre> +.b10 {border-bottom-style: outset;} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{ EmbedLiveSample('Examples', 300, 200) }}</p> +{{ EmbedLiveSample('Demonstrating_all_border_styles', 300, 200) }} -<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', '#propdef-border-bottom-style', 'border-bottom-style') }}</td> - <td>{{ Spec2('CSS3 Backgrounds') }}</td> - <td>重要な変更はなし。</td> - </tr> - <tr> - <td>{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}</td> - <td>{{ Spec2('CSS2.1') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-bottom-style")}}</p> +{{Compat}} -<h2 id="See_Also" name="See_Also">関連情報</h2> +## 関連情報 -<ul> - <li>その他の形状に関する境界のプロパティ: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}</li> - <li>その他の下側の境界に関するプロパティ: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-width") }}</li> -</ul> + - その他の形状に関する境界のプロパティ: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }} + - その他の下境界に関するプロパティ: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-width") }} diff --git a/files/ja/web/css/border-bottom-width/index.md b/files/ja/web/css/border-bottom-width/index.md index 1af992f964..d5b74e821f 100644 --- a/files/ja/web/css/border-bottom-width/index.md +++ b/files/ja/web/css/border-bottom-width/index.md @@ -3,30 +3,28 @@ title: border-bottom-width slug: Web/CSS/border-bottom-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-bottom - - border-width + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-bottom-width translation_of: Web/CSS/border-bottom-width --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-bottom-width</code></strong> プロパティは、ボックスの下の境界の幅を設定します。</p> +**`border-bottom-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスの下の境界の幅を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}} -<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">/* キーワード値 */ +```css +/* キーワード値 */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; -/* <length> 値 */ +/* <length> 値 */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; @@ -34,60 +32,45 @@ border-bottom-width: 6px; /* グローバルキーワード */ border-bottom-width: inherit; border-bottom-width: initial; +border-bottom-width: revert; 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> +``` + +### 値 + +- `<line-width>` + + - : 明示的な非負の {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + - `thin` + - `medium` + - `thick` + +> **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Comparing_bottom_border_widths">下境界の太さの比較</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div>Element 1</div> -<div>Element 2</div></pre> +```html +<div>Element 1</div> +<div>Element 2</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { border: 1px solid red; margin: 1em 0; } @@ -97,50 +80,22 @@ div:nth-child(1) { } 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>{{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> +} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_bottom_border_widths', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 他の境界の太さに関する CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}} + - 他の下境界に関する CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, {{Cssxref("border-bottom-color")}} diff --git a/files/ja/web/css/border-bottom/index.md b/files/ja/web/css/border-bottom/index.md index 5e1710479f..9f33242826 100644 --- a/files/ja/web/css/border-bottom/index.md +++ b/files/ja/web/css/border-bottom/index.md @@ -3,85 +3,92 @@ title: border-bottom slug: Web/CSS/border-bottom tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-bottom translation_of: Web/CSS/border-bottom --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-bottom</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の下側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p> +**`border-bottom`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)の [CSS](/ja/docs/Web/CSS) のプロパティで、要素の下側の[境界](/ja/docs/Web/CSS/border)のプロパティをすべて設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-bottom.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +他の一括指定プロパティと同様に、 `border-bottom` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・ -<p>他の一括指定プロパティと同様に、 <code>border-bottom</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p> - -<pre class="brush: css notranslate">border-bottom-style: dotted; +```css +border-bottom-style: dotted; border-bottom: thick green; -</pre> +``` -<p>・・・は、実際には以下と同じです・・・</p> +・・・は、実際には以下と同じです・・・ -<pre class="brush: css notranslate">border-bottom-style: dotted; +```css +border-bottom-style: dotted; border-bottom: none thick green; -</pre> +``` -<p>・・・そして、 <code>border-bottom</code> の前で設定された {{cssxref("border-bottom-style")}} の値は無視されます。 {{cssxref("border-bottom-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p> +・・・そして、 `border-bottom` の前で設定された {{cssxref("border-bottom-style")}} の値は無視されます。 {{cssxref("border-bottom-style")}} の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。 -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<ul> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> -</ul> +- {{cssxref("border-bottom-color")}} +- {{cssxref("border-bottom-style")}} +- {{cssxref("border-bottom-width")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px; +```css +border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; -</pre> -<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p> +/* グローバル値 */ +border-bottom: inherit; +border-bottom: initial; +border-bottom: revert; +border-bottom: unset; +``` + +一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、 1 つまたは 2 つの値を省略することができます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><br-width></code></dt> - <dd>{{cssxref("border-bottom-width")}} を参照してください。</dd> - <dt><code><br-style></code></dt> - <dd>{{cssxref("border-bottom-style")}} を参照してください。</dd> - <dt>{{cssxref("<color>")}}</dt> - <dd>{{cssxref("border-bottom-color")}} を参照してください。</dd> -</dl> +- `<br-width>` + - : {{cssxref("border-bottom-width")}} を参照してください。 +- `<br-style>` + - : {{cssxref("border-bottom-style")}} を参照してください。 +- {{cssxref("<color>")}} + - : {{cssxref("border-bottom-color")}} を参照してください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Applying_a_bottom_border" name="Applying_a_bottom_border">下の境界の適用</h3> +<h3 id="Applying_a_bottom_border">下の境界の適用</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> +```html +<div> このボックスには下側に境界線があります。 -</div></pre> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; @@ -89,49 +96,22 @@ border-bottom: medium dashed blue; font-weight: bold; text-align: center; } -</pre> - -<h4 id="Results" name="Results">結果</h4> - -<p>{{EmbedLiveSample('Applying_a_bottom_border')}}</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', '#propdef-border-bottom', 'border-bottom')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>直接的な変更はないが、 {{cssxref("border-bottom-color")}} に適用される値が変更された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>有意な変更点なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-bottom")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-block")}}</li> - <li>{{cssxref("outline")}}</li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_bottom_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} diff --git a/files/ja/web/css/border-collapse/index.md b/files/ja/web/css/border-collapse/index.md index 588bd841b0..c62446491c 100644 --- a/files/ja/web/css/border-collapse/index.md +++ b/files/ja/web/css/border-collapse/index.md @@ -60,7 +60,7 @@ border-collapse: unset; ```html <table class="separate"> - <caption><code>border-collapse: separate</code></caption> + <caption>`border-collapse: separate`</caption> <tbody> <tr><th>Browser</th> <th>Layout Engine</th></tr> <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr> @@ -71,7 +71,7 @@ border-collapse: unset; </tbody> </table> <table class="collapse"> - <caption><code>border-collapse: collapse</code></caption> + <caption>`border-collapse: collapse`</caption> <tbody> <tr><th>Browser</th> <th>Layout Engine</th></tr> <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr> diff --git a/files/ja/web/css/border-color/index.md b/files/ja/web/css/border-color/index.md index 1b2af584f3..28ab37d58e 100644 --- a/files/ja/web/css/border-color/index.md +++ b/files/ja/web/css/border-color/index.md @@ -3,33 +3,42 @@ title: border-color slug: Web/CSS/border-color tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 境界線 - - CSS 背景と境界 + - CSS スタイル - HTML 色 - - Reference + - リファレンス - Styling HTML - - border - border-color - - 一括指定プロパティ + - 境界 - 色 + - recipe:css-shorthand-property +browser-compat: css.properties.border-color translation_of: Web/CSS/border-color --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-color</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>を行う <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の境界の色を設定します。</span></p> +**`border-color`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)を行う [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の色を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-color.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +各辺を個々に設定する場合は、 {{CSSxRef("border-top-color")}}、 {{CSSxRef("border-right-color")}}、 {{CSSxRef("border-bottom-color")}}、 {{CSSxRef("border-left-color")}}、 または書字方向を意識した{{CSSxRef("border-block-start-color")}}、 {{CSSxRef("border-block-end-color")}}、 {{CSSxRef("border-inline-start-color")}}、 {{CSSxRef("border-inline-end-color")}} を使用します。 -<p>各辺を個々に設定する場合は、 {{CSSxRef("border-top-color")}}、 {{CSSxRef("border-right-color")}}、 {{CSSxRef("border-bottom-color")}}、 {{CSSxRef("border-left-color")}}、 または書字方向を意識した{{CSSxRef("border-block-start-color")}}、 {{CSSxRef("border-block-end-color")}}、 {{CSSxRef("border-inline-start-color")}}、 {{CSSxRef("border-inline-end-color")}} を使用します。</p> +境界線の色についての詳細な情報は、 {{SectionOnPage("/ja/docs/Web/HTML/Applying_color", "Borders")}} にあります。 -<p>境界線の色についての詳細な情報は、 {{SectionOnPage("/ja/docs/Web/HTML/Applying_color", "Borders")}} にあります。</p> +## 構成要素のプロパティ -<h2 id="Syntax" name="Syntax">構文</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<pre class="brush:css no-line-numbers">/* <color> 値 */ +- [`border-bottom-color`](/ja/docs/Web/CSS/border-bottom-color) +- [`border-left-color`](/ja/docs/Web/CSS/border-left-color) +- [`border-right-color`](/ja/docs/Web/CSS/border-right-color) +- [`border-top-color`](/ja/docs/Web/CSS/border-top-color) + +## 構文 + +```css +/* <color> 値 */ border-color: red; /* 水平線 | 垂直線 */ @@ -44,72 +53,75 @@ border-color: red yellow green blue; /* グローバル値 */ border-color: inherit; border-color: initial; +border-color: revert; border-color: unset; -</pre> +``` + +`border-color` プロパティは 1 ～ 4 つの値を使って指定することができます。 -<p><code>border-color</code> プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。</p> + - 値が **1 つ**指定された場合、**全 4 辺**に同じ色が適用される。 + - 値が **2 つ**指定された場合、1 つ目の色は**上下**、2 つ目は**左右**の辺に適用される。 + - 値が **3 つ**指定された場合、1 つ目の色**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 + - 値が **4 つ**指定された場合、それぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。 -<ul> - <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じ色が適用される。</li> - <li>値が<strong>2つ</strong>指定された場合、1つ目の色は<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li> - <li>値が<strong>3つ</strong>指定された場合、1つ目の色<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li> - <li>値が<strong>4つ</strong>指定された場合、それぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順（時計回り）に適用される。</li> -</ul> +### 値 -<h3 id="Values" name="Values">値</h3> +- {{CSSxRef("<color>")}} + - : 境界線の色を定義します。 -<dl> - <dt>{{CSSxRef("<color>")}}</dt> - <dd>境界線の色を定義します。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Complete_border-color_usage" name="Complete_border-color_usage">完全な border-color の使用法</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div id="justone"> - <p><code>border-color: red;</code> is equivalent to</p> - <ul><li><code>border-top-color: red;</code></li> - <li><code>border-right-color: red;</code></li> - <li><code>border-bottom-color: red;</code></li> - <li><code>border-left-color: red;</code></li> - </ul> -</div> -<div id="horzvert"> - <p><code>border-color: gold red;</code> is equivalent to</p> - <ul><li><code>border-top-color: gold;</code></li> - <li><code>border-right-color: red;</code></li> - <li><code>border-bottom-color: gold;</code></li> - <li><code>border-left-color: red;</code></li> - </ul> -</div> -<div id="topvertbott"> - <p><code>border-color: red cyan gold;</code> is equivalent to</p> - <ul><li><code>border-top-color: red;</code></li> - <li><code>border-right-color: cyan;</code></li> - <li><code>border-bottom-color: gold;</code></li> - <li><code>border-left-color: cyan;</code></li> - </ul> -</div> -<div id="trbl"> - <p><code>border-color: red cyan black gold;</code> is equivalent to</p> - <ul><li><code>border-top-color: red;</code></li> - <li><code>border-right-color: cyan;</code></li> - <li><code>border-bottom-color: black;</code></li> - <li><code>border-left-color: gold;</code></li> - </ul> -</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">#justone { +## 例 + +<h3 id="Complete_border-color_usage">完全な border-color の使用法</h3> + +#### HTML + +```html +<div id="justone"> + <p><code>border-color: red;</code> is equivalent to</p> + <ul><li><code>border-top-color: red;</code></li> + <li><code>border-right-color: red;</code></li> + <li><code>border-bottom-color: red;</code></li> + <li><code>border-left-color: red;</code></li> + </ul> +</div> +<div id="horzvert"> + <p><code>border-color: gold red;</code> is equivalent to</p> + <ul><li><code>border-top-color: gold;</code></li> + <li><code>border-right-color: red;</code></li> + <li><code>border-bottom-color: gold;</code></li> + <li><code>border-left-color: red;</code></li> + </ul> +</div> +<div id="topvertbott"> + <p><code>border-color: red cyan gold;</code> is equivalent to</p> + <ul><li><code>border-top-color: red;</code></li> + <li><code>border-right-color: cyan;</code></li> + <li><code>border-bottom-color: gold;</code></li> + <li><code>border-left-color: cyan;</code></li> + </ul> +</div> +<div id="trbl"> + <p><code>border-color: red cyan black gold;</code> is equivalent to</p> + <ul><li><code>border-top-color: red;</code></li> + <li><code>border-right-color: cyan;</code></li> + <li><code>border-bottom-color: black;</code></li> + <li><code>border-left-color: gold;</code></li> + </ul> +</div> +``` + +#### CSS + +```css +#justone { border-color: red; } @@ -137,58 +149,24 @@ ul { margin: 0; list-style: none; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}}</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("CSS Logical Properties", "#logical-shorthand-keyword")}}</td> - <td>{{Spec2("CSS Logical Properties")}}</td> - <td><code>logical</code> キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}</td> - <td>{{Spec2("CSS3 Backgrounds")}}</td> - <td><code>transparent</code> キーワードが削除され、 {{CSSxRef("<color>")}} データ型の一部になった。</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>一括指定プロパティと定義された。</td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#border-color", "border-color")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>境界線の色関係の CSS プロパティ: {{CSSxRef("border")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}},</li> - <li>その他の境界線に関する CSS プロパティ: {{CSSxRef("border-width")}}, {{CSSxRef("border-style")}}</li> - <li>{{CSSxRef("<color>")}} データ型</li> - <li>その他の色に関するプロパティ: {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample("Complete_border-color_usage", 600, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界線の色関係の CSS プロパティ: {{CSSxRef("border")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}}, + - その他の境界線に関する CSS プロパティ: {{CSSxRef("border-width")}}, {{CSSxRef("border-style")}} + - {{CSSxRef("<color>")}} データ型 + - その他の色に関するプロパティ: {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}} + - [CSS を使用した HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/border-left-color/index.md b/files/ja/web/css/border-left-color/index.md index 68051c2bf5..ec95b905c2 100644 --- a/files/ja/web/css/border-left-color/index.md +++ b/files/ja/web/css/border-left-color/index.md @@ -3,25 +3,23 @@ title: border-left-color slug: Web/CSS/border-left-color tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-color - - border-left + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-left-color translation_of: Web/CSS/border-left-color --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-left-color</code></strong> は CSS のプロパティで、要素の左側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-left")}} でも設定することができます。</p> +**`border-left-color`** は CSS のプロパティで、要素の左側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-left")}} でも設定することができます。 -<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-left-color.html")}} -<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 language-css notranslate">/* <color> 値 */ +```css +/* <color> 値 */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); @@ -32,41 +30,43 @@ border-left-color: transparent; /* グローバル値 */ border-left-color: inherit; border-left-color: initial; +border-left-color: revert; border-left-color: unset; -</pre> +``` -<p><code>border-left-color</code> プロパティは1つの値で指定します。</p> +`border-left-color` プロパティは 1 つの値で指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>左の境界線の色を定義します。</dd> -</dl> +- {{cssxref("<color>")}} + - : 左の境界線の色を定義します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3> +<h3 id="A_simple_div_with_a_border">境界線が付いた単純な div</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="mybox"> - <p>これは周囲に境界線があるボックスです。 +```html +<div class="mybox"> + <p>これは周囲に境界線があるボックスです。 なお、ボックスのその辺が - <span class="redtext">赤</span>になっています。</p> -</div></pre> + <span class="redtext">赤</span>になっています。</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.mybox { +```css +.mybox { border: solid 0.3em gold; border-left-color: red; width: auto; @@ -74,44 +74,23 @@ border-left-color: unset; .redtext { color: red; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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', '#propdef-border-left-color', 'border-left-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-left-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}.</li> - <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}</li> - <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}. + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}} + - 同じ境界に適用される他の境界関連の CSS プロパティ: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}} diff --git a/files/ja/web/css/border-left-style/index.md b/files/ja/web/css/border-left-style/index.md index 7a1bbb25fb..4b65b0c917 100644 --- a/files/ja/web/css/border-left-style/index.md +++ b/files/ja/web/css/border-left-style/index.md @@ -3,27 +3,25 @@ title: border-left-style slug: Web/CSS/border-left-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-left - - border-style + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-left-style translation_of: Web/CSS/border-left-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-left-style</code></strong> プロパティは、要素の左側の {{cssxref("border")}} における線の形状を設定します。</p> +**`border-left-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の {{cssxref("border")}} における線の形状を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-left-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +> **Note:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。 -<div class="note"><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ border-left-style: none; border-left-style: hidden; border-left-style: dotted; @@ -38,41 +36,51 @@ border-left-style: outset; /* グローバル値 */ border-left-style: inherit; border-left-style: initial; +border-left-style: revert; border-left-style: unset; -</pre> +``` + +`border-left-style` プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 -<p><code>border-left-style</code> プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><table> - <tr> - <td class="b1">none</td> - <td class="b2">hidden</td> - <td class="b3">dotted</td> - <td class="b4">dashed</td> - </tr> - <tr> - <td class="b5">solid</td> - <td class="b6">double</td> - <td class="b7">groove</td> - <td class="b8">ridge</td> - </tr> - <tr> - <td class="b9">inset</td> - <td class="b10">outset</td> - </tr> -</table></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">/* 表の外見を定義 */ +<h2 id="Examples">例</h2> + +### border-left-style の設定 + +#### HTML + +```html +<table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table> +``` + +#### CSS + +```css +/* 表の外見を定義 */ table { border-width: 2px; background-color: #52E385; @@ -91,45 +99,22 @@ tr, td { .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} -.b10 {border-left-style: outset;}</pre> +.b10 {border-left-style: outset;} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{ EmbedLiveSample('Examples', 300, 200) }}</p> +{{ EmbedLiveSample('Examples', 300, 200) }} -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<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-style', 'border-left-style')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>明確な変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-left-style")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>その他の形状に関する境界のプロパティ: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-style")}}</li> - <li>その他の左側の境界に関するプロパティ: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, {{Cssxref("border-left-width")}}</li> -</ul> + - その他の形状に関する境界のプロパティ: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-style")}} + - その他の左側の境界に関するプロパティ: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, {{Cssxref("border-left-width")}} diff --git a/files/ja/web/css/border-left-width/index.md b/files/ja/web/css/border-left-width/index.md index eac253e0e1..c2b4385fc0 100644 --- a/files/ja/web/css/border-left-width/index.md +++ b/files/ja/web/css/border-left-width/index.md @@ -3,30 +3,28 @@ title: border-left-width slug: Web/CSS/border-left-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-left - - border-width + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-left-width translation_of: Web/CSS/border-left-width --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-left-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の左側の境界の幅を設定します。</p> +**`border-left-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の境界の幅を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-left-width.html")}} -<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">/* キーワード値 */ +```css +/* キーワード値 */ border-left-width: thin; border-left-width: medium; border-left-width: thick; -/* <length> 値 */ +/* <length> 値 */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; @@ -34,60 +32,45 @@ border-left-width: 6px; /* グローバル値 */ border-left-width: inherit; border-left-width: initial; +border-left-width: revert; border-left-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><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"></div> - </td> - <td>細い境界線</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"></div> - </td> - <td>中くらいの境界線</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"></div> - </td> - <td>太い境界線</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> +``` + +### 値 + +- `<line-width>` + + - : 明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + - `thin` + - `medium` + - `thick` + +> **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Comparing_border_widths">境界線の太さの比較</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div>Element 1</div> -<div>Element 2</div></pre> +```html +<div>Element 1</div> +<div>Element 2</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { border: 1px solid red; margin: 1em 0; } @@ -97,50 +80,22 @@ div:nth-child(1) { } div:nth-child(2) { border-left-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-left-width')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>目立った変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>目立った変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-left-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>他の border-width 関連 CSS プロパティ: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}}</li> - <li>他の border-left 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-left-color")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_border_widths', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 他の境界の太さに関する CSS プロパティ: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}} + - 他の左の境界に関する CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-left-color")}} diff --git a/files/ja/web/css/border-left/index.md b/files/ja/web/css/border-left/index.md index 0eb1f1b539..7fe2920fc8 100644 --- a/files/ja/web/css/border-left/index.md +++ b/files/ja/web/css/border-left/index.md @@ -3,85 +3,92 @@ title: border-left slug: Web/CSS/border-left tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-left translation_of: Web/CSS/border-left --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-left</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の左側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p> +**`border-left`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)の [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の[境界](/ja/docs/Web/CSS/border)のプロパティをすべて設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-left.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +他の一括指定プロパティと同様に、 `border-left` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・ -<p>他の一括指定プロパティと同様に、 <code>border-left</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p> - -<pre class="brush: css notranslate">border-left-style: dotted; +```css +border-left-style: dotted; border-left: thick green; -</pre> +``` -<p>・・・は、実際には以下と同じです・・・</p> +・・・は、実際には以下と同じです・・・ -<pre class="brush: css notranslate">border-left-style: dotted; +```css +border-left-style: dotted; border-left: none thick green; -</pre> +``` -<p>・・・そして、 <code>border-left</code> の前で設定された {{cssxref("border-left-style")}} の値は無視されます。 {{cssxref("border-left-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p> +・・・そして、 `border-left` の前で設定された {{cssxref("border-left-style")}} の値は無視されます。 {{cssxref("border-left-style")}} の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。 -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<ul> - <li>{{cssxref("border-left-color")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-width")}}</li> -</ul> +- {{cssxref("border-left-color")}} +- {{cssxref("border-left-style")}} +- {{cssxref("border-left-width")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers notranslate">border-left: 1px; +```css +border-left: 1px; border-left: 2px dotted; -border-left: medium dashed green; -</pre> +border-left: medium dashed blue; + +/* グローバル値 */ +border-left: inherit; +border-left: initial; +border-left: revert; +border-left: unset; +``` -<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p> +一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><br-width></code></dt> - <dd>{{cssxref("border-left-width")}} を参照してください。</dd> - <dt><code><br-style></code></dt> - <dd>{{cssxref("border-left-style")}} を参照してください。</dd> - <dt>{{cssxref("<color>")}}</dt> - <dd>{{cssxref("border-left-color")}} を参照してください。</dd> -</dl> +- `<br-width>` + - : {{cssxref("border-left-width")}} を参照してください。 +- `<br-style>` + - : {{cssxref("border-left-style")}} を参照してください。 +- {{cssxref("<color>")}} + - : {{cssxref("border-left-color")}} を参照してください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Applying_a_left_border" name="Applying_a_left_border">左の境界の適用</h3> +<h3 id="Applying_a_left_border">左の境界の適用</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> +```html +<div> このボックスには左側に境界線があります。 -</div></pre> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { border-left: 4px dashed blue; background-color: gold; height: 100px; @@ -89,49 +96,24 @@ border-left: medium dashed green; font-weight: bold; text-align: center; } -</pre> - -<h4 id="Results" name="Results">結果</h4> - -<p>{{EmbedLiveSample('Applying_a_left_border')}}</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', '#propdef-border-left', 'border-left')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>直接的な変更はないが、 {{cssxref("border-left-color")}} に適用される値が変更された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>有意な変更点なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-left', 'border-left')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-left")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-block")}}</li> - <li>{{cssxref("outline")}}</li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_left_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/ja/web/css/border-radius/index.md b/files/ja/web/css/border-radius/index.md index cb351478fe..d5cfcf9458 100644 --- a/files/ja/web/css/border-radius/index.md +++ b/files/ja/web/css/border-radius/index.md @@ -3,213 +3,275 @@ title: border-radius slug: Web/CSS/border-radius tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border-radius + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-radius translation_of: Web/CSS/border-radius --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。</p> +**`border-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。 -<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-radius.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。切り取りが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。 -<p>このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> +`border-radius` プロパティは {{cssxref("border-collapse")}} が `collapse` の table 要素には適用されません。 -<p>半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。</p> +> **Note:** 他の一括指定プロパティと同様、個別のサブプロパティは `border-radius:0 0 inherit inherit` のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。 -<p><code>border-radius</code> プロパティは {{cssxref("border-collapse")}} が <code>collapse</code> の table 要素には適用されません。</p> +## 構成要素のプロパティ -<div class="note"><strong>メモ:</strong> 他の一括指定プロパティと同様、個別のサブプロパティは <code>border-radius:0 0 inherit inherit</code> のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。</div> +このプロパティは以下の CSS プロパティの一括指定です。 -<h2 id="Syntax" name="Syntax">構文</h2> +- [`border-top-left-radius`](/ja/docs/Web/CSS/border-top-left-radius) +- [`border-top-right-radius`](/ja/docs/Web/CSS/border-top-right-radius) +- [`border-bottom-right-radius`](/ja/docs/Web/CSS/border-bottom-right-radius) +- [`border-bottom-left-radius`](/ja/docs/Web/CSS/border-bottom-left-radius) -<pre class="brush: css no-line-numbers"><strong>/* 最初の半径の構文は1つから4つの値が許可されています */</strong> -/* 半径を全4角に設定 */ +## 構文 + +```css +/* 最初の半径の構文は 1 つから 4 つの値が許可されています */ +/* 半径を全 4 角に設定 */ border-radius: 10px; -/* <em>左上と右下</em> | <em>右上と左下</em> */ +/* 左上と右下 | 右上と左下 */ border-radius: 10px 5%; -/* <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */ +/* 左上 | 右上と左下 | 右下 */ border-radius: 2px 4px 2px; -/* <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */ +/* 左上 | 右上 | 右下 | 左下 */ border-radius: 1px 0 3px 4px; -<strong>/* 2番目の半径の構文は1つから4つの値が許可されています */</strong> -/* (最初の半径の値) / <em>radius</em> */ +/* 2 番目の半径の構文は 1 つから 4 つの値が許可されています */ +/* (最初の半径の値) / 半径 */ border-radius: 10px / 20px; -/* (最初の半径の値) / <em>左上と右下</em> | <em>右上と左下</em> */ +/* (最初の半径の値) / 左上と右下 | 右上と左下 */ border-radius: 10px 5% / 20px 30px; -/* (最初の半径の値) / <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */ +/* (最初の半径の値) / 左上 | 右上と左下 | 右下 */ border-radius: 10px 5px 2em / 20px 25px 30%; -/* (最初の半径の値) / <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */ +/* (最初の半径の値) / 左上 | 右上 | 右下 | 左下 */ border-radius: 10px 5% / 20px 25em 30px 35em; /* グローバル値 */ border-radius: inherit; border-radius: initial; +border-radius: revert; border-radius: unset; -</pre> +``` -<p><code>border-radius</code> プロパティは次のように指定することができます。</p> +`border-radius` プロパティは次のように指定することができます。 -<ul> - <li>1つ、2つ、3つ、4つの {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} の値。これは角の半径を1つ設定するために使用します。</li> - <li>その後に任意で、 "/" と1つ、2つ、3つ、4つの <code><length></code> 又は <code><percentage></code> の値。これは追加の半径を設定し、楕円形の角にすることができます。</li> -</ul> + - 1 ～ 4 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値。これは角の半径を 1 つ設定するために使用します。 + - その後に任意で、 "/" と 1 ～ 4 つの `<length>` または `<percentage>` の値。これは追加の半径を設定し、楕円形の角にすることができます。 -<h3 id="Values" name="Values">値</h3> +### 値 <table> - <tbody> - <tr> - <td style="vertical-align: top;"><em>半径</em></td> - <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> - <td style="vertical-align: top;">境界の四隅に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。1つの値の構文のみで使用されます。</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>左上と右下</em></td> - <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> - <td style="vertical-align: top;">要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つの値の構文のみで使用されます。</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>右上と左下</em></td> - <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> - <td style="vertical-align: top;">要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。2つ又は3つの値の構文のみで使用されます。</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>左上</em></td> - <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> - <td style="vertical-align: top;">要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>右上</em></td> - <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> - <td style="vertical-align: top;">要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>右下</em></td> - <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> - <td style="vertical-align: top;">要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。3つ又は4つの値の構文のみで使用されます。</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>左下</em></td> - <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> - <td style="vertical-align: top;">要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} です。4つの値の構文のみで使用されます。</td> - </tr> - </tbody> + <tbody> + <tr> + <td><em>半径</em></td> + <td><img alt="all-corner.png" src="all-corner.png" /></td> + <td> + 境界の四隅に使用される半径を記述する {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。値 1 つの構文でのみ使用されます。 + </td> + </tr> + <tr> + <td><em>左上と右下</em></td> + <td> + <img alt="top-left-bottom-right.png" src="top-left-bottom-right.png" /> + </td> + <td> + 要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。値 2 つの構文でのみ使用されます。 + </td> + </tr> + <tr> + <td><em>右上と左下</em></td> + <td> + <img alt="top-right-bottom-left.png" src="top-right-bottom-left.png" /> + </td> + <td> + 要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。値 2 つまたは 3 つの構文でのみ使用されます。 + </td> + </tr> + <tr> + <td><em>左上</em></td> + <td><img alt="top-left.png" src="top-left.png" /></td> + <td> + 要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。値 3 つまたは 4 つの構文でのみ使用されます。 + </td> + </tr> + <tr> + <td><em>右上</em></td> + <td><img alt="top-right.png" src="top-right.png" /></td> + <td> + 要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。値 4 つの構文でのみ使用されます。 + </td> + </tr> + <tr> + <td><em>右下</em></td> + <td><img alt="bottom-rigth.png" src="bottom-rigth.png" /></td> + <td> + 要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。3 つまたは 4 つの値の構文でのみ使用されます。 + </td> + </tr> + <tr> + <td><em>左下</em></td> + <td><img alt="bottom-left.png" src="bottom-left.png" /></td> + <td> + 要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。値 4 つの構文でのみ使用されます。 + </td> + </tr> + </tbody> </table> -<dl> - <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> - <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。</dd> - <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> - <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。</dd> -</dl> +- {{cssxref("<length>")}} + - : 円の半径の長さ、または楕円の半長軸または半短軸の長さを、 length 値を使用して記述します。負の数は無効です。 +- {{cssxref("<percentage>")}} + - : 円の半径の長さ、または楕円の半長軸または半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。 -<p>例:</p> +例: -<pre class="brush: css">border-radius: 1em/5em; +```css +border-radius: 1em/5em; /* ... is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; -</pre> +``` -<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px; +```css +border-radius: 4px 3px 6px / 2px 4px; /* ... is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; -</pre> +``` -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 -{{csssyntax}} +{{CSSInfo}} -<h2 id="Examples" name="Examples">例</h2> +## 形式文法 -<pre style="display: inline-block; margin: 10px; border: solid 10px !important; border-radius: 10px 40px 40px 10px; width: 90%;"> border: solid 10px; - /* 境界が「D」のように描画される */ +{{csssyntax}} + +<h2 id="Examples">例</h2> + +```html hidden + <pre id="example-1"> +border: solid 10px; +border-radius: 10px 40px 40px 10px; + </pre> + <pre id="example-2"> +border: groove 1em red; +border-radius: 2em; + </pre> + <pre id="example-3"> +background: gold; +border: ridge gold; +border-radius: 13em/3em; + </pre> + <pre id="example-4"> +border: none; +border-radius: 40px 10px; +background: gold; + </pre> + <pre id="example-5"> +border: none; +border-radius: 50%; +background: burlywood; + </pre> + <pre id="example-6"> +border: dotted; +border-width: 10px 4px; +border-radius: 10px 40px; + </pre> + <pre id="example-7"> +border: dashed; +border-width: 2px 4px; +border-radius: 40px; + </pre> +``` + +```css hidden +pre { + margin: 20px; + padding: 20px; + width: 80%; + height: 80px; +} + +pre#example-1 { + border: solid 10px; border-radius: 10px 40px 40px 10px; -</pre> +} -<pre style="display: inline-block; margin: 10px; border: groove 1em red !important; border-radius: 2em; width: 90%;"> border: groove 1em red; +pre#example-2 { + border: groove 1em red; border-radius: 2em; -</pre> +} -<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold !important; border-radius: 13em/3em; width: 90%;"> background: gold; +pre#example-3 { + background: gold; border: ridge gold; border-radius: 13em/3em; -</pre> +} -<pre style="display: inline-block; margin: 10px; background: gold; border: none !important; border-radius: 40px 10px; width: 90%;"> border: none; +pre#example-4 { + border: none; border-radius: 40px 10px; -</pre> + background: gold; +} -<pre style="display: inline-block; margin: 10px; background: burlywood; border: none !important; border-radius: 50%; width: 90%;"> border: none; +pre#example-5 { + border: none; border-radius: 50%; -</pre> + background: burlywood; +} -<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px !important; border-radius: 10px 40px; width: 90%;"> border: dotted; +pre#example-6 { + border: dotted; border-width: 10px 4px; border-radius: 10px 40px; -</pre> +} -<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px !important; border-radius: 40px; width: 90%;"> border: dashed; +pre#example-7 { + border: dashed; border-width: 2px 4px; border-radius: 40px; -</pre> - -<h2 id="Live_Samples" name="Live_Samples">ライブサンプル</h2> - -<ul> - <li>例 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li> - <li>例 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li> - <li>例 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li> - <li>例 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li> - <li>例 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li> -</ul> - -<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', '#border-radius', 'border-radius')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +} +``` + +{{EmbedLiveSample("Examples", "200", "1150")}} + +### ライブサンプル + + - 例 1 : [http://jsfiddle.net/Tripad/qnGKj/2/](http://jsfiddle.net/Tripad/qnGKj/2/) + - 例 2 : [http://jsfiddle.net/Tripad/qnGKj/3/](http://jsfiddle.net/Tripad/qnGKj/3/) + - 例 3 : [http://jsfiddle.net/Tripad/qnGKj/4/](http://jsfiddle.net/Tripad/qnGKj/4/) + - 例 4 : [http://jsfiddle.net/Tripad/qnGKj/5/](http://jsfiddle.net/Tripad/qnGKj/5/) + - 例 5 : [http://jsfiddle.net/Tripad/qnGKj/6/](http://jsfiddle.net/Tripad/qnGKj/6/) + +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-radius")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>border-radius 関連 CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</li> -</ul> + - border-radius に関する CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, {{cssxref("border-end-end-radius")}} diff --git a/files/ja/web/css/border-right-color/index.md b/files/ja/web/css/border-right-color/index.md index 5f3cc19836..eb1b6b353a 100644 --- a/files/ja/web/css/border-right-color/index.md +++ b/files/ja/web/css/border-right-color/index.md @@ -3,23 +3,23 @@ title: border-right-color slug: Web/CSS/border-right-color tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-right-color translation_of: Web/CSS/border-right-color --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-right-color</code></strong> は CSS のプロパティで、要素の右側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-right")}} でも設定することができます。</p> +**`border-right-color`** は CSS のプロパティで、要素の右側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-right")}} でも設定することができます。 -<div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-right-color.html")}} -<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 language-css notranslate">/* <color> 値 */ +```css +/* <color> 値 */ border-right-color: red; border-right-color: #ffbb00; border-right-color: rgb(255, 0, 0); @@ -30,41 +30,43 @@ border-right-color: transparent; /* グローバル値 */ border-right-color: inherit; border-right-color: initial; +border-right-color: revert; border-right-color: unset; -</pre> +``` -<p><code>border-right-color</code> プロパティは1つの値で指定します。</p> +`border-right-color` プロパティは 1 つの値で指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>右の境界線の色を定義します。</dd> -</dl> +- {{cssxref("<color>")}} + - : 右の境界線の色を定義します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3> +<h3 id="A_simple_div_with_a_border">境界線が付いた単純な div</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="mybox"> - <p>これは周囲に境界線があるボックスです。 +```html +<div class="mybox"> + <p>これは周囲に境界線があるボックスです。 なお、ボックスのその辺が - <span class="redtext">赤</span>になっています。</p> -</div></pre> + <span class="redtext">赤</span>になっています。</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.mybox { +```css +.mybox { border: solid 0.3em gold; border-right-color: red; width: auto; @@ -72,44 +74,23 @@ border-right-color: unset; .redtext { color: red; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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', '#propdef-border-right-color', 'border-right-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-right-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}}.</li> - <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-left-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}}</li> - <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}} + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-left-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-top-color")}} + - 同じ境界に適用される他の境界関連の CSS プロパティ: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}} diff --git a/files/ja/web/css/border-right-style/index.md b/files/ja/web/css/border-right-style/index.md index 95b3cda12b..2141b7138b 100644 --- a/files/ja/web/css/border-right-style/index.md +++ b/files/ja/web/css/border-right-style/index.md @@ -3,27 +3,25 @@ title: border-right-style slug: Web/CSS/border-right-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-right - - border-style + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-right-style translation_of: Web/CSS/border-right-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-right-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の右側の境界 ({{cssxref("border")}}) における線の形状を設定します。</p> +**`border-right-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の右側の境界線 ({{cssxref("border")}}) の形状を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-right-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +> **Note:** 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。 -<div class="note"><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ border-right-style: none; border-right-style: hidden; border-right-style: dotted; @@ -38,41 +36,51 @@ border-right-style: outset; /* グローバル値 */ border-right-style: inherit; border-right-style: initial; +border-right-style: revert; border-right-style: unset; -</pre> +``` + +`border-right-style` プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 + +## 公式定義 -<p><code>border-right-style</code> プロパティは、 {{cssxref("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><table> - <tr> - <td class="b1">none</td> - <td class="b2">hidden</td> - <td class="b3">dotted</td> - <td class="b4">dashed</td> - </tr> - <tr> - <td class="b5">solid</td> - <td class="b6">double</td> - <td class="b7">groove</td> - <td class="b8">ridge</td> - </tr> - <tr> - <td class="b9">inset</td> - <td class="b10">outset</td> - </tr> -</table></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">/* 表の外見を定義 */ +## 例 + +<h3 id="Border_styles">境界の形状</h3> + +#### HTML + +```html +<table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table> +``` + +#### CSS + +```css +/* 表の外見を定義 */ table { border-width: 2px; background-color: #52E385; @@ -91,45 +99,22 @@ tr, td { .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} -.b10 {border-right-style: outset;}</pre> +.b10 {border-right-style: outset;} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{ EmbedLiveSample('Examples') }}</p> +{{ EmbedLiveSample('Border_styles') }} -<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-style', 'border-right-style')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>重要な変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-right-style")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>その他の形状に関する境界のプロパティ: {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }}</li> - <li>その他の左側の境界に関するプロパティ: {{ Cssxref("border-right") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-width") }}</li> -</ul> + - その他の形状に関する境界のプロパティ: {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-top-style") }}, {{ Cssxref("border-style") }} + - その他の右側の境界に関するプロパティ: {{ Cssxref("border-right") }}, {{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-width") }} diff --git a/files/ja/web/css/border-right-width/index.md b/files/ja/web/css/border-right-width/index.md index 7c7de6ab0a..771898d985 100644 --- a/files/ja/web/css/border-right-width/index.md +++ b/files/ja/web/css/border-right-width/index.md @@ -4,29 +4,27 @@ slug: Web/CSS/border-right-width tags: - CSS - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-right - - border-width + - CSS 境界 + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-right-width translation_of: Web/CSS/border-right-width --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-right-width</code></strong> プロパティは、要素の右側の境界の幅を設定します。</p> +**`border-right-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の右側の境界の幅を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-right-width.html")}} -<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">/* キーワード値 */ +```css +/* キーワード値 */ border-right-width: thin; border-right-width: medium; border-right-width: thick; -/* <length> 値 */ +/* <length> 値 */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; @@ -34,60 +32,45 @@ border-right-width: 6px; /* グローバル値 */ border-right-width: inherit; border-right-width: initial; +border-right-width: revert; border-right-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><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"> </div> - </td> - <td>細い境界線</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"> </div> - </td> - <td>中くらいの境界線</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"> </div> - </td> - <td>太い境界線</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> +``` + +### 値 + +- `<line-width>` + + - : 明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。 + + - `thin` + - `medium` + - `thick` + + > **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Comparing_border_widths">境界線の太さの比較</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div>Element 1</div> -<div>Element 2</div></pre> +```html +<div>Element 1</div> +<div>Element 2</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">div { +```css +div { border: 1px solid red; margin: 1em 0; } @@ -97,50 +80,22 @@ div:nth-child(1) { } div:nth-child(2) { border-right-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-right-width')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>目立った変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>目立った変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.border-right-width")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>他の border-width 関連 CSS プロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}}</li> - <li>他の border-right 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-right-color")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('Comparing_border_widths', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- その他の太さに関する境界の CSS プロパティ: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, {{Cssxref("border-width")}} +- 他の右側の境界に関する CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-right-color")}} diff --git a/files/ja/web/css/border-right/index.md b/files/ja/web/css/border-right/index.md index 05653b067a..625bbadca5 100644 --- a/files/ja/web/css/border-right/index.md +++ b/files/ja/web/css/border-right/index.md @@ -3,85 +3,92 @@ title: border-right slug: Web/CSS/border-right tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-right translation_of: Web/CSS/border-right --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-right</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の右側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p> +**`border-right`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)の [CSS](/ja/docs/Web/CSS) のプロパティで、要素の右側の[境界](/ja/docs/Web/CSS/border)のプロパティをすべて設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-right.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +他の一括指定プロパティと同様に、 `border-right` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・ -<p>他の一括指定プロパティと同様に、 <code>border-right</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p> - -<pre class="brush: css notranslate">border-right-style: dotted; +```css +border-right-style: dotted; border-right: thick green; -</pre> +``` -<p>・・・は、実際には以下と同じです・・・</p> +・・・は、実際には以下と同じです・・・ -<pre class="brush: css notranslate">border-right-style: dotted; +```css +border-right-style: dotted; border-right: none thick green; -</pre> +``` -<p>・・・そして、 <code>border-right</code> の前で設定された {{cssxref("border-right-style")}} の値は無視されます。 {{cssxref("border-right-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p> +・・・そして、 `border-right` の前で設定された {{cssxref("border-right-style")}} の値は無視されます。 {{cssxref("border-right-style")}} の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。 -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<ul> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-width")}}</li> -</ul> +- {{cssxref("border-right-color")}} +- {{cssxref("border-right-style")}} +- {{cssxref("border-right-width")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers notranslate">border-right: 1px; +```css +border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; -</pre> -<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p> +/* グローバル値 */ +border-right: inherit; +border-right: initial; +border-right: revert; +border-right: unset; +``` + +一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><br-width></code></dt> - <dd>{{cssxref("border-right-width")}} を参照してください。</dd> - <dt><code><br-style></code></dt> - <dd>{{cssxref("border-right-style")}} を参照してください。</dd> - <dt>{{cssxref("<color>")}}</dt> - <dd>{{cssxref("border-right-color")}} を参照してください。</dd> -</dl> +- `<br-width>` + - : {{cssxref("border-right-width")}} を参照してください。 +- `<br-style>` + - : {{cssxref("border-right-style")}} を参照してください。 +- {{cssxref("<color>")}} + - : {{cssxref("border-right-color")}} を参照してください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Applying_a_right_border" name="Applying_a_right_border">右の境界の適用</h3> +<h3 id="Applying_a_right_border">右側の境界の適用</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> +```html +<div> このボックスには右側に境界線があります。 -</div></pre> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { border-right: 4px dashed blue; background-color: gold; height: 100px; @@ -89,49 +96,22 @@ border-right: medium dashed green; font-weight: bold; text-align: center; } -</pre> - -<h4 id="Results" name="Results">結果</h4> - -<p>{{EmbedLiveSample('Applying_a_right_border')}}</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', '#propdef-border-right', 'border-right')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>直接的な変更はないが、 {{cssxref("border-right-color")}} に適用される値が変更された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>有意な変更点なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-right")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-block")}}</li> - <li>{{cssxref("outline")}}</li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_right_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("border-block")}} +- {{cssxref("outline")}} diff --git a/files/ja/web/css/border-style/index.md b/files/ja/web/css/border-style/index.md index 71c2fba756..de1dc86b8c 100644 --- a/files/ja/web/css/border-style/index.md +++ b/files/ja/web/css/border-style/index.md @@ -3,26 +3,32 @@ title: border-style slug: Web/CSS/border-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - Web - - border - - border-style - - 一括指定プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-style translation_of: Web/CSS/border-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p> <strong><code>border-style</code></strong> は <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a> の <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、要素の境界線の4辺すべての線のスタイルを設定します。</p> + **`border-style`** は [一括指定](/ja/docs/Web/CSS/Shorthand_properties) の [CSS](/ja/docs/Web/CSS) プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-style.html")}} -<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> +このプロパティは以下の CSS プロパティの一括指定です。 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +- [`border-bottom-style`](/ja/docs/Web/CSS/border-bottom-style) +- [`border-left-style`](/ja/docs/Web/CSS/border-left-style) +- [`border-right-style`](/ja/docs/Web/CSS/border-right-style) +- [`border-top-style`](/ja/docs/Web/CSS/border-top-style) + +## 構文 + +```css +/* キーワード値 */ border-style: none; border-style: hidden; border-style: dotted; @@ -46,199 +52,143 @@ border-style: none solid dotted dashed; /* グローバル値 */ border-style: inherit; border-style: initial; +border-style: revert; border-style: unset; -</pre> - -<p><code>border-style</code> プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。</p> - -<ul> - <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じスタイルが適用される。</li> - <li>値が<strong>2つ</strong>指定された場合、1つ目のスタイルは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li> - <li>値が<strong>3つ</strong>指定された場合、1つ目のスタイルは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li> - <li>値が<strong>4つ</strong>指定された場合、スタイルはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順（時計回り）に適用される。</li> -</ul> - -<p>それぞれの値は以下の一覧にあるキーワードです。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><line-style></code></dt> - <dd>枠線のスタイルを表すキーワード。以下の値を使用できます。 - <table class="standard-table"> - <tbody> - <tr> - <td style="vertical-align: middle;"><code>none</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-style: none; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;"><code>hidden</code> キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は <code>0</code> になります。テーブルのセルで境界線が collasped 形式である場合は、 <code>none</code> 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>hidden</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: hidden; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;"><code>none</code> キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は <code>0</code> になります。テーブルのセルで境界線が collasped 形式である場合は、 <code>hidden</code> 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>dotted</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dotted; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;">連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>dashed</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: dashed; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;">短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>solid</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: solid; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;">1本の直線、実線を表示します。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>double</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: double; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;">2本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>groove</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: groove; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;">凹んだように見える境界線を表示します。 <code>ridge</code> の逆です。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>ridge</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: ridge; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;">出っ張ったように見える境界線を表示します。 <code>groove</code> の逆です。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>inset</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: inset; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;">要素が埋め込まれて見える境界線を表示します。 <code>outset</code> の逆です。 {{cssxref("border-collapse")}} が <code>collapsed</code> に設定されたテーブルのセルに適用すると、この値は <code>groove</code> のようにふるまいます。</td> - </tr> - <tr> - <td style="vertical-align: middle;"><code>outset</code></td> - <td style="vertical-align: middle;"> - <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-style: outset; background-color: palegreen;">要素</div> - </td> - <td style="vertical-align: middle;"> - <p>要素が出っ張って見える境界線を表示します。 <code>inset</code> の逆です。 {{cssxref("border-collapse")}} を <code>collapsed</code> に設定したテーブルセルに適用すると、この値は <code>ridge</code> のようにふるまいます。</p> - </td> - </tr> - </tbody> - </table> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +`border-style` プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。 + + - 値が **1 つ**指定された場合、**全 4 辺**に同じスタイルが適用される。 + - 値が **2 つ**指定された場合、1 つ目のスタイルは**上下**、2 つ目は**左右**の辺に適用される。 + - 値が **3 つ**指定された場合、1 つ目のスタイルは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。 + - 値が **4 つ**指定された場合、スタイルはそれぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。 + +それぞれの値は以下の一覧にあるキーワードです。 + +### 値 + +- `<line-style>` + + - : 境界のスタイルを記述します。以下の値を使用することができます。 + + - `none` + - : `hidden` キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `none` 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。 + - `hidden` + - : `none` キーワードと同様に、境界線を表示しません。 {{cssxref("background-image")}} を設定している場合を除き、プロパティで別に指定していても {{cssxref("border-width")}} の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `hidden` 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。 + - `dotted` + - : 連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の {{cssxref("border-width")}} の計算値の半分です。 + - `dashed` + - : 短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。 + - `solid` + - : 1 本の直線、実線を表示します。 + - `double` + - : 2 本の直線を表示し、幅の合計は {{cssxref("border-width")}} で定義したピクセル数になります。 + - `groove` + - : 凹んだように見える境界線を表示します。 `ridge` の逆です。 + - `ridge` + - : 出っ張ったように見える境界線を表示します。 `groove` の逆です。 + - `inset` + - : 要素が埋め込まれて見える境界線を表示します。 `outset` の逆です。 {{cssxref("border-collapse")}} が `collapsed` に設定されたテーブルのセルに適用すると、この値は `groove` のようにふるまいます。 + - `outset` + - : 要素が出っ張って見える境界線を表示します。 `inset` の逆です。 {{cssxref("border-collapse")}} を `collapsed` に設定したテーブルセルに適用すると、この値は `ridge` のようにふるまいます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">プロパティのすべての値を指定したテーブル</h3> - -<p>プロパティのすべての値のサンプルです。</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><table> - <tr> - <td class="b1">none</td> - <td class="b2">hidden</td> - <td class="b3">dotted</td> - <td class="b4">dashed</td> - </tr> - <tr> - <td class="b5">solid</td> - <td class="b6">double</td> - <td class="b7">groove</td> - <td class="b8">ridge</td> - </tr> - <tr> - <td class="b9">inset</td> - <td class="b10">outset</td> - </tr> -</table></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">/* テーブルの外見を定義 */ -table { - border-width: 3px; - background-color: #52E396; -} -tr, td { - padding: 2px; +## 例 + +<h3 id="All_property_values">プロパティのすべての値</h3> + +プロパティのすべての値のサンプルです。 + +#### HTML + +```html +<pre class="b1">none</pre> +<pre class="b2">hidden</pre> +<pre class="b3">dotted</pre> +<pre class="b4">dashed</pre> +<pre class="b5">solid</pre> +<pre class="b6">double</pre> +<pre class="b7">groove</pre> +<pre class="b8">ridge</pre> +<pre class="b9">inset</pre> +<pre class="b10">outset</pre> +``` + +#### CSS + +```css +pre { + height: 80px; + width: 120px; + margin: 20px; + padding: 20px; + display: inline-block; + background-color: palegreen; + border-width: 5px; + box-sizing: border-box; } /* border-style の例示用クラス */ -.b1 {border-style:none;} -.b2 {border-style:hidden;} -.b3 {border-style:dotted;} -.b4 {border-style:dashed;} -.b5 {border-style:solid;} -.b6 {border-style:double;} -.b7 {border-style:groove;} -.b8 {border-style:ridge;} -.b9 {border-style:inset;} -.b10 {border-style:outset;}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Table_with_all_property_values', 300, 200)}}</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', '#border-style', 'border-style')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td><code>hidden</code> キーワードを追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-style")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}</li> -</ul> +.b1 { + border-style: none; +} + +.b2 { + border-style: hidden; +} + +.b3 { + border-style: dotted; +} + +.b4 { + border-style: dashed; +} + +.b5 { + border-style: solid; +} + +.b6 { + border-style: double; +} + +.b7 { + border-style: groove; +} + +.b8 { + border-style: ridge; +} + +.b9 { + border-style: inset; +} + +.b10 { + border-style: outset; +} +``` + +### 結果 + +{{EmbedLiveSample('All_property_values', "1200", 450)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}} diff --git a/files/ja/web/css/border-top-color/index.md b/files/ja/web/css/border-top-color/index.md index c48e869704..301c5e65e4 100644 --- a/files/ja/web/css/border-top-color/index.md +++ b/files/ja/web/css/border-top-color/index.md @@ -3,23 +3,23 @@ title: border-top-color slug: Web/CSS/border-top-color tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-color translation_of: Web/CSS/border-top-color --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-top-color</code></strong> は CSS のプロパティで、要素の上側の<a href="/ja/docs/Web/CSS/border">境界線</a>の色を設定します。</span>一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-top")}} でも設定することができます。</p> +**`border-top-color`** は CSS のプロパティで、要素の上側の[境界線](/ja/docs/Web/CSS/border)の色を設定します。一括指定プロパティの {{cssxref("border-color")}} または {{cssxref("border-top")}} でも設定することができます。 -<div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-top-color.html")}} -<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 language-css notranslate">/* <color> 値 */ +```css +/* <color> 値 */ border-top-color: red; border-top-color: #ffbb00; border-top-color: rgb(255, 0, 0); @@ -30,41 +30,43 @@ border-top-color: transparent; /* グローバル値 */ border-top-color: inherit; border-top-color: initial; +border-top-color: revert; border-top-color: unset; -</pre> +``` -<p><code>border-top-color</code> プロパティは1つの値で指定します。</p> +`border-top-color` プロパティは 1 つの値で指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>上の境界線の色を定義します。</dd> -</dl> +- {{cssxref("<color>")}} + - : 上の境界線の色を定義します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="A_simple_div_with_a_border" name="A_simple_div_with_a_border">境界線が付いた単純な div</h3> +<h3 id="A_simple_div_with_a_border">境界線が付いた単純な div</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="mybox"> - <p>これは周囲に境界線があるボックスです。 +```html +<div class="mybox"> + <p>これは周囲に境界線があるボックスです。 なお、ボックスのその辺が - <span class="redtext">赤</span>になっています。</p> -</div></pre> + <span class="redtext">赤</span>になっています。</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.mybox { +```css +.mybox { border: solid 0.3em gold; border-top-color: red; width: auto; @@ -72,44 +74,23 @@ border-top-color: unset; .redtext { color: red; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('A_simple_div_with_a_border')}}</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', '#border-top-color', 'border-top-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>目立った変更はないが、<code>transparent</code> キーワードが {{cssxref("<color>")}} 含められたので、形式的には削除された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-top-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}.</li> - <li>他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}</li> - <li>同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('A_simple_div_with_a_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 境界に関する CSS 一括指定プロパティ: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}. + - 他の境界線の色に関する CSS プロパティ: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}} + - 同じ境界線に適用される他の境界関連の CSS プロパティ: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}} diff --git a/files/ja/web/css/border-top-left-radius/border-radius.png b/files/ja/web/css/border-top-left-radius/border-radius.png Binary files differnew file mode 100644 index 0000000000..e1a87afd27 --- /dev/null +++ b/files/ja/web/css/border-top-left-radius/border-radius.png diff --git a/files/ja/web/css/border-top-left-radius/index.md b/files/ja/web/css/border-top-left-radius/index.md index 9db850becf..75abd9f95d 100644 --- a/files/ja/web/css/border-top-left-radius/index.md +++ b/files/ja/web/css/border-top-left-radius/index.md @@ -3,166 +3,159 @@ title: border-top-left-radius slug: Web/CSS/border-top-left-radius tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - border-radius - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-left-radius translation_of: Web/CSS/border-top-left-radius --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>border-top-left-radius</code></strong> プロパティは、要素の左上の角を丸めます。</p> +**`border-top-left-radius`** は [CSS](/en-US/docs/Web/CSS) のプロパティは、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の左上の角を丸くします。 -<div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。 -<p>丸みは円又は楕円にすることができ、値のうちの一つが <code>0</code> であれば、丸めは行われずに角は四角くなります。</p> + -<div style="text-align: center;"><img alt="border-radius.png" class="default internal" src="/@api/deki/files/6132/=border-radius.png"></div> +背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -<p>背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。</p> +> **Note:** このプロパティの値が `border-top-left-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 -<div class="note">このプロパティの値が <code>border-top-left-radius</code> プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* 角を円にする */ -/* border-top-left-radius: <em>radius</em> */ +```css +/* 角を円にする */ +/* border-top-left-radius: radius */ border-top-left-radius: 3px; /* 角を楕円にする */ -/* border-top-left-radius: <em>horizontal</em> <em>vertical</em> */ +/* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; -</pre> -<p>値１つで指定する場合:</p> +/* グローバル値 */ +border-top-left-radius: inherit; +border-top-left-radius: initial; +border-top-left-radius: revert; +border-top-left-radius: unset; +``` + +値 1 つで指定する場合: + + - 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。 + +値 2 つで指定する場合: -<ul> - <li>値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。</li> -</ul> + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。 + - 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。 -<p>値２つで指定する場合:</p> +### 値 -<ul> - <li>最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。</li> - <li>最初の値は {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。</li> -</ul> +- `<length-percentage>` + - : 円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code><length-percentage></code></dt> - <dd>円の半径又は楕円の長半径及び短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。</dd> -</dl> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>ライブ例</th> - <th>コード</th> - </tr> - </thead> - <tbody> - <tr> - <td style="padding: 1.5em;"> - <div id="circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 40px; width: 100px; height: 100px;"> </div> - </td> - <td>境界として使用されている円弧 - <pre class="brush:css"> +## 例 + +<h3 id="Arc_of_a_circle">円弧</h3> + +単一の `<length>` 値は円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { - border-top-left-radius: 40px 40px; + border-top-left-radius: 40px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div id="ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40px 20px; width: 100px; height: 100px;"> </div> - </td> - <td>境界として使用されている楕円の弧 - <pre class="brush:css"> +``` + +{{EmbedLiveSample("Arc_of_a_circle")}} + +<h3 id="Arc_of_an_ellipse">楕円弧</h3> + +2 つの異なる `<length>` 値は楕円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-top-left-radius: 40px 20px; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div id="square-box-circle-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div> - </td> - <td>ボックスは正方形。境界として使用されている円弧 - <pre class="brush: css"> +``` + +{{EmbedLiveSample("Arc_of_an_ellipse")}} + +<h3 id="Square_element_with_percentage_radius">パーセント値で丸みをつけた正方形の要素</h3> + +正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-top-left-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 100px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div id="not-square-ellipse-arc" style="background-color: lightgreen; border: solid 1px black; border-top-left-radius: 40%; width: 100px; height: 200px;"> </div> - </td> - <td>ボックスは正方形ではない。境界として使用されている楕円の弧 - <pre class="brush: css"> +``` + +{{EmbedLiveSample("Square_element_with_percentage_radius")}} + +<h3 id="Non-square_element_with_percentage_radius">パーセント値で丸みをつけた長方形の要素</h3> + +正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円弧を生成します。 + +```html hidden +<div></div> +``` + +```css div { border-top-left-radius: 40%; + background-color: lightgreen; + border: solid 1px black; + width: 200px; + height: 100px; } -</pre> - </td> - </tr> - <tr> - <td style="padding: 1.5em;"> - <div id="clipped-border" style="background-color: rgb(250,20,70); background-clip: content-box; border: double 3px black; border-top-left-radius: 40%; width: 100px; height: 100px;"> </div> - </td> - <td>背景色は境界で切り取られる - <pre class="brush: css"> -div { - border-top-left-radius:40%; - border-style: black 3px double; - background-color: rgb(250,20,70); - background-clip: content-box; -} -</pre> - </td> - </tr> - </tbody> -</table> - -<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-radius', 'border-top-left-radius')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.border-top-left-radius")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<p>CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</p> +``` + +{{EmbedLiveSample("Non-square_element_with_percentage_radius")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +CSS の border-radius に関するプロパティ: 一括指定の {{cssxref("border-radius")}}, 他の角のための {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} diff --git a/files/ja/web/css/border-top-right-radius/index.md b/files/ja/web/css/border-top-right-radius/index.md index 049d638c2b..857f59b47a 100644 --- a/files/ja/web/css/border-top-right-radius/index.md +++ b/files/ja/web/css/border-top-right-radius/index.md @@ -22,7 +22,7 @@ translation_of: Web/CSS/border-top-right-radius 画像または単色が背景になっている場合、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。 -> **Note:** このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>によって初期値にリセットされます。 +> **Note:** このプロパティの値が `border-top-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。 ## 構文 diff --git a/files/ja/web/css/border-top-style/index.md b/files/ja/web/css/border-top-style/index.md index c09d194a88..a2f2833b05 100644 --- a/files/ja/web/css/border-top-style/index.md +++ b/files/ja/web/css/border-top-style/index.md @@ -3,29 +3,25 @@ title: border-top-style slug: Web/CSS/border-top-style tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-style - - border-top + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-style translation_of: Web/CSS/border-top-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-top-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の上側の境界 ({{CSSxRef("border")}}) における線の形状を設定します。</p> +**`border-top-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の上側の境界 ({{CSSxRef("border")}}) における線の形状を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-top-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +> **Note:** 仕様書では、異なる形状の境界線を角でどのように接続するかを定義していません。 -<div class="blockIndicator note"> -<p><strong>メモ:</strong> 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。</p> -</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; @@ -40,41 +36,51 @@ border-top-style: outset; /* グローバル値 */ border-top-style: inherit; border-top-style: initial; +border-top-style: revert; border-top-style: unset; -</pre> +``` + +`border-top-style` プロパティは、 {{CSSxRef("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。 + +## 公式定義 -<p><code>border-top-style</code> プロパティは、 {{CSSxRef("border-style")}} プロパティで利用できるキーワードのうちの一つで指定します。</p> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><table> - <tr> - <td class="b1">none</td> - <td class="b2">hidden</td> - <td class="b3">dotted</td> - <td class="b4">dashed</td> - </tr> - <tr> - <td class="b5">solid</td> - <td class="b6">double</td> - <td class="b7">groove</td> - <td class="b8">ridge</td> - </tr> - <tr> - <td class="b9">inset</td> - <td class="b10">outset</td> - </tr> -</table></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">/* 表の外見を定義 */ +<h2 id="Examples">例</h2> + +### border-top-style の設定 + +#### HTML + +```html +<table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table> +``` + +#### CSS + +```css +/* 表の外見を定義 */ table { border-width: 2px; background-color: #52E385; @@ -93,45 +99,22 @@ tr, td { .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} -.b10 {border-top-style: outset;}</pre> +.b10 {border-top-style: outset;} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Examples', 300, 200)}}</p> +{{EmbedLiveSample('Examples', 300, 200)}} -<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-style', 'border-top-style')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>重要な変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{CSSInfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-top-style")}}</p> +{{Compat}} -<h2 id="See_Also" name="See_Also">関連情報</h2> +## 関連情報 -<ul> - <li>その他の形状に関する境界のプロパティ: {{CSSxRef("border-left-style")}}, {{CSSxRef("border-right-style")}}, {{CSSxRef("border-bottom-style")}}, {{CSSxRef("border-style")}}</li> - <li>その他の左側の境界に関するプロパティ: {{CSSxRef("border-top")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-top-width")}}</li> -</ul> + - その他の形状に関する境界のプロパティ: {{CSSxRef("border-left-style")}}, {{CSSxRef("border-right-style")}}, {{CSSxRef("border-bottom-style")}}, {{CSSxRef("border-style")}} + - その他の左側の境界に関するプロパティ: {{CSSxRef("border-top")}}, {{CSSxRef("border-top-color")}}, {{CSSxRef("border-top-width")}} diff --git a/files/ja/web/css/border-top-width/index.md b/files/ja/web/css/border-top-width/index.md index 17c8a7b095..0a68bec4db 100644 --- a/files/ja/web/css/border-top-width/index.md +++ b/files/ja/web/css/border-top-width/index.md @@ -3,30 +3,28 @@ title: border-top-width slug: Web/CSS/border-top-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference - - border - - border-top - - border-width + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-top-width translation_of: Web/CSS/border-top-width --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-top-width</code></strong> プロパティは、要素の上側の境界の幅を設定します。</p> +**`border-top-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の上側の境界の幅を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-top-width.html")}} -<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">/* キーワード値 */ +```css +/* キーワード値 */ border-top-width: thin; border-top-width: medium; border-top-width: thick; -/* <length> 値 */ +/* <length> 値 */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; @@ -34,60 +32,43 @@ border-top-width: 6px; /* グローバルキーワード */ border-top-width: inherit; border-top-width: initial; +border-top-width: revert; border-top-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><code>thin</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"> </div> - </td> - <td>細い境界線</td> - </tr> - <tr> - <td><code>medium</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"> </div> - </td> - <td>中くらいの境界線</td> - </tr> - <tr> - <td><code>thick</code></td> - <td> - <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"> </div> - </td> - <td>太い境界線</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> +``` + +### 値 + +- `<line-width>` + + - : 境界の幅を、明示的な非負の {{cssxref("<length>")}} またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。 + + - `thin` + - `medium` + - `thick` + + > **Note:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れかを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div>Element 1</div> -<div>Element 2</div></pre> +```html +<div>Element 1</div> +<div>Element 2</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">div { +```css +div { border: 1px solid red; margin: 1em 0; } @@ -97,50 +78,22 @@ div:nth-child(1) { } div:nth-child(2) { border-top-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-top-width')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>目立った変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>目立った変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-left-width', 'border-top-width')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.border-top-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-bottom-width")}}, {{Cssxref("border-width")}}</li> - <li>他の border-top 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-top-color")}}</li> -</ul> +} +``` + +### 結果 + +{{EmbedLiveSample('Examples', '100%')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + + - 他の border-width 関連 CSS プロパティ: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, {{Cssxref("border-width")}} + - 他の border-top 関連 CSS プロパティ: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, {{Cssxref("border-top-color")}} diff --git a/files/ja/web/css/border-top/index.md b/files/ja/web/css/border-top/index.md index 2b5ce0aaa7..a329beca7a 100644 --- a/files/ja/web/css/border-top/index.md +++ b/files/ja/web/css/border-top/index.md @@ -3,85 +3,92 @@ title: border-top slug: Web/CSS/border-top tags: - CSS - - CSS Borders - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-top translation_of: Web/CSS/border-top --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>border-top</code></strong> は<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>の <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の上側の<a href="/ja/docs/Web/CSS/border">境界</a>のプロパティをすべて設定します。</span></p> +**`border-top`** は[一括指定](/ja/docs/Web/CSS/Shorthand_properties)の [CSS](/ja/docs/Web/CSS) のプロパティで、要素の上側の[境界](/ja/docs/Web/CSS/border)のプロパティをすべて設定します。</span> -<div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-top.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +他の一括指定プロパティと同様に、 `border-top` は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・ -<p>他の一括指定プロパティと同様に、 <code>border-top</code> は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・</p> - -<pre class="brush: css notranslate">border-top-style: dotted; +```css +border-top-style: dotted; border-top: thick green; -</pre> +``` -<p>・・・は、実際には以下と同じです・・・</p> +・・・は、実際には以下と同じです・・・ -<pre class="brush: css notranslate">border-top-style: dotted; +```css +border-top-style: dotted; border-top: none thick green; -</pre> +``` -<p>・・・そして、 <code>border-top</code> の前で設定された {{cssxref("border-top-style")}} の値は無視されます。 {{cssxref("border-top-style")}} の既定値は <code>none</code> なので、 <code>border-style</code> の部分の設定は境界線なしとなります。</p> +・・・そして、 `border-top` の前で設定された {{cssxref("border-top-style")}} の値は無視されます。 {{cssxref("border-top-style")}} の既定値は `none` なので、 `border-style` の部分の設定は境界線なしとなります。 -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +## 構成要素のプロパティ -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<ul> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-width")}}</li> -</ul> +- [`border-top-color`](/ja/docs/Web/CSS/border-top-color) +- [`border-top-style`](/ja/docs/Web/CSS/border-top-style) +- [`border-top-width`](/ja/docs/Web/CSS/border-top-width) -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers notranslate">border-top: 1px; +```css +border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; -</pre> -<p>一括指定プロパティの3つの値は任意の順序で指定可能で、また、1つまたは2つの値を省略することができます。</p> +/* グローバル値 */ +border-top: inherit; +border-top: initial; +border-top: revert; +border-top: unset; +``` + +一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code><br-width></code></dt> - <dd>{{cssxref("border-top-width")}} を参照してください。</dd> - <dt><code><br-style></code></dt> - <dd>{{cssxref("border-top-style")}} を参照してください。</dd> - <dt>{{cssxref("<color>")}}</dt> - <dd>{{cssxref("border-top-color")}} を参照してください。</dd> -</dl> +- `<br-width>` + - : {{cssxref("border-top-width")}} を参照してください。 +- `<br-style>` + - : {{cssxref("border-top-style")}} を参照してください。 +- {{cssxref("<color>")}} + - : {{cssxref("border-top-color")}} を参照してください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Applying_a_top_border" name="Applying_a_top_border">上側の境界の適用</h3> +<h3 id="Applying_a_top_border">上側の境界の適用</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> +```html +<div> このボックスには上側に境界線があります。 -</div></pre> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { border-top: 4px dashed blue; background-color: gold; height: 100px; @@ -89,49 +96,22 @@ border-top: medium dashed green; font-weight: bold; text-align: center; } -</pre> - -<h4 id="Results" name="Results">結果</h4> - -<p>{{EmbedLiveSample('Applying_a_top_border')}}</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', '#propdef-border-top', 'border-top')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>直接的な変更はないが、 {{cssxref("border-top-color")}} に適用される値が変更された。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>有意な変更点なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-top")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-block")}}</li> - <li>{{cssxref("outline")}}</li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample('Applying_a_top_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`border`](/ja/docs/Web/CSS/border) +- [`border-block`](/ja/docs/Web/CSS/border-block) +- [`outline`](/ja/docs/Web/CSS/outline) diff --git a/files/ja/web/css/border-width/index.md b/files/ja/web/css/border-width/index.md index 195e20171c..18f8653364 100644 --- a/files/ja/web/css/border-width/index.md +++ b/files/ja/web/css/border-width/index.md @@ -3,9 +3,9 @@ title: border-width slug: Web/CSS/border-width tags: - CSS + - CSS 境界 - CSS プロパティ - - CSS 背景と境界 - - Reference + - リファレンス - recipe:css-shorthand-property browser-compat: css.properties.border-width translation_of: Web/CSS/border-width diff --git a/files/ja/web/css/border/index.md b/files/ja/web/css/border/index.md index f6ad647ad0..4858e13bf9 100644 --- a/files/ja/web/css/border/index.md +++ b/files/ja/web/css/border/index.md @@ -3,36 +3,34 @@ title: border slug: Web/CSS/border tags: - CSS - - CSS Borders - - CSS Shorthand property - - Layout - - Reference - - 'recipe:css-shorthand-property' + - CSS 境界 + - CSS 一括指定プロパティ + - レイアウト + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border translation_of: Web/CSS/border --- -<div>{{CSSRef("CSS Borders")}}</div> +{{CSSRef("CSS Borders")}} -<p><span class="seoSummary"><strong><code>border</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、要素の境界を設定します。</span>これは {{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}} の値を設定します。</p> +**`border`** は [CSS](/ja/docs/Web/CSS) の [一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、要素の境界を設定します。これは {{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}} の値を設定します。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div> +{{EmbedInteractiveExample("pages/css/border.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構成要素のプロパティ -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> + - {{cssxref("border-color")}} + - {{cssxref("border-style")}} + - {{cssxref("border-width")}} -<ul> - <li>{{cssxref("border-color")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-width")}}</li> -</ul> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* 種類 */ +```css +/* 種類 */ border: solid; /* 幅 | 種類 */ @@ -48,60 +46,56 @@ border: medium dashed green; border: inherit; border: initial; border: unset; -</pre> +``` -<p><code>border</code> プロパティは、以下に挙げる値の1～3つを使用して指定します。値の順序は関係ありません。</p> +`border` プロパティは、以下に挙げる値の 1 ～ 3 つを使用して指定します。値の順序は関係ありません。 -<div class="note"> -<p><strong>注:</strong> style が指定されていない場合は境界線は表示されません。 style の既定値が <code>none</code> だからです。</p> -</div> +> **Note:** style が指定されていない場合は境界線は表示されません。 style の既定値が `none` だからです。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt id="<line-width>"><code><line-width></code></dt> - <dd>境界線の太さを設定します。指定されなかった場合は既定値の <code>medium</code> になります。 {{cssxref("border-width")}} を参照してください。</dd> - <dt id="<line-style>"><code><line-style></code></dt> - <dd>境界線の種類を設定します。指定されなかった場合は既定値の <code>none</code> になります。 {{cssxref("border-style")}} を参照してください。</dd> - <dt id="<color>">{{cssxref("<color>")}}</dt> - <dd>境界線の色を設定します。指定されなかった場合は既定値で要素の {{cssxref("color")}} プロパティになります。 {{cssxref("border-color")}} を参照してください。</dd> -</dl> +- `<line-width>` + - : 境界線の太さを設定します。指定されなかった場合は既定値の `medium` になります。 {{cssxref("border-width")}} を参照してください。 +- `<line-style>` + - : 境界線の種類を設定します。指定されなかった場合は既定値の `none` になります。 {{cssxref("border-style")}} を参照してください。 +- {{cssxref("<color>")}} + - : 境界線の色を設定します。指定されなかった場合は既定値で要素の {{cssxref("color")}} プロパティになります。 {{cssxref("border-color")}} を参照してください。 -<h2 id="Description" name="Description">解説</h2> +## 解説 -<p>他の一括指定プロパティと同様、省略された部分値は<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に設定されます。重要なことですが、 <code>border</code> は {{cssxref("border-image")}} のカスタム値を指定することができず、初期値、つまり <code>none</code> に設定します。</p> +他の一括指定プロパティと同様、省略された部分値は[初期値](/ja/docs/Web/CSS/initial_value)に設定されます。重要なことですが、 `border` は {{cssxref("border-image")}} のカスタム値を指定することができず、初期値、つまり `none` に設定します。 -<p><code>border</code> による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の {{cssxref("border-width")}}、 {{cssxref("border-style")}}、 {{cssxref("border-color")}} プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 ({{cssxref("border-top")}} など) や論理的 ({{cssxref("border-block-start")}} など) な境界線プロパティを使用することもできます。</p> +`border` による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の {{cssxref("border-width")}}、 {{cssxref("border-style")}}、 {{cssxref("border-color")}} プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 ({{cssxref("border-top")}} など) や論理的 ({{cssxref("border-block-start")}} など) な境界線プロパティを使用することもできます。 -<h3 id="Borders_vs._outlines" name="Borders_vs._outlines">境界線と輪郭線</h3> +### 境界線と輪郭線 -<p>境界線と<a href="/ja/docs/Web/CSS/outline">輪郭線</a>はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。</p> +境界線と[輪郭線](/ja/docs/Web/CSS/outline)はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。 -<ul> - <li>輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。</li> - <li>輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。</li> -</ul> + - 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。 + - 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="ピンク色の出っ張った境界の設定">ピンク色の出っ張った境界の設定</h3> +<h3 id="Setting_a_pink_outset_border">ピンク色の出っ張った境界の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div> -</pre> +```html +<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; @@ -110,42 +104,25 @@ border: unset; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Setting_a_pink_outset_border')}}</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-shorthands', 'border')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td><code>transparent</code> の<em>特別</em>扱いを廃止し、有効な {{cssxref("<color>")}} とした。実質的な影響はない。<br> - 一括指定を使用してカスタム値を設定することはできないため、 <code>border</code> は {{cssxref("border-image")}} を初期値 (<code>none</code>) にリセットするようになった。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td><code>inherit</code> キーワードを受け付けるようになった。また、<code>transparent</code> を有効な色として受けつけるようになった。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border', 'border')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border")}}</p> +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_a_pink_outset_border')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("border-width")}} +- {{Cssxref("border-style")}} +- {{Cssxref("border-color")}} +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) |
