【CSS】min-block-size、min-inline-sizeプロパティで書字方向に応じてボックスの幅と高さの最小値を指定しよう!

min-block-size、min-inline-sizeについて知りたい人

min-block-size、min-inline-sizeについて知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

この記事ではmin-block-size、min-inline-sizeについて解説していきます。

よく使用する要素の一つなのでしっかりと理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

min-block-size、min-inline-sizeの評価

頻出度

(1.0)

重要度

(1.0)

総合評価

(1.0)

min-block-size、min-inline-sizeプロパティはmin-widthまたはmin-heightプロパティの働きを要素の書字方向に応じて指定します。

writing-modeプロパティで指定した値によって、その対応が決定されるプロパティです。

wrting-modeプロパティの値がhorizontal-tbの場合、書字方向は左から右へ、各行は上から下へ配置されます。

この時におけるmin-block-sizeプロパティの値はmin-heightにmin-inline-sizeプロパティの値はmin-widthにそれぞれ対応します。

wrting-modeプロパティの値がvertical-rlの場合、書字方向は縦書きで上から下へ、各行は右から左へ配置されます。

この時におけるmin-block-sizeプロパティの値はmin-widthにmin-inline-sizeプロパティの値はmin-heightにそれぞれ対応します。

値の指定方法は以下の通りです。

{ min-block-size: 値; }

{ min-inline-size: 値; }

min-width、min-heightプロパティと同様です。

それではmin-block-size、min-inline-sizeの使い方をみていきましょう。

.text {
 writing-mode: vertical-rl;
 background-color: red;
 block-size: 5%;
 min-inline-size: 150px;
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント