SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:01シーエスエス、リファレンス解説です。
  3. 0:04今回のテーマは、ボトムです。
  4. 0:06これは、配置した箱の下端が、基準となる親の下端からどれだけ離れるかを決めるプロパティです。
  5. 0:15たとえば、机の下側から少し上へ浮かせて箱を置く、というイメージです。
  6. 0:21ボトムに二レムを指定すると、箱は下端から二レムだけ上へ離れます。
  7. 0:27この動画では、二レムを指定した場合と、ゼロを指定した場合を比べて、下側の間隔がどう変わるかを確認します。
  8. 0:36基本の書き方、値の読み方、効くための条件、実例、そして効かないときの確認まで、
  9. 0:40順番に解説します。
  10. 0:45下からの距離は直感と逆に感じることもあるので、基準を意識しながら進めましょう。
  11. 0:52まず基本の書き方です。
  12. 0:54セレクターのあとに、ボトム、コロン、値、セミコロンを書きます。
  13. 0:58スライドの例では、デモというクラスを持つ要素に、二レムを指定しています。
  14. 1:04意味は、基準の下端から二レム離れた位置に、箱の下端を置く、ということです。
  15. 1:10プロパティ名のあとにコロン、値の最後にセミコロンを書く、という宣言の基本は、
  16. 1:14ほかのプロパティと同じです。
  17. 1:18ただし、この一行だけを書いても、すぐに位置が変わるとは限りません。
  18. 1:23要素の配置方法など、効くための条件が関係してきます。
  19. 1:27その条件は後のセクションで丁寧に確認します。
  20. 1:30クラス名のつづりがエイチティーエムエル側と一致しているかも、あわせて確認しておくと安心です。
  21. 1:37指定できる値の読み方を確認します。
  22. 1:40代表的なのは、長さ、割合、そしてオートの三つです。
  23. 1:43長さは、レムやピクセルなどで、下端からの距離をそのまま指定します。
  24. 1:48割合はパーセントで書く方法で、基準となる親の高さに対する割合で距離が決まります。
  25. 1:54たとえば親の高さが大きくなれば、同じパーセントでも実際の距離は大きくなります。
  26. 2:00オートは、距離を自動に任せるという意味で、指定しない場合の初期の状態です。
  27. 2:05まずは長さで感覚をつかみ、親の高さに連動させたいときに割合を検討すると、
  28. 2:09使い分けがしやすくなります。
  29. 2:12負の値を指定すると、基準より下へはみ出す配置も可能ですが、見切れや重なりに注意が必要です。
  30. 2:19初期値と継承を確認します。
  31. 2:21ボトムの初期値はオートで、下側からの距離は指定しない、という意味です。
  32. 2:26通常の継承はしないので、親に書いた値が子へ自動で受け継がれることはありません。
  33. 2:33位置を決めたい要素ごとに指定してください。
  34. 2:36また、共通値として、インヘリットは親の計算値を使う値、イニシャルは仕様の初期値であるオートに戻す値です。
  35. 2:44アンセットは、継承しないプロパティなのでイニシャルと同じ扱いになります。
  36. 2:50リバートなどはカスケードを巻き戻す値です。
  37. 2:53まずは、初期値オートと、継承しないという二点をはっきり覚えましょう。
  38. 2:59ボトムが効く条件を整理します。
  39. 3:01ここが一番間違えやすい点です。
  40. 3:03ポジションがスタティックの要素では、ボトムを指定しても位置は変わりません。
  41. 3:08スタティックは通常の流れに置く初期の配置で、下からの距離という考え方が働かないからです。
  42. 3:14リラティブ、アブソリュート、フィックスド、スティッキーといった、位置をずらせる配置と組み合わせて使ってください。
  43. 3:22リラティブなら元の場所を基準に上へずれ、アブソリュートなら基準となる親の下端を基準に配置されます。
  44. 3:29効かないと感じたら、まず対象のポジションを確認しましょう。
  45. 3:33距離の基準について、もう少し詳しく見ます。
  46. 3:36アブソリュートの場合は、ポジションが指定された最も近い親が基準になり、その親の下端から数えます。
  47. 3:43親に基準がないと、もっと外側の要素が基準になってしまいます。
  48. 3:48リラティブの場合は、今いる元の場所が基準で、そこから上へずれる形です。
  49. 3:54なお、ボトムとトップ、それに高さをすべて指定すると、自動計算の都合で一方が無視されることがあります。
  50. 4:01特にトップと高さとボトムを同時に固定すると、ボトムが効かないように見える場合があります。
  51. 4:08画面に固定する操作ボタンでは、本文を覆わないよう、下に余白を残す配慮も必要です。
  52. 4:14実例を見ていきます。
  53. 4:16まずエイチティーエムエルの用意です。
  54. 4:18ステージという外側の箱の中に、今回の対象であるデモという箱が一つ入っています。
  55. 4:24デモの中には、ハロー、シーエスエスという文章が入っていて、折り返しも確認できるようになっています。
  56. 4:32頭の部分、ヘッドにはスタイルシートを読み込むリンクを置いてください。
  57. 4:37親と子の構造そのものが例の一部です。
  58. 4:40親が距離の基準になり、子が下端から距離を取って配置されます。
  59. 4:44中身は変えず、ボトムの値だけを比べる準備をしましょう。
  60. 4:48下の間隔だけが変わる点に注目してください。
  61. 4:51文章の量はそのままにしておくと、位置の違いだけを純粋に比べられます。
  62. 4:56次に、スタイルズ・ドット・シーエスエスに書くシーエスエスです。
  63. 5:01ステージは幅の上限や余白、枠線に加えて、リラティブと高さ十四レムが指定され、
  64. 5:05絶対配置の基準になっています。
  65. 5:09対象のデモはアブソリュートで配置され、幅十レム、高さ六レムの箱になっています。
  66. 5:16そして主役が、ボトム、二レムです。
  67. 5:18親の下端から二レム上側に、箱の下端が配置されます。
  68. 5:22土台の指定は違いを見やすくするためのものなので、親のリラティブと、対象のアブソリュート、
  69. 5:27そしてボトムの一行に注目してください。
  70. 5:32この土台があるからこそ、ボトムの数値を変えたときの上下の移動がはっきり見えるのです。
  71. 5:38値を変えて比べてみましょう。
  72. 5:41最後のボトムの値だけを、二レムからゼロへ置き換えます。
  73. 5:45ゼロは単位を付けない書き方で、距離なし、つまり親の下端にぴったりくっつく位置を意味します。
  74. 5:51二レムのときは下側に隙間ができていた箱が、ゼロでは下端まで下がることが確認できます。
  75. 5:58エイチティーエムエルや、ほかの指定は一切変えていません。
  76. 6:02ボトムの変更だけで、箱の縦位置だけが変わることが分かります。
  77. 6:07比較のコツは、変える値を一つだけにすることです。
  78. 6:10まず二レムとゼロの違いを、自分の言葉で説明してみてください。
  79. 6:15数値を大きくすれば、その分だけ箱はさらに上へ移動することも試してみてください。
  80. 6:21効かないときの確認手順です。
  81. 6:23まず、対象のポジションがスタティックのままになっていないかを確認してください。
  82. 6:30これが最も多い原因です。
  83. 6:32次に、親にリラティブなどの基準があるか、ボトムとトップや高さの指定が競合していないかも見ましょう。
  84. 6:40そのうえで開発者ツールを使います。
  85. 6:43ネットワークでスタイルシートが取得できているか、エレメンツでクラスとセレクターが一致しているか、
  86. 6:50スタイルズで宣言が無効や上書きになっていないかを確認してください。
  87. 6:56コンピューテッドで最終的な値を確認し、三百二十ピクセル程度の画面幅でも内容が読めるかもチェックします。
  88. 7:05一つずつ原因を切り分けることが、近道になります。
  89. 7:09最後に互換性とまとめです。
  90. 7:11ボトムは、クローム一以降、エッジ十二以降、ファイアフォックス一以降、サファリ一以降で対応すると紹介されており、
  91. 7:17非常に古くから使える基本的なプロパティです。
  92. 7:23現在の主要ブラウザーでは安心して使えます。
  93. 7:26まとめます。
  94. 7:27ボトムは基準の下端から箱の下端までの距離を決める指定で、初期値はオート、
  95. 7:30継承はしません。
  96. 7:34ポジションがスタティックでは効かない点が最大の注意点です。
  97. 7:38練習として、二レムとゼロで何が変わるかを説明し、親の高さだけを変えて結果を比べてみてください。
  98. 7:45関連するトップ、レフト、ライト、インセットもあわせて確認すると理解が深まります。
  99. 7:52お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

bottomの役割と主な指定値を解説。箱の下端と親の下端の間隔が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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