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/min-inline-size/index.md | 95 +++++++++++++------------------ 1 file changed, 41 insertions(+), 54 deletions(-) (limited to 'files/ja/web/css/min-inline-size') diff --git a/files/ja/web/css/min-inline-size/index.md b/files/ja/web/css/min-inline-size/index.md index d14c3fef6d..09846b1c6f 100644 --- a/files/ja/web/css/min-inline-size/index.md +++ b/files/ja/web/css/min-inline-size/index.md @@ -3,31 +3,29 @@ title: min-inline-size slug: Web/CSS/min-inline-size tags: - CSS - - CSS Logical Property - - CSS Property + - CSS 論理的プロパティ + - CSS プロパティ - Experimental - - Reference + - リファレンス - min-inline-size - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.min-inline-size translation_of: Web/CSS/min-inline-size --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

+{{EmbedInteractiveExample("pages/css/min-inline-size.html")}} -
{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}
+## 構文 - - -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 min-inline-size: 100px;
 min-inline-size: 5em;
 
-/* <percentage> 値 */
+/*  値 */
 min-inline-size: 10%;
 
 /* キーワード値 */
@@ -38,69 +36,58 @@ min-inline-size: fit-content(20em);
 /* グローバル値 */
 min-inline-size: inherit;
 min-inline-size: initial;
+min-inline-size: revert;
 min-inline-size: unset;
-
+``` + +書字方向が垂直方向であった場合、 `min-inline-size` の値は要素の最小の高さに対応します。そうでなければ、要素の最小幅に対応します。関連プロパティの {{cssxref("min-block-size")}} が要素のもう一方の寸法を定義します。 -

値

+### 値 -

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

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

結果

+#### 結果 -

{{EmbedLiveSample("Setting_minimum_inline_size_for_vertical_text")}}

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

仕様書

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

ブラウザーの互換性

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

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

+{{Compat}} -

関連情報

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