サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

角を丸くする(border-radius)

角を丸くする(border-radius)

この記事にはプロモーションが含まれています。

Webサイトを作り始めの頃は、正方形や長方形ばかりを並べてしまい「見やすいんだけど会議の資料っぽい感じ」になってしまいがちです。ということで、今回は四角形を卒業するためのCSSプロパティである、border-radiusプロパティを紹介していきます。

– 目次 –

動画内容:角に丸みをつける方法

要素に境界線をつけるには、borderプロパティを指定しますが、そのままでは全ての角が直角になるので、四角形が並んだ画一的なデザインになってしまいます。

市役所のホームページなど、オリジナリティや躍動感のあるようなデザインよりも、多くの人にとって見やすいレイアウトであることが重要視されるケースでは、あえて画一的なデザインが採用されていることもありますが、個人や企業のホームページが役所っぽかったら面白みや独創性に欠けてしまいます。

例として、下の2つの見出しを見比べてみましょう。

お堅い感じの見出し

個性的な見出し

いかがでしょうか?

もちろん、お堅い感じの見出しがダメということは決してありません。無難なデザインですが読みやすく、老若男女問わず多数の人に受け入れられやすいという、大きなメリットがあります。
ただ、あえてデメリットも付け加えるならば、無難すぎて印象に残りにくい・目を引きにくいとも言えてしまいます。

一方、個性的な見出しは、好き・嫌いの好みが分かれる可能性は高くなってしまうものの、個人や企業の個性・イメージを表現できて、見た人の記憶に残りやすいという特徴があります。

整然とした無難なWebサイトは、CMSのテンプレートをそのまま利用すれば良いですし、今後さらに技術開発が進めば、より誰でも簡単にWebサイトが作成できるようになることが予想されます。
そういった意味でも、無難すぎず、ターゲット層の人の心に響く個性的なWebサイト制作はとても大事で、強みになります。

というわけで、今回は境界線の角に丸みをつけて柔らかい雰囲気にしたり、個性的な形にするCSSプロパティをご紹介します!

用語解説:CMS(シーエムエス)

今回紹介するCSSプロパティは、border-radiusプロパティです。

複雑な形にするには少し細かい指定が必要ですが、角を丸くするだけならとても簡単ですよ!😀

4つの角を同じだけ丸くする

まずはborder-radiusプロパティの基礎からいきましょう!

第1ステップとして、4つの角を全て同じだけ丸くする…という調整をしていきます。

4つの角を全て同じだけ丸めるには、次のようにborder-radiusの値を1つだけ設定します。

*4つの角を丸める調整*
■セレクタ { border-radius: 丸めたい半径の数値+単位(px,%など); }

たとえば50%と指定したら、四隅がそれぞれ半径50%丸められる→隣接する角を足すと合計100%となってまん丸になる…ということになります。
四隅の一括指定の場合、50を超える数値+%で指定しても、それ以上には丸まらないということですね。

こういうのは、文章を読んで理解するよりも、実際に自分で設定してみた方が分かりやすいので、border-radiusの値を自由に変更して遊べる機能を用意しました。 単位はpxと%を選ぶことができます。

四隅が全て一律に、入力した数値に応じて丸められることが確認できたかと思います。

ちなみに、試した方もいるかもしれませんが、負の値は無効です。

角を丸めることで、やさしい・穏やか・温和といったイメージを与えることができます。

強烈な・力強いメッセージを伝えたい場合は、角張った形の方が勢いがあり、親近感・親しみやすさを感じさせたい場合は角を丸めるとイメージに合います。(下のサンプルを参照下さい)

超!激安SALE!!

★news★お知らせ

▲のサンプルはpタグにborder-radiusを設定していますが、border-radiusプロパティは基本的に、どんなタグにでも設定することができます。
なので、入力フォームを丸めることもできます↓(丸め過ぎると入力しづらくなるので注意!)

    POINT!
  1. ・要素の4隅を均一に丸めるには、border-radiusの値を1つ指定する!
  2. ・値は、数値+単位で指定する!
  3. ・divタグやpタグなどに限らず、ほとんどのタグに適用させることが可能!

角の丸みを個別に指定する

角の丸め具合は、4つの角が全て同じように丸まってほしいケースの方が多いですが、時として角によって丸め具合を変えたい…という場合もあります。

単にちょっと変わった形にしたいという場合もですが、以下のようなタブ付きボックスを作りたい場合などに役立ちます。

tab
text

