CSSで正円や角丸が作れる
デザインを作っていると、正円を初めとしたオブジェクトって画像として書き出してコーディングしているのかと思いがちですが、CSSで簡単に作れちゃうんですよね。
すごいですよね…
でも%とか計算が必要なんじゃないの？どんなコードを書くの？という疑問が生まれたので、調べてみました！
border-radiusを使う！
円・角丸を作るときは「border-radius」で丸みを指定するようです！
角丸を作る場合
例えばイラレやフォトショで角丸を「30px」で作っていた場合は以下のように書きます。
border-radius: 30px
部分的に角丸にしたい場合は以下のように書きます。
border-radius: 30px（左上）0（右上）30px（右下）0（左下）
正円を作る場合
正円はborder-radiusで四隅に50％の角丸を指定することで円を作ることができるようです。
border-radius: 50%
まとめ
今回はCSSで正円・角丸を作る方法を調べてみました！
コーダーはデザインを忠実に再現しながらも、いかに軽く作れるかを考えないといけないから大変ですよね。
それがCSSだけで作れるのか知識を持っているだけでなく、知識はなくても調べようとする意識も大切です。
なるべく知識を得て、デザイナー目線だけでなくコーダー目線のときも役に立つようにしたいですね！
コメント