SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのpositionを図解：static・relative・absolute・fixed・stickyの違いと実例の解説動画

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ポジションです。
  4. 0:06これは、要素をどこを基準に置くか、そして通常の並びの中に元の場所を残すかどうかを決める、
  5. 0:11レイアウトの要になるプロパティです。
  6. 0:16値には、スタティック、リラティブ、アブソリュート、フィックスド、スティッキーの五つがあります。
  7. 0:24同じ箱でも、値を変えるだけで、普通に並ぶのか、少しずれるのか、親に重なるのか、
  8. 0:29画面に固定されるのかが大きく変わります。
  9. 0:34この動画では、エー、対象、シーという三つの箱を比べながら、五つの違いを順番に整理します。
  10. 0:41値の名前を暗記するより、動きの違いで覚えることが、初心者にとって近道になります。
  11. 0:48まず基本の書き方です。
  12. 0:49スライドの例では、対象の要素にポジション、リラティブを指定し、トップに二十四ピクセル、
  13. 0:54レフトに三十二ピクセルを指定しています。
  14. 0:59ポジションが置き方の種類を決め、トップやレフトが、どれだけずらすかを決める、
  15. 1:02という役割分担です。
  16. 1:06初期値はスタティックで、通常の継承はしません。
  17. 1:10親にリラティブを書いても、子が自動でリラティブになるわけではない点に注意してください。
  18. 1:16位置を変えたい要素ごとに、ポジションを明示するのが基本です。
  19. 1:21書き方に迷ったら、まず対象を一つ決めて、値と移動量をセットで書く習慣を付けましょう。
  20. 1:27五つの値を見分けるコツは、三つの質問で考えることです。
  21. 1:31一つ目は、どこが基準か。
  22. 1:33二つ目は、元の場所が残るか。
  23. 1:35三つ目は、スクロールしたときにどう動くか、です。
  24. 1:39スタティックは通常の流れで、場所は残り、ずらせません。
  25. 1:44リラティブは元の場所を残したまま見た目だけずれます。
  26. 1:48アブソリュートとフィックスドは通常の流れから外れ、元の場所は残りません。
  27. 1:54スティッキーは元の場所を保ちながら、スクロールに応じて途中で留まります。
  28. 2:00この三つの視点があれば、迷いにくくなります。
  29. 2:03表で比べるだけでなく、実際の箱がどう動くかをこの後の各セクションで一つずつ確かめます。
  30. 2:10最初はスタティックです。
  31. 2:12これは初期値で、エー、対象、シーの順に、通常の流れで縦に並びます。
  32. 2:17トップに二十四ピクセルと書いても、対象は動きません。
  33. 2:21スタティックな要素では、トップやレフトといった移動の指定が効かないからです。
  34. 2:27文章やカードのような通常の内容は、まずこの通常フローで置くのが基本です。
  35. 2:33内容の量が変わっても破綻しにくいからです。
  36. 2:36なお、フレックスやグリッドの子要素では、ゼットインデックスの扱いに例外があるので、
  37. 2:41スタティックなら常に無効、と覚え切らないことも大切です。
  38. 2:47普段のページ作りでは、ほとんどの要素がこのスタティックのままで自然に配置されています。
  39. 2:54次はリラティブです。
  40. 2:55対象を本来の位置から右下へずらしますが、移動前の場所はそのまま残ります。
  41. 3:00そのため、後ろにあるシーの配置は、対象が動く前を基準に決まり、詰めて寄ってくることはありません。
  42. 3:07大きくずらすとほかの箱に重なることもあるので、少しだけ位置を整えたい場面に向いています。
  43. 3:13また大事な使い方として、トップなどを書かずにリラティブだけを指定すると、
  44. 3:18見た目は変わりませんが、その要素がアブソリュートな子の配置基準になれます。
  45. 3:24バッジを重ねる土台として頻繁に使います。
  46. 3:27ずらした分だけ重なりや隙間が生まれるので、周りの要素との距離もあわせて確認しましょう。
  47. 3:33アブソリュートは、基準となる箱の中へ重ねて配置する方法です。
  48. 3:38対象が通常フローから外れるため、元の場所は残らず、エーの次にシーが詰めて並びます。
  49. 3:45基準になるのは原則として、ポジションがスタティック以外である最も近い祖先です。
  50. 3:52そのような祖先がなければ、もっと外側が基準になります。
  51. 3:57スライドの例では、カードにリラティブを指定し、右上のバッジをアブソリュートで重ねています。
  52. 4:05注意点は、絶対配置した子だけでは親の高さが確保されないことです。
  53. 4:10必要な余白は、親のパディングなどで別に設計してください。
  54. 4:15直近の親とは限らない点も重要で、変換などの指定が基準を作る場合もあることを意識します。
  55. 4:23フィックスドは、画面の同じ位置へ固定する方法です。
  56. 4:27ページをスクロールしても、対象は指定した位置に残り続けます。
  57. 4:32スライドの例は、画面の右下から一レムの位置に置く、上へ戻るボタンです。
  58. 4:38通常フローに場所を残さないので、固定したヘッダーやフッターが本文を隠してしまわないよう、
  59. 4:44本文側に余白を用意し、小さい画面でも読みやすいか確認しましょう。
  60. 4:50また例外として、祖先にトランスフォームなどがあると、その祖先が基準になって画面に固定されない場合があることも覚えておいてください。
  61. 5:01固定要素は便利ですが、画面が狭い端末では本文を大きく隠しやすい点にも気を付けましょう。
  62. 5:08スティッキーは、通常の場所を確保したまま、スクロールに応じて指定位置に留まる方法です。
  63. 5:14最初は普通の見出しとして並び、上へスクロールしてトップの位置に達すると、
  64. 5:18そこに留まります。
  65. 5:21ただし、親の終端が近づくと、親の領域からはみ出さないように押し上げられ、
  66. 5:25離れていきます。
  67. 5:28フィックスドとの一番の違いが、この親の範囲を超えない点です。
  68. 5:32記事の横の目次や、一覧の中の区切り見出しに向いています。
  69. 5:37スライドの例では、見出しにスティッキーとトップ、ゼロを指定し、重なり順と背景もあわせて指定しています。
  70. 5:45背景色を付けておくと、留まっている間も下の内容が透けて見えず、見出しとして読みやすくなります。
  71. 5:52手元で試せる共通の実例を紹介します。
  72. 5:55エイチティーエムエルでは、ペアレントという親の中に、エー、対象、シーの三つの箱を並べます。
  73. 6:02シーエスエスでは親にリラティブと十分な高さを用意し、対象の箱に色を付けます。
  74. 6:08そのうえで、対象のポジションだけを、スタティック、リラティブ、アブソリュート、
  75. 6:13フィックスド、スティッキーへ順に変えてください。
  76. 6:18まず、対象を動かしたときにシーがどこへ来るかを見ます。
  77. 6:22次にページをスクロールして、対象が親について動くか、画面に留まるか、親の終端で離れるかを確認すると、
  78. 6:27五つの違いが体感できます。
  79. 6:32スクロール量を用意するために、親とその後の領域には十分な高さを持たせておくことがコツです。
  80. 6:39効かないときの確認です。
  81. 6:40アブソリュートで思った場所に置けないときは、基準になる祖先が意図した要素かどうかを、
  82. 6:46開発者ツールで祖先のシーエスエスまでたどって確認します。
  83. 6:51スティッキーが留まらないときは、トップがオート以外になっているか、親が短くて動く余地が残っているか、
  84. 6:59祖先のオーバーフローが想定と違うスクロールを作っていないか、フレックスやグリッドで対象が引き伸ばされていないかを見ます。
  85. 7:08また、ポジションは横並びを作る道具ではありません。
  86. 7:11カードの横並びはフレックスやグリッドで作り、重ねるバッジだけをアブソリュートにする構成が、
  87. 7:16変化に強くなります。
  88. 7:20重なり順で困ったときは、ゼットインデックスの数字だけでなく、重ね合わせの文脈も確認します。
  89. 7:27最後に互換性とまとめです。
  90. 7:28ポジションは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、
  91. 7:34サファリ一以降で対応すると紹介されており、主要ブラウザーで古くから使える基本プロパティです。
  92. 7:39まとめます。
  93. 7:40スタティックは通常の流れ、リラティブは場所を残してずらす、アブソリュートは基準へ重ねる、
  94. 7:46フィックスドは画面へ固定する、スティッキーは親の範囲で留まる、という違いです。
  95. 7:52練習として、共通の実例で五つの値を切り替え、シーの位置とスクロール時の動きを自分の言葉で説明してみてください。
  96. 7:59お疲れさまでした。
  97. 8:00五つの違いを説明できれば、バッジ、固定ヘッダー、目次といった実践的な配置に応用できます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

positionのstatic・relative・absolute・fixed・stickyを図と操作サンプルで比較。配置の基準、元の場所、スクロール時の違い、効かない原因を詳しく解説します。

解説記事・サンプルコードを読む：CSSのpositionを図解：static・relative・absolute・fixed・stickyの違いと実例 →