SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、アウトラインです。
  4. 0:06これは、要素の枠、つまりボーダーの外側にもう一本描かれる輪郭線をまとめて指定するプロパティです。
  5. 0:13ボタンやリンクをキーボードで選んだとき、周りに四角い線が現れるのを見たことがあるでしょう。
  6. 0:20あの目印がアウトラインです。
  7. 0:22この動画では、基本の書き方、太さと線の種類と色の組み合わせ方、ボーダーとの違い、
  8. 0:28フォーカスで消してはいけない理由、そして効かないときの確認までを順番に見ていきます。
  9. 0:35輪郭線は四辺すべてを囲むように描かれるため、選ばれている要素が一目で分かります。
  10. 0:41まずは身近なボタンをタブキーで移動しながら、線の動きを観察してみましょう。
  11. 0:46まず基本の書き方です。
  12. 0:48対象のクラスにアウトラインと書き、コロンのあとに太さ、線の種類、色の三つを並べ、
  13. 0:53最後にセミコロンを付けます。
  14. 0:57スライドの例では、三ピクセルの実線で、色は茶色系を指定しています。
  15. 1:03クラス名デモは、エイチティーエムエルでクラス属性にデモと書かれた要素を選ぶ合図です。
  16. 1:10この一行で輪郭線の見た目が決まるので、まずはこの形を覚えましょう。
  17. 1:15順番は入れ替えても動きますが、太さ、線種、色の順で書くと読みやすくなります。
  18. 1:22値の読み方を分解しましょう。
  19. 1:24アウトラインは、輪郭線の幅、線の種類、色という三つの要素からできています。
  20. 1:31幅はピクセルなどの長さで、線の種類は実線のソリッドや破線のダッシュドなどから選び、
  21. 1:35色はカラーコードなどで指定します。
  22. 1:40これらは、幅、線種、色に対応する個別のプロパティにも分けられます。
  23. 1:46まとめて書けるのがアウトラインの便利なところで、細かく調整したいときだけ個別の指定を使い分けるとよいでしょう。
  24. 1:55線の種類を指定し忘れると線が見えない場合があるので注意してください。
  25. 2:01例えば太さだけを変えると線の存在感が変わり、線種だけを変えると印象の硬さが変わります。
  26. 2:09一度に全部を変えず、一項目ずつ試すと違いが追いやすくなります。
  27. 2:14初期値と継承を確認します。
  28. 2:16アウトラインの初期値は、幅、線種、色という三つの個別プロパティの初期値を組み合わせたものとして定義されます。
  29. 2:26そして、このプロパティは通常、親から子へ継承しません。
  30. 2:31親に輪郭線を指定しても、中の見出しやリンクに自動で同じ線が付くわけではないのです。
  31. 2:38共通の値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。
  32. 2:47アンセットは、継承しない項目なのでイニシャルとして扱われます。
  33. 2:52ブラウザーの既定スタイルで見えている線と、仕様の初期値が同じとは限らない点も覚えておきましょう。
  34. 3:01ここからは実例です。
  35. 3:02エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  36. 3:09中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
  37. 3:15頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  38. 3:20親のステージがあることで、箱の本来の枠と、その外側に描かれる輪郭線との位置関係を見分けやすくなります。
  39. 3:28この土台の上に、最後のアウトラインの行だけを切り替えて比べるのが、この実例の進め方です。
  40. 3:34土台のシーエスエスの続きです。
  41. 3:37全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。
  42. 3:45デモの箱には一レムの内側余白と、緑色の三ピクセルの枠、薄い緑の背景と文字色を指定します。
  43. 3:52ここまでは、違いが見えるようにするための土台です。
  44. 3:56このあと、別の行でデモにアウトラインを指定します。
  45. 4:00土台の緑の枠があるからこそ、その外側にもう一本、茶色の輪郭線が重なる様子がはっきり分かります。
  46. 4:08まずはこの状態をブラウザーで開いておきましょう。
  47. 4:12では比較です。
  48. 4:13まず三ピクセル、実線、茶色を指定すると、緑の枠の外側にもう一本、はっきりした線が表示されます。
  49. 4:21箱が二重に縁取られたように見え、輪郭が強く強調されます。
  50. 4:26次に、値だけを二ピクセル、破線、緑色に置き換えてみましょう。
  51. 4:31他の指定はすべて同じです。
  52. 4:33今度は細い破線になるので、印象が軽くなり、色も枠とそろうため落ち着いた見え方になります。
  53. 4:40変わったのは太さと線種と色だけ、という点に注目してください。
  54. 4:45変更後は保存して、ブラウザーを再読み込みして確認しましょう。
  55. 4:51よく似たボーダーとの違いも押さえましょう。
  56. 4:54ボーダーは要素の大きさの一部として扱われ、太くするとレイアウトに影響する場合があります。
  57. 5:00一方、アウトラインは枠の外側に描かれますが、通常はレイアウト上の占有寸法を増やしません。
  58. 5:07周りの要素を押しのけずに線だけを追加できるのが特徴です。
  59. 5:11また、アウトラインオフセットという関連プロパティを使えば、枠と輪郭線との間に隙間を空けることもできます。
  60. 5:19装飾として線を足したいときと、操作の目印を示したいときで使い分けるとよいでしょう。
  61. 5:25角の扱いも違いの一つです。
  62. 5:27ボーダーは角丸に沿いますが、アウトラインの見え方はブラウザーごとに細部が異なる場合があります。
  63. 5:35最終表示は実際の画面で確かめましょう。
  64. 5:37使うときの注意点です。
  65. 5:39最も大切なのは、キーボードフォーカスの輪郭線を、代替なしに消さないことです。
  66. 5:45アウトラインをノーンと書いて消してしまうと、キーボードで操作する人が、今どこを選んでいるのか分からなくなります。
  67. 5:54見た目が気になる場合は、消すのではなく、色や太さを整えたり、オフセットで少し離したりして、
  68. 5:59見やすい目印を用意しましょう。
  69. 6:04もう一つ、親要素のオーバーフローで輪郭線が切り取られていないかも確認してください。
  70. 6:10線の一部が隠れると、指定が効いていないように見えることがあります。
  71. 6:16効かないと感じたときの確認手順です。
  72. 6:19まず開発者ツールで順番に調べます。
  73. 6:21ネットワークでスタイルシートが正常に取得できているか、エレメンツで対象のクラスとシーエスエスのセレクターが一致しているか、
  74. 6:28スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見て、
  75. 6:34最後にコンピューテッドで最終的な値を確認します。
  76. 6:41線種が指定されていない、色が背景と同化している、親に切り取られている、といった原因もあわせて探しましょう。
  77. 6:49三百二十ピクセル程度の狭い画面や、キーボード操作でも確認するのがおすすめです。
  78. 6:55最後に互換性とまとめです。
  79. 6:57記事が参照するエムディーエヌの記録では、クローム九十四以降、エッジ九十四以降、
  80. 7:03ファイアフォックス八十八以降、サファリ十六点四以降などで対応が示されています。
  81. 7:08まとめます。
  82. 7:09アウトラインは枠の外に輪郭線を引くプロパティで、太さ、線種、色をまとめて指定でき、
  83. 7:14通常はレイアウトの寸法を増やさず、継承はしませんでした。
  84. 7:19練習として、三ピクセルの実線と二ピクセルの破線の違いを言葉で説明し、値を一つずつ変えて比べてみてください。
  85. 7:27関連するアウトラインオフセットやボーダーも学ぶと、箱の周りの表現が広がります。
  86. 7:32お疲れさまでした。
  87. 7:34値の記録はブラウザーの更新で変わることもあるので、公開前に最新の対応状況をもう一度確認する習慣を付けましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

outlineの役割と主な指定値を解説。枠の外に追加の線が表示されます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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