SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

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

この動画で学べること

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

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