SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、アウトラインオフセットです。
  4. 0:06これは、要素の周りに描かれる輪郭線、いわゆるアウトラインと、要素の枠との間に、
  5. 0:11どれだけ隙間を空けるかを決めるプロパティです。
  6. 0:15線の色や太さを決めるのはアウトラインの役割で、アウトラインオフセットは、
  7. 0:19その線を枠からどれだけ離すかだけを担当します。
  8. 0:23この動画では、基本の書き方、正と負の値の違い、フォーカス表示での大切な役割、
  9. 0:28そして効かないときの確認までを順番に見ていきます。
  10. 0:33身近な例では、ボタンやリンクを選んだときに周りに現れる四角い線が輪郭線で、
  11. 0:37その線と要素との間隔を調整するのがこのプロパティの仕事です。
  12. 0:42まず基本の書き方です。
  13. 0:44対象のクラスにアウトラインオフセットと書き、コロンのあとに長さを書き、最後にセミコロンを付けます。
  14. 0:51例では六ピクセルを指定しています。
  15. 0:53ここで大切なのは、アウトラインオフセットは単独では使わない、という点です。
  16. 0:58もとの輪郭線であるアウトラインが設定されていなければ、距離を指定しても線自体が存在しないので、
  17. 1:03画面には何も現れません。
  18. 1:07まずはアウトラインで線を用意し、そのうえでオフセットで距離を調整する、という順番を覚えてください。
  19. 1:14値の読み方を見ましょう。
  20. 1:16指定できるのは長さが一つだけです。
  21. 1:18プラスの値を書くと、輪郭線は枠の外側へ離れます。
  22. 1:22六ピクセルなら、枠から六ピクセル外側に線が描かれます。
  23. 1:26ゼロは初期の状態で、線は枠にぴったり沿って描かれます。
  24. 1:29マイナスの値を書くと、今度は線が枠の内側へ入り込みます。
  25. 1:34内側へ入れすぎると文字や内容に重なって読みにくくなるので、負の値は小さめから試すのが安全です。
  26. 1:40単位はピクセルのほかに、レムなど長さの単位が使えます。
  27. 1:44パーセントは使えないので、距離は必ず長さの単位で指定する、という点もあわせて覚えておきましょう。
  28. 1:51迷ったら、まず四ピクセル前後の正の値から試すと違いが分かりやすいです。
  29. 1:56初期値と継承を確認します。
  30. 1:58アウトラインオフセットの初期値はゼロで、隙間はありません。
  31. 2:02そして、このプロパティは通常、親から子へ継承しません。
  32. 2:06親の要素に六ピクセルと指定しても、中の見出しやリンクに自動で同じ距離が付くわけではないのです。
  33. 2:12共通の値として、インヘリットは親の計算値を使う指定、イニシャルは初期値のゼロに戻す指定です。
  34. 2:19アンセットは、継承しない項目なのでイニシャルとして扱われます。
  35. 2:23また、仕様上の初期値と、ブラウザーの既定スタイルで見えている値が同じとは限らない点にも注意しましょう。
  36. 2:30ここからは実例です。
  37. 2:32エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  38. 2:39中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
  39. 2:45頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  40. 2:51親のステージがあることで、箱の枠と、その外側に離れて描かれる輪郭線との関係を見分けやすくなります。
  41. 2:58この土台の上に、最後のアウトラインオフセットの行だけを切り替えて比べるのが、
  42. 3:02この実例の進め方です。
  43. 3:06土台のシーエスエスの続きです。
  44. 3:08全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。
  45. 3:16デモの箱には一レムの内側余白と、緑色の三ピクセルの枠、薄い緑の背景と文字色を指定します。
  46. 3:22さらに別の行で、アウトラインとして茶色の三ピクセルの実線を指定しておきます。
  47. 3:28これが輪郭線の土台です。
  48. 3:30この土台があって初めて、オフセットで距離を変える意味が生まれます。
  49. 3:35まずはオフセットなしの状態で、枠と輪郭線が重なって見える様子を確認しておきましょう。
  50. 3:42では比較です。
  51. 3:43最後の行に六ピクセルを指定すると、茶色の輪郭線が緑の枠から少し外側へ離れ、
  52. 3:48二つの線の間に隙間ができます。
  53. 3:52箱が二重に縁取られたように見え、枠と輪郭線を別々に認識できます。
  54. 3:58次に、値だけをゼロに置き換えてみましょう。
  55. 4:02他の指定はすべて同じです。
  56. 4:04今度は輪郭線が枠にぴったり沿うので、隙間は消えます。
  57. 4:09変わったのは距離だけ、親の幅や文章は同じ、という点に注目してください。
  58. 4:15変更後はファイルを保存して、ブラウザーを再読み込みして確認しましょう。
  59. 4:21隙間ができたことで、緑の枠と茶色の輪郭線がそれぞれ独立した線として見えるようになるのがポイントです。
  60. 4:30アウトラインオフセットが特に大切になるのが、フォーカスの表示です。
  61. 4:34キーボードで操作しているとき、今どのボタンやリンクを選んでいるかを示す目印が、
  62. 4:39ブラウザーが自動で描く輪郭線です。
  63. 4:43そのため、見た目が気になるからといって、輪郭線を無条件に消してはいけません。
  64. 4:48消してしまうと、キーボードを使う人が現在位置を見失ってしまいます。
  65. 4:53代わりに、オフセットで線を少し離すと、要素のデザインとぶつからず、目印がかえって見やすくなります。
  66. 5:00デザインと操作のしやすさを両立させるためのプロパティだと考えてください。
  67. 5:05使うときの注意点です。
  68. 5:07繰り返しになりますが、アウトライン自体が設定されていないと、オフセットを変えても変化は見えません。
  69. 5:14効かないと感じたら、まずここを疑いましょう。
  70. 5:17もう一つは、離しすぎへの注意です。
  71. 5:20輪郭線はレイアウトの寸法を増やさないので、大きく離しても周りの要素は押しのけられず、
  72. 5:25隣の要素や文章の上に重なって表示される場合があります。
  73. 5:30近くの要素との間隔が狭い画面では、特に重なりを確認してください。
  74. 5:34数ピクセル程度の小さな値から始めて、少しずつ調整するのがおすすめです。
  75. 5:39また、角の丸みとの関係にも注目してください。
  76. 5:42輪郭線は要素の形に沿って描かれるため、角を丸くした要素では輪郭線の角も丸く見える場合があります。
  77. 5:49効かないと感じたときの確認手順です。
  78. 5:52まず前提として、アウトラインが有効に指定されているかを見てください。
  79. 5:56アウトラインがノーンになっていたり、そもそも書かれていなかったりすると、
  80. 5:59オフセットは空振りします。
  81. 6:03続いて開発者ツールで順番に調べます。
  82. 6:05ネットワークでスタイルシートが正常に取得できているか、エレメンツで対象のクラスとセレクターが一致しているか、
  83. 6:10スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見て、
  84. 6:16最後にコンピューテッドで最終的な値を確認します。
  85. 6:21三百二十ピクセル程度の狭い画面や、キーボード操作でも確認しましょう。
  86. 6:25最後に互換性とまとめです。
  87. 6:27アウトラインオフセットは、クローム一以降、エッジ十五以降、ファイアフォックス一点五以降、
  88. 6:33サファリ一点二以降と、主要ブラウザーで古くから対応しており、安心して使えます。
  89. 6:40まとめます。
  90. 6:41アウトラインオフセットは輪郭線と枠との距離を決めるプロパティで、正で外側、
  91. 6:45負で内側へずれ、初期値はゼロで継承はしませんでした。
  92. 6:50練習として、六ピクセルとゼロの違いを言葉で説明し、次にマイナスの値も試して、
  93. 6:54線が内側へ入る様子を比べてみてください。
  94. 6:59関連するアウトラインやボックスシャドウも学ぶと、箱の周りの装飾が一通りできるようになります。
  95. 7:05お疲れさまでした。
  96. 7:07フォーカス表示を整える場面では特に役立つプロパティなので、消すのではなく、
  97. 7:12離して見やすくするという発想をぜひ身に付けてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

outline-offsetの役割と主な指定値を解説。輪郭線と枠の間に隙間ができます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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