From 60367cb41ff3291f2d5c1a03feeb26645c7cd336 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 16 Nov 2021 23:03:12 +0900 Subject: CSS 論理的プロパティのボックスモデルのプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/border-block/index.html | 120 ------------------------------- 1 file changed, 120 deletions(-) delete mode 100644 files/ja/web/css/border-block/index.html (limited to 'files/ja/web/css/border-block/index.html') diff --git a/files/ja/web/css/border-block/index.html b/files/ja/web/css/border-block/index.html deleted file mode 100644 index f5b1d65978..0000000000 --- a/files/ja/web/css/border-block/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: border-block -slug: Web/CSS/border-block -tags: - - CSS - - CSS Logical Property - - CSS Property - - CSS プロパティ - - CSS 論理的プロパティ - - Experimental - - Non-standard - - Reference - - 'recipe:css-shorthand-property' -browser-compat: css.properties.border-block -translation_of: Web/CSS/border-block ---- -
{{CSSRef}}
- -

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

- -
{{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")}} の両方を設定することができます。

- -

構成要素のプロパティ

- -

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

- - - -

構文

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

値

- -

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

- -
-
<'border-width'>
-
境界の幅です。 {{cssxref("border-width")}} を参照してください。
-
<'border-style'>
-
境界線のスタイルです。 {{cssxref("border-style")}} を参照してください。
-
<'color'>
-
境界線の色です。 {{cssxref("color")}} を参照してください。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

縦書きテキストの境界

- -

HTML

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

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  border-block: 5px dashed blue;
-}
- -

結果

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf