SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:43動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

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

この動画で学べること

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

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