From 7f9cc6de0a0d289fc95597089260abcdb5abcf8e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 16 Nov 2021 22:52:26 +0900 Subject: CSS 論理的プロパティの寸法のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/14 時点の英語版に同期 --- files/ja/web/css/block-size/index.md | 93 ++++++++++++++++-------------------- 1 file changed, 40 insertions(+), 53 deletions(-) (limited to 'files/ja/web/css/block-size/index.md') diff --git a/files/ja/web/css/block-size/index.md b/files/ja/web/css/block-size/index.md index d73e9cdf72..673cede837 100644 --- a/files/ja/web/css/block-size/index.md +++ b/files/ja/web/css/block-size/index.md @@ -3,30 +3,30 @@ title: block-size slug: Web/CSS/block-size tags: - CSS - - CSS Logical Property - - CSS Property + - CSS 論理的プロパティ + - CSS プロパティ - Experimental - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.block-size translation_of: Web/CSS/block-size --- -
{{CSSRef}}
+{{CSSRef}} -

block-size は CSS のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは {{cssxref("width")}} または {{cssxref("height")}} プロパティに相当し、 {{cssxref("writing-mode")}} の値によって変わります。

+**`block-size`** は [CSS](/ja/docs/Web/CSS) のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは {{cssxref("width")}} または {{cssxref("height")}} プロパティに相当し、 {{cssxref("writing-mode")}} の値によって変わります。 -

書字方向が垂直方向であった場合、 block-size の値は要素の幅に対応し、水平方向であった場合は要素の高さに対応します。関連プロパティの {{cssxref("inline-size")}} が要素のもう一方の寸法を定義します。

+書字方向が垂直方向であった場合、 `block-size` の値は要素の幅に対応し、水平方向であった場合は要素の高さに対応します。関連プロパティの {{cssxref("inline-size")}} が要素のもう一方の寸法を定義します。 -
{{EmbedInteractiveExample("pages/css/block-size.html")}}
+{{EmbedInteractiveExample("pages/css/block-size.html")}} - +## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 block-size: 300px;
 block-size: 25em;
 
-/* <percentage> 値 */
+/*  値 */
 block-size: 75%;
 
 /* キーワード値 */
@@ -38,68 +38,55 @@ block-size: auto;
 /* グローバル値 */
 block-size: inherit;
 block-size: initial;
+block-size: revert;
 block-size: unset;
-
+``` -

値

+### 値 -

block-size プロパティは、{{cssxref("width")}} や {{cssxref("height")}} プロパティと同じ値を取ります。

+`block-size` プロパティは、{{cssxref("width")}} や {{cssxref("height")}} プロパティと同じ値を取ります。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

縦書き時のブロック方向の寸法

+

縦書き時のブロック方向の寸法

-

HTML

+#### HTML -
<p class="exampleText">Example text</p>
-
+```html +

Example text

+``` -

CSS

+#### CSS -
.exampleText {
+```css
+.exampleText {
   writing-mode: vertical-rl;
   background-color: yellow;
   block-size: 200px;
-}
+} +``` -

Result

+#### 結果 -

{{EmbedLiveSample("Block_size_with_vertical_text")}}

+{{EmbedLiveSample("Block_size_with_vertical_text")}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- 対応付けされる物理的プロパティ: {{cssxref("width")}} および {{cssxref("height")}} +- {{cssxref("writing-mode")}} -- cgit v1.2.3-54-g00ecf