SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

topの役割と主な指定値を解説。配置された箱の上側の距離が変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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