▲サンプルのタブ(tab)部分の右下と左下の角にご注目下さい。ここだけ角が丸まらずに、下の「text」と書かれたボックスに直線で繋がっています。
もしこの部分まで丸めてしまったら、サンプルのように直線で下のボックスにつながりません。

このように、角の丸め具合を角の位置によって変えることで、ボックスのデザインの幅をより広げることができます。

角を個別に指定するには、border-radiusに値を複数指定する必要があります。

左上の角 右上の角

左下の角 右下の角

…の順で指定します。具体的な記述例は以下です。

*4つの角の丸め具合を個別に指定*
{ border-radius: 10px 5px 15px 0 ; }

負の値は無効ですが、ゼロの値を指定することで、角を丸めないことは可能です。

また、4つの角を一括で指定する場合は隣接する角も同じ数値になるため、50%と設定したら合計100%となり、それ以上には丸まらないのですが、個別に指定する場合は隣接する角の値が関係なくなるので、50%を超える値を設定するとさらに丸まります。

色々説明しましたが、結局のところそれぞれ値を指定したらどんな感じになるのか、実際に試してみるのが手っ取り早いです。
ということで、個別に値を設定できる機能を用意しました。思う存分、試して下さいね!

ちなみにですが、以下のように値を2つだけ指定した場合、

{ border-radius: 10px 40px; }

この場合は、左上と右下の角=半径10px・右上と左下の角=半径40px…で角が丸められます。

値が2つの場合、左上&右下・右上&左下の対角にそれぞれ値が適用されるということです。

また、以下のように値が3つの場合、

{ border-radius: 10px 40px 0; }

この場合は、左上の角=半径10px・右上と左下の角=半径40px・右下の角=0(丸まらない)…という調整になります。
ただし、同じ結果が得られるとしても、値を3つだけ指定するより4つ指定した方が分かりやすいです。
コーディング効率もさほど変わらないですし、省略できる場合でも基本的に値を4つ指定しておく方が良いと思います。

    POINT!
  1. ・border-radiusに複数の値を指定することで、4つの角の丸まりを個別に指定することも可能!
  2. ・左上・右上・右下・左下の順に値を指定する!
  3. ・値は2つや3つでもOKだが、分かりやすいのは4つ指定する方法!

横の半径と縦の半径

ところで、border-radiusの値は「丸める半径」を指定するものでしたが、半径には2種類あります。

それは、横の半径と縦の半径です。まずは下の図形をご覧ください。

半径には赤い横線と、青い縦線があるというのが分かります。
これまでに紹介してきた角を丸める調整方法は、横と縦の半径が全く同じ(10pxなら横も縦も10pxの半径)でしたが、実は横と縦の半径の比率を変えることができます。

以下のようにborder-radiusの値を/(スラッシュ)で区切ることで、横の半径/縦の半径…というふうに設定することができます。

*横の半径と縦の半径を別にする*
{ border-radius: 10px / 20px; }

繰り返しになりますが、/の前(先に指定する値)が横の半径で、/の後に指定する値が縦の半径です。

それでは、サンプルコードと表示結果を見てみましょう!

    <div class="sample_box"></div>

      .sample_box {
        width: 200px;
        height: 100px;
        background-color: green;
        border-radius: 10px / 30px;
      }

サンプルでは、border-radius: 10px / 30px としているので、縦の半径の方が大きい指定になっています。
なんとなーく、「縦に長い丸み」になっているのが分かるかと思います。

そして毎度のことですが、値を自由に変更できるサンプルも用意しているので、どのように変形するか遊んでみてください!
*横と縦の半径、どちらの値も1以上の値を指定する必要があります。

    POINT!
  1. ・角の丸みをつける半径には、横と縦の2種類がある!
  2. ・border-radiusの値を/(スラッシュ)で区切ることで、半径を別々に設定できる!
  3. ・/の前が横の半径、/の後が縦の半径になる!

4つの角と横・縦の半径を個別に設定

半径には横と縦の2種類があり、そして四角形の角は4つあります。

…ということは最多で、2×4=8つの値を取ることが出来るということになります。
左上の角の横の半径・縦の半径、右上の角の横の半径・縦の半径…といった具合ですね。

ここで復習ですが、4つの角を個別に設定する場合の値の順番は、

①左上 ②右上 ③右下 ④左下 でした。

そして、横と縦の半径の値の順番は

①/(スラッシュ)の前が横 ②/の後が縦の半径 でしたね。

ここからが本題です。「/(スラッシュ)の前に値を4つ、/の後に値を4つ指定すると、どういうことになるか?」

