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/max-inline-size/index.md | 93 +++++++++++++------------------ 1 file changed, 40 insertions(+), 53 deletions(-) (limited to 'files/ja/web/css/max-inline-size') diff --git a/files/ja/web/css/max-inline-size/index.md b/files/ja/web/css/max-inline-size/index.md index 05189f14c3..6f7b123f69 100644 --- a/files/ja/web/css/max-inline-size/index.md +++ b/files/ja/web/css/max-inline-size/index.md @@ -4,34 +4,34 @@ slug: Web/CSS/max-inline-size tags: - CSS - CSS Logical Properties - - CSS Logical Property - - CSS Property + - CSS 論理的プロパティ + - CSS プロパティ - Element size - Experimental - - Reference + - リファレンス - Text Direction - Writing Mode - max-inline-size - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.max-inline-size translation_of: Web/CSS/max-inline-size --- -
{{CSSRef}}
+{{CSSRef}} -

max-inline-size は CSS のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。

+**`max-inline-size`** は [CSS](/ja/docs/Web/CSS) のプロパティで、書字方向に応じて要素ブロックの水平または垂直方向の最大の寸法を定義します。これは {{cssxref("max-width")}} または {{cssxref("max-height")}} のどちらかのプロパティと、 {{cssxref("writing-mode")}} の値に応じて対応します。 -

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

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

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 max-inline-size: 300px;
 max-inline-size: 25em;
 
-/* <percentage> 値 */
+/*  値 */
 max-inline-size: 75%;
 
 /* キーワード値 */
@@ -43,69 +43,56 @@ max-inline-size: fit-content(20em);
 /* グローバル値 */
 max-inline-size: inherit;
 max-inline-size: initial;
+max-inline-size: revert;
 max-inline-size: unset;
-
+``` -

値

+### 値 -

max-inline-size プロパティは {{cssxref("max-width")}} および {{cssxref("max-height")}} の各プロパティと同じ値を取ります。

+`max-inline-size` プロパティは {{cssxref("max-width")}} および {{cssxref("max-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: 100%;
   max-inline-size: 200px;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample("Setting_maximum_inline_size_in_pixels")}}

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

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}{{Spec2("CSS Logical Properties")}}初回定義
+{{Specifications}} -

ブラウザーの互換性

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

{{Compat("css.properties.max-inline-size")}}

+{{Compat}} -

関連情報

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