SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01シーエスエス、リファレンス解説です。
  3. 0:04今回のテーマは、インセットです。
  4. 0:06これは、トップ、ライト、ボトム、レフトという、四つの位置指定を一度にまとめて書けるプロパティです。
  5. 0:14額縁の中に絵を収める場面を思い浮かべてください。
  6. 0:18四辺からどれだけ内側に置くかを決めると、絵の位置と大きさが同時に決まります。
  7. 0:25インセットも同じで、親の四辺からの距離を指定します。
  8. 0:29この動画では、一レムを指定した場合と、二レム、三レムを指定した場合を比べて、
  9. 0:34箱の位置とサイズがどう変わるかを確認します。
  10. 0:39基本の書き方、値の読み方、実例、そして効かないときの確認まで、順番に解説します。
  11. 0:46まず基本の書き方です。
  12. 0:48セレクターのあとに、インセット、コロン、値、セミコロンを書きます。
  13. 0:53スライドの例では、デモというクラスを持つ要素に、一レムを指定しています。
  14. 0:59意味は、親の上、右、下、左、すべての辺から、一レムずつ内側に置く、ということです。
  15. 1:05本来ならトップ、ライト、ボトム、レフトと四行書くところを、一行で済ませられるのが、
  16. 1:10このプロパティの便利な点です。
  17. 1:14ただし、この一行だけを書いても、すぐに位置が変わるとは限りません。
  18. 1:20要素の配置方法など、効くための条件が関係してきます。
  19. 1:24その条件は後のセクションで丁寧に確認します。
  20. 1:28指定できる値の読み方を確認します。
  21. 1:31インセットには、一つから四つまでの値を並べられます。
  22. 1:36並び順は、上から時計回り、つまりトップ、ライト、ボトム、レフトの順です。
  23. 1:42一つだけ書けば、四辺すべてが同じ距離になります。
  24. 1:47二つ書いた場合は、最初が上下、次が左右を表します。
  25. 1:51たとえば二レム、三レムなら、上下が二レム、左右が三レムです。
  26. 1:57三つの場合は上、左右、下の順、四つの場合は辺ごとにすべて個別に指定できます。
  27. 2:04この省略のルールは、マージンやパディングと同じ考え方です。
  28. 2:09値にはレムやピクセルなどの長さのほか、パーセントも使えます。
  29. 2:15初期値と継承を確認します。
  30. 2:17インセット自体に一つの初期値があるのではなく、構成するトップ、ライト、ボトム、
  31. 2:22レフト、それぞれの初期値を参照する形になっています。
  32. 2:28四つの辺の初期値はいずれもオートで、距離を指定しない、という意味です。
  33. 2:34通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
  34. 2:40位置を決めたい要素ごとに指定してください。
  35. 2:44また、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値に戻す値です。
  36. 2:50アンセットやリバートなどの共通値もありますが、まずは各辺オートと、継承しない点をはっきり覚えましょう。
  37. 2:59インセットが効く条件を整理します。
  38. 3:02ここが一番間違えやすい点です。
  39. 3:04ポジションがスタティックの要素では、インセットを指定しても、想定する配置には使えません。
  40. 3:11スタティックは通常の流れに置く初期の配置で、四辺からの距離という考え方が働かないからです。
  41. 3:18リラティブ、アブソリュート、フィックスド、スティッキーといった、位置をずらせる配置と組み合わせて使ってください。
  42. 3:27今回の実例でも、対象の箱にはアブソリュートが指定されています。
  43. 3:32効かないと感じたら、まず対象のポジションを確認する。
  44. 3:36これが最初のチェックです。
  45. 3:38親側の準備も次のセクションで確認します。
  46. 3:41インセットの面白い点は、位置だけでなく、箱のサイズまで決まることです。
  47. 3:47絶対配置の要素で、幅と高さをオートにしておくと、左右の距離から残りの幅が、
  48. 3:52高さは上下の距離から残りの高さが、自動で決まります。
  49. 3:57たとえば親いっぱいに広げたい場合は、インセット、ゼロと書くだけで、四辺ぴったりに重なる箱になります。
  50. 4:05逆に、幅や高さを固定値で指定してしまうと、すべての距離を同時に満たせなくなり、
  51. 4:09一部の指定が効かなくなります。
  52. 4:13また、距離の基準になるのは、ポジションがリラティブなどに設定された親です。
  53. 4:19親に基準がないと、もっと外側の要素が基準になってしまいます。
  54. 4:24実例を見ていきます。
  55. 4:25まずエイチティーエムエルの用意です。
  56. 4:28ステージという外側の箱の中に、今回の対象であるデモという箱が一つ入っています。
  57. 4:33デモの中には、ハロー、シーエスエスという文章が入っていて、折り返しも確認できるようになっています。
  58. 4:40頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
  59. 4:45親と子の構造そのものが例の一部です。
  60. 4:47親が距離の基準になり、子が四辺から距離を取って配置されます。
  61. 4:51中身は変えず、インセットの値だけを比べる準備をしましょう。
  62. 4:55距離が変わると箱の大きさも変わる点に注目してください。
  63. 4:59次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  64. 5:04ステージは幅の上限や余白、枠線に加えて、リラティブと高さ十四レムが指定され、
  65. 5:08絶対配置の基準になっています。
  66. 5:13対象のデモはアブソリュートで配置され、幅と高さは最終的にオートに直されています。
  67. 5:19これで四辺からの距離でサイズが決まる状態になりました。
  68. 5:24そして主役が、インセット、一レムです。
  69. 5:27親の四辺すべてから一レム内側に、箱が配置されます。
  70. 5:31土台の指定は違いを見やすくするためのものなので、インセットの一行と、幅、
  71. 5:36高さがオートである点に注目してください。
  72. 5:40値を変えて比べてみましょう。
  73. 5:43最後のインセットの値だけを、一レムから、二レム、三レムへ置き換えます。
  74. 5:50二つの値なので、最初が上下、次が左右を表します。
  75. 5:54つまり上下は二レム、左右は三レムの距離になります。
  76. 5:59ファイルを保存してブラウザーを再読み込みすると、箱は上下にも左右にも内側へ寄り、
  77. 6:05その分、幅も高さも小さくなります。
  78. 6:10エイチティーエムエルや、ほかの指定は一切変えていません。
  79. 6:16距離の変更だけで、位置とサイズの両方が変わることが確認できます。
  80. 6:22比較のコツは、変える値を一つだけにすることです。
  81. 6:27まず一レムと、二レム、三レムの違いを、自分の言葉で説明してみてください。
  82. 6:34効かないときの確認手順です。
  83. 6:36まず、対象のポジションがスタティックのままになっていないかを確認してください。
  84. 6:41次に、サイズが思うように変わらない場合は、幅と高さが固定値のままになっていないかを見ましょう。
  85. 6:48幅と高さがオートでないと、四辺の距離からサイズを決める仕組みが働きません。
  86. 6:53親にリラティブなどの基準があるかも大切です。
  87. 6:56そのうえで開発者ツールを使います。
  88. 6:59ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
  89. 7:04スタイルズで宣言が上書きされていないかを見てください。
  90. 7:09コンピューテッドで最終的な値を確認します。
  91. 7:12最後に互換性とまとめです。
  92. 7:14インセットは、記事ではクローム八十七以降、エッジ八十七以降、ファイアフォックス六十六以降、
  93. 7:19サファリ十四点一以降で対応すると紹介されています。
  94. 7:25現在の主要ブラウザーでは広く使える指定です。
  95. 7:28まとめます。
  96. 7:29インセットはトップ、ライト、ボトム、レフトの一括指定で、値は一つから四つ、
  97. 7:33上から時計回りに読みます。
  98. 7:37初期値は各辺オート、継承はしません。
  99. 7:39ポジションとの組み合わせが前提で、幅と高さをオートにするとサイズまで決まります。
  100. 7:45お疲れさまでした。
  101. 7:47関連するレフトやボトムなどの個別プロパティも、あわせて確認すると理解が深まります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

insetの役割と主な指定値を解説。親の四辺からの距離を変え、箱のサイズも変化します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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