この記事では、CSSで角丸を作成する方法を紹介します。
また、4か所全部の角丸というだけではなく、一部分だけ角丸にする方法や、枠つきの角丸を作成する方法などについても解説しています。
CSSで角丸を作る方法
CSSで4か所全部を角丸にする方法は、以下のように設定します。
4か所全部角丸にする方法
border-radius: 1em;
/* 4か所全部なので指定は一つだけでOK */実際の表示がどのようになるのかは、こちらで確認いただけます。
＼CSSのタブを押すと、どうやって書いてあるかわかるよ
See the Pen Rounded corners with CSS by Shiromaru Akita (@akitashiromaru) on CodePen.
4か所角丸にするけど、それぞれ角丸の形を変えたい…というときは、以下のように書いておくとあとから編集が便利です。
border-radius: 1em 3em 3em 3em;
/* 左から順に「上、右、下、左」と時計回りの指定になっています */
/* 数値は別の数値や、pxなどお好みで指定してください */
しろまるちょっと違う角丸になってデザイン的にも可愛いですよね。
See the Pen Rounded corners with CSS 02 by Shiromaru Akita (@akitashiromaru) on CodePen.
一部分だけ角丸にする方法
全部角丸じゃなくて、一部分だけ角丸にしたい！という方は･･･
border-radius: 2em 0 0 0;
/* 左から順に「上、右、下、左」と時計回りの指定になっています */
/* 数値は別の数値や、pxなどお好みで指定してください */See the Pen Rounded corners with CSS 03 by Shiromaru Akita (@akitashiromaru) on CodePen.
しろまる全部角丸じゃないところが逆にオシャレ！
枠つきの角丸にする方法
角丸自体に枠（ボーダー）をつけたい、という方もいると思います。そんな場合は…
See the Pen Rounded corners with CSS 04 by Shiromaru Akita (@akitashiromaru) on CodePen.
角丸のCSSを使ってボタンを作る方法
この角丸を利用して、角丸ボタンを作るには以下のようになります。
しろまるa のタグにCSSを指定しますよ！
See the Pen 角丸ボタンを作る方法 by Shiromaru Akita (@akitashiromaru) on CodePen.
コーディングをするのに持っておきたいおすすめの本
HTMLやCSSの解説書はたくさんありますが、私がおすすめするのはコーディングに関する二種類の本を持っておくことです。
一つは、HTMLとCSSが最低限一目でわかる辞典（リファレンス）的な本。これがあれば巻末のインデックスから引いて調べることができるため、コーディング中に「あれどうやって書くんだったっけ？」というときに便利です。
ポチップ
もう一つは、現在のコーディングがわかる本。初心者本でもいいので「今のコーディングの基本はどんな感じかな？」というのがわかるものを読むようにしています。
しろまる最初に学校で学んだコーディングの技術だけでは必ず遅れが生じてくるもの。数年ごとに、新しい初心者本を読んでみるのはおすすめです。
ポチップ
ポチップ
