[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″]
まとめ
いかがでしょうか？
大昔は、画像で縁取りや角丸を作っていた頃もありました。。。
便利な世の中になったものです！
CSS３のアニメーションと組み合わせたり、枠を歪めて印象的なページにしてみたり、何かと応用が効くborder-radiusです。
WoedPressのブロックエディタで構築するときも、比較的簡単に適用できるので使って見てください。
[ad_tag id=”1839″]