VIDEO LESSON

CSSのinline-sizeの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:22動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、インラインサイズです。
0:07これは、文字が進む方向であるインライン方向の大きさを指定するプロパティです。
0:13普段の横書きでは、インライン方向は横方向にあたります。
0:17つまり横書きでは、インラインサイズは要素の幅を決める指定になります。
0:23この動画では、基本の書き方から、値の種類、実例での比較、そして効かないときの確認までを順番に見ていきます。
0:31七十パーセントと十二レムを比べて、箱の幅だけが変わる様子を確認しましょう。
0:37あわせて、縦書きにしたときに効く辺がどう変わるかも見ていきます。
0:43まず基本の書き方です。
0:44スライドのように、対象のクラスにインラインサイズと書き、コロンのあとに値を置き、
0:48最後にセミコロンを付けます。
0:53これは通常の宣言と同じ形です。
0:55例では七十パーセントを指定しているので、横書きでは要素の幅が親の幅の七十パーセントになります。
1:02親が広くなれば箱も広くなり、親が狭くなれば箱も狭くなる、連動する指定です。
1:08幅を割合で決める、という役割がこのプロパティの中心です。
1:13まずはこの一行の形を覚えましょう。
1:15セレクターとクラス名が一致しているかも、最初に確かめておきましょう。
1:21ここで、論理プロパティという考え方を押さえましょう。
1:25従来のウィドゥスは、画面の横という物理的な方向で幅を決めていました。
1:30これに対してインラインは、文章の流れを基準にした論理的な方向です。
1:35インラインは文字が進む方向、ブロックは段落が積み重なる方向を表します。
1:41横書きで左から右へ読む場合は、インライン方向は横です。
1:45しかし縦書きでは文字が上から下へ進むため、インライン方向は縦になり、インラインサイズは高さ側の大きさとして働きます。
1:54書字方向に応じて効く辺が切り替わるのが、論理プロパティの特徴です。
1:59指定できる値を見てみましょう。
2:01代表的なのは、オート、長さ、そして割合です。
2:05オートは、内容や配置方法によって大きさが自動で決まる指定で、初期値でもあります。
2:12割合では、包含ブロックのインライン方向の大きさ、横書きでは親の幅を基準に計算されます。
2:20七十パーセントなら、親の幅の七割が箱の幅になります。
2:24長さでは、レムやピクセルなどで大きさを直接決めます。
2:29十二レムなら、親の幅が変わってもその寸法を保ちます。
2:33親に合わせて伸縮させたいのか、固定したいのか、自動に任せたいのかで使い分けましょう。
2:40初期値と継承を確認します。
2:42インラインサイズの初期値はオートで、内容に合わせて大きさが決まります。
2:47そして、このプロパティは通常、親から子へ継承しません。
2:50親に大きさを付けても、子が自動で同じ大きさになるわけではないのです。
2:55また共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のオートに戻す指定です。
3:01アンセットは、継承しない項目なのでイニシャルとして扱われます。
3:05リバートなどはカスケードの由来を巻き戻す値で、単に直前の行へ戻す指定ではありません。
3:10仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点にも注意しましょう。
3:17ここからは実例です。
3:18エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
3:26中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
3:33頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
3:38親のステージがあることで、デモの箱の幅の変化を見分けやすくなります。
3:44この土台の上に、最後のインラインサイズの行だけを切り替えて比べるのが、この実例の進め方です。
3:51値以外の条件をそろえることで、違いの原因がはっきりします。
3:56土台のシーエスエスの続きです。
3:58全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白と点線の枠を付けます。
4:04デモの箱には一レムの内側余白と、緑色の三ピクセルの枠と、薄い緑の背景、そして文字色を指定します。
4:11この時点では、デモの幅はまだ内容や親に合わせて決まります。
4:15ここに最後の行として、インラインサイズ、七十パーセントを加えることで、幅だけを割合で決められるようになります。
4:23土台と変更行を分けて書くのが、原因を追いやすくするコツです。
4:27まずは土台だけを表示して、通常の見え方を確認しておきましょう。
4:31では比較です。
4:32最初は七十パーセントを指定します。
4:35横書きでは幅が親の七割になるので、ブラウザーの幅を変えると箱の幅も一緒に変わり、
4:39文章の折り返し位置も動きます。
4:44次に、最後の行の値だけを十二レムに置き換えてみましょう。
4:48他の指定はすべて同じです。
4:51今度は幅が固定の長さになるので、親が広くても狭くても十二レムを保とうとします。
4:57変わったのはインライン方向の大きさの決め方だけ、親の幅や文章そのものは同じ、
5:01という点に注目してください。
5:05変更後はファイルを保存して、ブラウザーを再読み込みして確認しましょう。
5:11縦書きでの違いも確認しましょう。
5:14ライティングモードをバーティカル、アールエルにすると、文字は上から下へ進み、
5:18行は右から左へ積み重なります。
5:23このときインライン方向は縦になるため、インラインサイズは物理的な高さとして働きます。
5:30同じ十二レムでも、横書きでは幅、縦書きでは高さが変わるわけです。
5:36日本語の縦書きコンテンツや、多言語対応を考えるときに、この切り替わりが役立ちます。
5:43逆に、横書きだけを想定して幅のつもりで書くと、縦書きで意図と違う辺が変わって驚くこともあります。
5:52書字方向を意識して使うことが大切です。
5:55効かないと感じたときは、まず前提を確認しましょう。
5:59横書きではインラインサイズは幅相当ですが、縦書きでは高さ相当になるため、
6:04期待した辺と違う辺が変わっていないかを確認してください。
6:09また、ウィドゥスとインラインサイズを両方書くと、書字方向や記述順によって競合し、
6:14後の宣言や条件の方が優先されることがあります。
6:19続いて開発者ツールで調べます。
6:22ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
6:30スタイルズで宣言が無効や上書きになっていないかを見て、最後にコンピューテッドで最終的な値と親の寸法を確認します。
6:38最後に互換性とまとめです。
6:40インラインサイズは、クローム五十七以降、エッジ七十九以降、ファイアフォックス四十一以降、
6:47サファリ十二点一以降と、主要ブラウザーで対応しており、現代の制作では安心して使えます。
6:54まとめます。
6:55インラインサイズはインライン方向の寸法で、横書きでは幅、縦書きでは高さになり、
7:00初期値はオートで継承はしませんでした。
7:05練習として、七十パーセントと十二レムの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。
7:13関連するブロックサイズやミンインラインサイズもあわせて学ぶと理解が深まります。
7:20お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

inline-sizeの役割と主な指定値を解説。横書きの箱の幅が変わります。writing-modeを変えて軸の違いも確認できます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのinline-sizeの使い方：指定値・実例・効かない原因とブラウザー互換性 →