SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、ボーダーレイディアスです。
  4. 0:07これは、箱の角の丸みを指定するプロパティです。
  5. 0:11四角い箱の角を少し丸めるだけで、画面の印象はぐっと柔らかくなります。
  6. 0:16ボタンやカード、画像の枠など、身近な部品でとてもよく使われています。
  7. 0:22この動画では、基本の書き方、値の個数による角の決まり方、楕円形の丸みの作り方、
  8. 0:27効かないときの注意点までを順番に見ていきます。
  9. 0:32記事の実例に沿って、一レムを指定した丸い角と、ゼロを指定した直角を比べて、
  10. 0:36違いを目で確かめましょう。
  11. 0:40小さな指定ですが、使いどころが多いので、仕組みからしっかり押さえていきましょう。
  12. 0:47まず基本の書き方です。
  13. 0:48対象のクラスにボーダーレイディアスと書き、コロンのあとに丸みの大きさを書き、
  14. 0:52最後にセミコロンを付けます。
  15. 0:56スライドの例では一レムを指定しています。
  16. 0:59これだけで、四つの角すべてが同じ大きさで丸くなります。
  17. 1:03クラス名デモは、エイチティーエムエルでクラス属性にデモと書かれた要素を選ぶ合図です。
  18. 1:09値がゼロなら丸みは付かず、直角のままになります。
  19. 1:13まずはこの一行の形を覚え、数値を変えたときの見え方の変化を追っていきましょう。
  20. 1:18迷ったときは、まず一レム前後から試し、画面で見て調整する進め方がおすすめです。
  21. 1:24値の読み方を確認しましょう。
  22. 1:26丸みの大きさは、ピクセルやレムといった長さでも、パーセントという割合でも指定できます。
  23. 1:33長さで書けば、要素の大きさが変わっても丸みの半径は一定です。
  24. 1:37一方、割合で書くと、横方向は要素の幅、縦方向は要素の高さを基準に半径が決まります。
  25. 1:43特に、幅と高さが等しい正方形に五十パーセントを指定すると、角が最大まで丸まって円になります。
  26. 1:50長方形で五十パーセントなら楕円に近づきます。
  27. 1:53固定の丸みか、大きさに追随する丸みか、目的に合わせて選び分けましょう。
  28. 1:59単位の意味が分かると、レスポンシブな画面でも意図した丸みを保ちやすくなります。
  29. 2:04値は一つだけでなく、最大で四つまで並べられます。
  30. 2:08一つ書けば四つの角すべてに同じ丸みが付きます。
  31. 2:12二つ書くと、左上と右下のペア、右上と左下のペアという、対角線ごとの組み合わせになります。
  32. 2:18三つ書くと真ん中の値が右上と左下で共用されます。
  33. 2:22四つ書けば、左上、右上、右下、左下の順に、一つずつ個別に決められます。
  34. 2:28たとえば一レム、ゼロ、一レム、ゼロと書けば、対角だけが丸い個性的な形になります。
  35. 2:34順番は時計回りと覚えると読み間違えにくくなります。
  36. 2:38並び順を間違えると、丸くしたい角と違う角が変わるので、ブラウザーで必ず確かめましょう。
  37. 2:44丸みは真円の弧である必要はありません。
  38. 2:48スラッシュを挟んで書くと、横方向の半径と縦方向の半径を別々に指定でき、角の弧が楕円形になります。
  39. 2:55スラッシュの前が横方向、後ろが縦方向です。
  40. 2:59また、角ごとに専用の個別プロパティも用意されていて、左上だけ、右上だけといった細かい指定ができます。
  41. 3:07ボーダーレイディアスは、それらをまとめて書ける省略形です。
  42. 3:12普段はまとめて書き、特定の角だけ変えたいときに個別の指定を使う、と使い分けると管理しやすくなります。
  43. 3:20楕円の指定は最初は難しく見えますが、横と縦を分けて考えれば読み解けます。
  44. 3:26初期値と継承を確認します。
  45. 3:28ボーダーレイディアスの初期値は、四つの角に対応する個別プロパティの初期値を参照して決まります。
  46. 3:36実質的には丸みがない状態が基準です。
  47. 3:39そして、このプロパティは通常、親から子へ継承しません。
  48. 3:43親の箱に丸みを指定しても、中の画像や見出しに自動で同じ丸みが付くわけではないのです。
  49. 3:50共通の値として、インヘリットは親の計算値を使う指定、イニシャルは仕様の初期値に戻す指定です。
  50. 3:57アンセットは、継承しない項目なのでイニシャルとして扱われます。
  51. 4:02必要な要素それぞれに指定する、という前提を覚えておきましょう。
  52. 4:07継承しないため、子要素の画像などには別途指定が必要になる点も、後の注意点につながります。
  53. 4:15ここからは実例です。
  54. 4:16エイチティーエムエルでは、ステージという親の中に、デモというクラスを付けた箱を一つ置きます。
  55. 4:24中には少し長めの文章を入れて、文字が折り返したときの見え方も確認できるようにしています。
  56. 4:31頭の部分では、スタイルシートをリンクで読み込むのを忘れないでください。
  57. 4:36確認したいのは文章そのものではなく、箱の四隅の形です。
  58. 4:41文章量は角の丸みに直接影響しませんが、箱の高さが変わると全体の印象は変わるので、
  59. 4:46土台の状態を先に固定してから値を比べるのがポイントです。
  60. 4:51親のステージは、比較のための余白と枠を用意する役割だと考えてください。
  61. 4:57土台のシーエスエスです。
  62. 4:59全体にボックスサイジングを指定し、ステージには幅の上限と内側の余白、点線の枠と薄い背景を付けます。
  63. 5:06デモの箱には一レムの内側余白と、緑色の三ピクセルの枠、薄い緑の背景と文字色を指定します。
  64. 5:13そのうえで、最後の行でボーダーレイディアスに一レムを指定すると、枠線も背景も角の弧に沿って丸くなります。
  65. 5:20次に値だけをゼロへ置き換えてみましょう。
  66. 5:23他はまったく同じなのに、角が直角に戻り、印象がきりっと硬くなります。
  67. 5:28変えたのはこの一行だけ、という点に注目してください。
  68. 5:32再読み込みのたびに角だけが切り替わる様子を見ると、プロパティの働きが実感できます。
  69. 5:38使うときの注意点です。
  70. 5:40箱の背景や枠線は角の弧に沿って描かれますが、中に入れた画像は別の要素なので、
  71. 5:45そのままでは角の部分に画像がはみ出して見えることがあります。
  72. 5:49その場合は、画像自身にも同じ丸みを指定するか、包んでいる要素にオーバーフローの指定を加えて、
  73. 5:54角の外側を切り取る方法を検討します。
  74. 5:59ただし、オーバーフローで隠す指定は、キーボードフォーカス時の輪郭線まで切り取ってしまう場合があります。
  75. 6:06内側に操作要素があるときは、フォーカス表示が欠けないか必ず確認しましょう。
  76. 6:11見た目を整える指定が、使いやすさを損なわないかまで含めて判断することが大切です。
  77. 6:17効かないと感じたときの確認手順です。
  78. 6:20まず開発者ツールで順番に調べます。
  79. 6:23ネットワークでスタイルシートが正常に取得できているか、エレメンツで対象のクラスとシーエスエスのセレクターが一致しているか、
  80. 6:30スタイルズで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見て、
  81. 6:37最後にコンピューテッドで最終的な値を確認します。
  82. 6:44丸みが付いていても、背景も枠もない要素では変化に気付けない場合もあります。
  83. 6:50三百二十ピクセル程度の狭い画面や文字の拡大、キーボード操作でも内容を利用できるか、
  84. 6:54あわせて確認しましょう。
  85. 6:59一度に全部を直さず、一か所ずつ原因を切り分けると、解決までが早くなります。
  86. 7:05最後に互換性とまとめです。
  87. 7:07記事が参照するエムディーエヌの記録では、クローム四以降、エッジ十二以降、
  88. 7:13ファイアフォックス四以降、サファリ五以降などで対応が示されていて、長く安心して使えるプロパティです。
  89. 7:19まとめます。
  90. 7:20ボーダーレイディアスは箱の角を丸くするプロパティで、長さや割合を最大四つまで並べられ、
  91. 7:25スラッシュで楕円の丸みも作れ、通常は継承しませんでした。
  92. 7:30練習として、一レムとゼロの違いを言葉で説明し、文章量や親の幅だけを変えて結果を比べてみてください。
  93. 7:37関連するボーダーやアウトラインも学ぶと、箱の見た目の調整が広がります。
  94. 7:42お疲れさまでした。
  95. 7:44まずは自分の手元のカードやボタンに一レムを指定して、印象の変化を試してみてください。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

border-radiusの役割と主な指定値を解説。箱の角が丸くなります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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