もうお分かりかと思いますが、答えは、左上→右上→右下→左下の角の順番に、/(スラッシュ)の前の値が横の半径に、/の後の値が縦の半径になる…ということになります。

つまり、4つの角の、さらに横の半径と縦の半径を個別に設定するには、以下のような記述をします。

*4つの角とそれぞれの半径を個別に指定*
{ border-radius: 50px 20px 0 150px / 20px 50px 0 20px; }

それでは、サンプルコードと表示結果です。

    <div class="box1"></div>

    .box1 {
      width: 200px;
      height: 150px;
      background-color: green;
      border-radius: 50px 20px 0 150px / 20px 50px 0 20px;
    }

このように、4つの角を個別に指定するだけでなく、さらに横と縦の半径を分けて設定することにより、かなり複雑な形も作り出すことができます。

…作るのがとても面倒くさかったのですが笑、それぞれの値を変更できる機能をここでも用意したので、色んな組み合わせを試してみてください!
*上の4つが横の半径、下の4つが縦の半径です。そして左から順に、左上・右上・右下・左下の角となっています*


    POINT!
  1. ・4つの角に、それぞれ横と縦の半径を個別に設定できる!
  2. ・左上→右上→右下→左下の角の順と、/(スラッシュ)の前が横の半径、/の後が縦の半径というのは、他の調整方法と同じ!

ワンポイントチェック

「角を丸める」と言うと単純に聞こえますが、これを利用することで様々な図形や物を表現することができます。

例として、ここでは2枚の葉っぱをつけた植物を作ってみましょう。

横に100px、縦に80pxの横長の長方形の箱を2つ用意して、background-colorを緑にします。そして、片方の箱に
border-radius: 0px 150px 0px 150px;

もう片方の箱には、
border-radius: 150px 0px 150px 0px;

とします。そして茎となる部分を作って、flexやgridでレイアウトすると…?

このように、画像に頼らなくてもCSSだけで表現することが可能です。

画像だとサイズや形式によっては読み込むのに時間がかかりますが、CSSはそれよりも軽い上に、SVG形式の画像のように拡大してもぼやけることがないというメリットがあります。

皆さんもぜひ、CSSで色々なパーツを作ってみてくださいね!
以下に、葉っぱのサンプルコードを置いておきます。

    <div class="reafbox">
      <div class="box2"></div>
      <div class="box1"></div>
      <div class="kuki"></div>
    </div>

    .box1 {
      width: 100px;
      height: 80px;
      background-color: green;
      border-radius: 150px 0px 150px 0px;
    }
    .box2 {
      width: 100px;
      height: 80px;
      background-color: green;
      border-radius: 0px 150px 0px 150px;
    }
    .reafbox {
      display: grid;
      grid-template-columns: repeat(2,auto);
      justify-content: center;
    }
    .kuki {
      height: 50px;
      width: 10px;
      background-color: green;
      grid-column: 1 / 3;
      justify-self: center;
    }

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
  .box {
    margin: 300px auto;
    width: 300px;
    height: 200px;
    background-color: darkgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    color: white;
  }
  .box1 {
    border-radius: 20px;
  }
  .box2 {
    border-radius: 20px 80px 0 40px;
  }
  .box3 {
    border-radius: 100px / 50px;
  }
  .box4 {
    border-radius: 100px 50px 20px 90px / 30px 150px 70px 90px;
  }
  .box6 {
    width: 100px;
    height: 80px;
    background-color: green;
    border-radius: 150px 0px 150px 0 / 150px 0 150px 0;
  }
  .box5 {
    width: 100px;
    height: 80px;
    background-color: green;
    border-radius: 0px 150px 0px 150px / 0px 150px 0px 150px;
  }
  .reafbox {
    display: grid;
    grid-template-columns: repeat(2,auto);
    justify-content: center;
  }
  .kuki {
    height: 50px;
    width: 10px;
    background-color: green;
    grid-column: 1 / 3;
    justify-self: center;
  }
  </style>
  <body>

    <div class="box box1">4つの角を一括指定。<br>border-radius: 20px;</div>

    <div class="box box2">4つの角を個別に指定。<br>border-radius: 20px 80px 0 40px;</div>

    <div class="box box3">横の半径と縦の半径を別に指定<br>border-radius: 100px / 50px;</div>

    <div class="box box4">4つの角の横と縦の半径を個別に指定</div>

    <div class="reafbox">
      <div class="box5"></div>
      <div class="box6"></div>
      <div class="kuki"></div>
    </div>

    <div class="yohaku" style="height: 400px;">

    </div>

  </body>
</html>
« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン