CSSでボタンやボックスの角を丸くする方法を現役デザイナーが解説【初心者向け】
初心者向けにCSSでボタンやボックスの角を丸くする方法について解説しています。border-radiusプロパティを使うことでボックスを角丸にすることができます。値と角丸の半径の関係、各角だけを指定しての設定方法などを学びましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回は、角を丸くするborder-radiusプロパティについて解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
ボタンやボックスの角を丸くする方法について詳しく説明していくね！
お願いします！
border-radiusプロパティの基本的な使い方
border-radiusは、ボックスの上下左右4つの角を丸くする楕円の半径を指定することで、好きな形の角丸にすることができます。半径は長さをpxやem、%などで指定することができま、下記のように書きます。
/*border-radius:角丸の半径;*/ border-radius:30px;
HTML:
<div class="box1"> 角の丸いボックスを作ってみよう！ </div>
CSS:
.box1{
width:500px;
height:300px;
background:gold;
border-radius:30px;
}
全ての角を一括、または各角を個別に丸くする方法
先ほどは、上下左右同じだけ角を丸くしましたが、1つ1つの角に対して角丸を設定することが可能です。
/*左上*/ border-top-left-radius:10px; /*右上*/ border-top-right-radius:30px; /*左下*/ border-bottom-left-radius:50px; /*右下*/ border-bottom-right-radius:70px
また、上記は下記のようにまとめて書くこともできます。
/*border-radius:左上 右上 右下 左下;*/ border-radius:10px 30px 50px 70px;
左上 右上 右下 左下の順番で、半角スペース区切りで値を指定します。
HTML:
<div class="box1"> 角の丸いボックスを作ってみよう！ </div>
CSS:
.box1{
width:500px;
height:300px;
background:gold;
border-radius:10px 30px 50px 70px;
}
また、上記は角丸にするときの円が正円でしたが、上下の半径と左右の半径が異なる楕円でも角丸にすることが可能です。この場合には、上下の半径と左右の半径を指定します。
/*border-radius:左右の半径 / 上下の半径;*/
border-radius:70px / 30px;
また、ボックスの上下左右に個別に上下と左右の半径が異なる角丸を設定したい場合には、下記のように4つの左右の半径と上下の半径をスラッシュ(/)で区切って指定することもできます。
/*border-radius:左上の左右の半径 右上の左右の半径 右下の左右の半径 左下の左右の半径 / 左上の上下の半径 右上の上下の半径 右下の上下の半径 左下の上下の半径 */
border-radius:70px 30px 10px 5px / 5px 10px 30px 70px;
角を丸くした応用例を見てみよう
border-radiusを適用するボックスの形と、角丸の半径の値の組み合わせで、円などのさまざまな形のボックスを作ることが可能です。また、border-radiusは画像要素にも適用することが可能です。
HTML:
<div class="box1"> 円 </div> <div class="box2"> 楕円 </div> <div class="box3"> 葉のような形 </div> <img src="./images/banana.jpg">
CSS:
.box1{
width:100px;
height:100px;
background:gold;
border-radius:100%;
}
.box2{
width:200px;
height:100px;
background:tomato;
border-radius:50%;
}
.box3{
width:150px;
height:100px;
background:limegreen;
border-radius:70px 0;
}
img{
width:150px;
height:auto;
border-radius:30px;
}
角を丸くしたボタンやボックスを作ってみよう
border-radiusを使って、角丸を多用したカード型の商品紹介ボックスを作成してみましょう。
HTML:
<div class="box"> <img src="./images/banana.jpg" alt="バナナ"> <span>フルーツ</span> <h1>バナナ / Banana</h1> <p>そのまま食べても、ジュースにしてもおいしいフルーツです！</p> <a href="#">レシピはこちら</a> </div> <a class="btn" href="#">NEXT</a>
CSS:
.box{
width:300px;
margin:0 auto;
padding:2em;
background:#fff;
border:#ddd 5px solid;
border-radius:10px;
}
.box img{
width:100%;
height:auto;
border-radius:30px 0;
}
.box span{
display:inline-block;
margin:1em 0 0 0;
background:gold;
font-size:12px;
padding:.5em 1em;
border-radius:.5em;
}
.box h1{
margin:1em 0;
font-size:20px;
font-weight:bold;
}
.box p{
line-height:1.6;
}
.box a{
display:block;
height:50px;
margin:1em 0;
line-height:50px;
background:tomato;
color:#fff;
border-radius:25px;
box-shadow:0 5px 0 gold;
text-decoration:none;
text-align:center;
}
.btn{
display:block;
width:70px;
height:70px;
margin:1em auto;
line-height:70px;
background:gray;
border-radius:100%;
color:#fff;
font-size:10px;
font-weight:bold;
text-decoration:none;
text-align:center;
}
ボタンなどを作成するのに使用する<a>要素などのインライン要素はブロックレベル要素、またはインラインブロック要素にする必要があります。上記の例では<span>タグと<a>タグにdisplay:block;やdisplay:inlie-block;を適用しています。
border-radiusの値とボックスのサイズの組み合わせで、さまざまな角を丸くする表現ができました。
上記の例から、角を丸くするだけでも印象が大きく変わることがわかります。Webサイトのコンセプトやデザインに合わせて、角を丸くするデザインを取り入れてみてください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
