Kaffee

[ad_tag id=”1828″]

画像やブロックなどの、要素の角を丸くしたい!

デザイナーから、WordPressで構築中のサイトのコンテンツの一部に角丸ボックスを入れて、そこに記事を掲載したいとの要望がありました。

テーマやエディタによっては設定項目があったりしますが、あいにく今回はCSSを記述する必要がありました。

そこで、おさらいとメモを兼ねた今回の記事となりました。

[ad_tag id=”1832″]

方法

角丸自体は簡単ですね。

div {
  border-radius: 10px 20px 30px 40px;
}

あえて説明すると、セレクター { border-radius: 左上 右上 右下 左下; } です。

指定したpxの半径で円弧を描いてくれます。

わかりやすく分解すると

div {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

となり、実際に表示されると

となります。

ブロックの左上が半径10pxの円弧。

右上が20pxの円弧。

右下が30pxの円弧。

左下が40pxの円弧となり、左上から時計回りで指定していきます。

pxだけでなく、%も使用できます。

例えば

div {
  border-radius: 10% 20% 30% 40%;
}

ならこうなります。

これは縦横100pxの正方形ですので、px指定の時と同じように単純な円弧で描かれていますが、長方形になるとどうなるでしょうか?

答えはこれです。

角が綺麗な円弧ではなくなりました。

縦・横100pxの正方形の場合、左上10px(10%)、右上20px(20%)、右下30px(30%)、左下40px(40%)の半径の円弧で丸められましたが、縦100px・横300pxの長方形の場合、左上 縦10px・横30px、右上 縦20px・横60px、右下 縦30px・横90px、左下 縦40px・横120pxの円弧で描かれます。

このような長円の円弧はpx指定でも可能です。

これはpx指定で全く同じ形を再現しています。

記述は

div {
  border-radius: 30px 60px 90px 120px / 10px 20px 30px 40px;
}

/(スラッシュ)で区切られた左側が円弧の横のサイズ、右側が円弧の縦のサイズ。並びは左上から時計回りです。

border-radiusで正円も描けます。

記述は下の通りです。

div {
  border-radius: 50%;
}

これを応用すると、こんなこともできます。

[ad_tag id=”1836″]

まとめ

いかがでしょうか?

大昔は、画像で縁取りや角丸を作っていた頃もありました。。。

便利な世の中になったものです!

CSS3のアニメーションと組み合わせたり、枠を歪めて印象的なページにしてみたり、何かと応用が効くborder-radiusです。

WoedPressのブロックエディタで構築するときも、比較的簡単に適用できるので使って見てください。

[ad_tag id=”1839″]