SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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