From 78c6f95babcbd721529f3c5301cc4490ee7bc84b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 18 Jun 2021 02:55:18 +0900 Subject: Web/CSS/border-block を更新 (#1132) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/20 時点の英語版に同期 --- files/ja/web/css/border-block/index.html | 62 ++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 22 deletions(-) (limited to 'files/ja/web/css/border-block') diff --git a/files/ja/web/css/border-block/index.html b/files/ja/web/css/border-block/index.html index 2bbe8ffd24..f5b1d65978 100644 --- a/files/ja/web/css/border-block/index.html +++ b/files/ja/web/css/border-block/index.html @@ -8,29 +8,41 @@ tags: - CSS プロパティ - CSS 論理的プロパティ - Experimental + - Non-standard - Reference + - 'recipe:css-shorthand-property' +browser-compat: css.properties.border-block translation_of: Web/CSS/border-block --- -
{{CSSRef}}{{SeeCompatTable}}
+
{{CSSRef}}
-

The border-block は CSS のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの1ヶ所で設定する一括指定プロパティです。

+

The border-block は CSS のプロパティで、論理的なブロック方向のそれぞれの境界プロパティをスタイルシートの 1 ヶ所で設定する一括指定プロパティです。

-
border-block: 1px;
-border-block: 2px dotted;
-border-block: medium dashed blue;
-
+
{{EmbedInteractiveExample("pages/css/border-block.html")}}

border-block は {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, {{cssxref("border-block-color")}} のうちの1つ以上の値を、インライン方向の先頭側と末尾側の両方に対して一度に設定するために使用することができます。割り当て先の物理的な境界は、要素の書字方向によって決まります。 {{cssxref("border-top")}} と {{cssxref("border-bottom")}}、または {{cssxref("border-right")}} と {{cssxref("border-left")}} のどちらかの組み合わせに対して、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} に設定された値に応じて対応付けられます。

他の方向の境界については、 {{cssxref("border-inline")}} によって、 {{cssxref("border-inline-start")}} と {{cssxref("border-inline-end")}} の両方を設定することができます。

-

{{cssinfo}}

+

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

-

構文

+ -

値

+

構文

-

border-block は以下の値のうちの1つ以上を任意の順序で指定します。

+
border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+ +

値

+ +

border-block は以下の値のうちの 1 つ以上を任意の順序で指定します。

<'border-width'>
@@ -38,23 +50,29 @@ border-block: medium dashed blue;
<'border-style'>
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
<'color'>
-
境界の色です。 {{cssxref("color")}} を参照してください。
+
境界線の色です。 {{cssxref("color")}} を参照してください。
-

形式文法

+

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

{{csssyntax}} -

例

+

例

-

HTML

+

縦書きテキストの境界

+ +

HTML

<div>
   <p class="exampleText">Example text</p>
 </div>
-

CSS

+

CSS

div {
   background-color: yellow;
@@ -67,9 +85,11 @@ border-block: medium dashed blue;
   border-block: 5px dashed blue;
 }
-

{{EmbedLiveSample("Example", 140, 140)}}

+

結果

+ +

{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}}

-

仕様書

+

仕様書

@@ -88,13 +108,11 @@ border-block: medium dashed blue;
-

ブラウザーの互換性

- - +

ブラウザーの互換性

-

{{Compat("css.properties.border-block")}}

+

{{Compat}}

-

関連情報

+

関連情報