先日リリースされた Chrome 139 で、いくつかの新しいCSS機能が追加されましたよね。以前の記事でも触れた「カスタム関数」も正式サポートとなっており、多くの開発者が心を躍らせたんじゃないでしょうか。
さて、今回は “corner-shape” にフォーカスを当ててみたいと思います。
CSSの新しいプロパティ “corner-shape” は、これまでにない自由度でボックスの角をデザインできる画期的な機能です。従来の方法では実現できなかった角の形を簡単に作り出すことができるため、これまで実装を渋っていたデザインにも手を出しやすくなりますね。
corner-shape ってなんぞや？
CSSでボックスの角の形を直接制御する新しいプロパティです。このプロパティを使用すると、単に角を丸くするだけでなく、より複雑な形状を簡単に作ることができます。例えば、楕円形にする、凹んだ形にするなど、border-radius では表現できなかったデザインが可能になります。
従来の border-radius は丸い角を作るためのプロパティとして非常に広く使われてきましたが、corner-shape では更に多くの形状に対応できるようになります。
こんな値があります
- round: 従来通りの円弧または楕円弧
- scoop: 角をスコップですくい取った様な形
- bevel: 角を斜めにカットした形（これを利用して八角形やひし形も作れちゃう）
- notch: 角を直角に切り取った形
- squircle: スクワイル、直角と円弧の中間の形（よーするに角丸四角形）
- square: 直角
従来の方法と、どう違うの？
今までだって要素の角の形状を変える事はできてたし、わざわざ corner-shape なんて使う必要ある？ って思った方もいらっしゃるかもしれません。新しく登場したからには今までより便利であってほしい……そんな想いを込めて、従来の方法と比較してみましょう。
border-radius と clip-path の限界
これまで、角をデザインするための主なCSSプロパティは border-radius と clip-path でした。多少の制限はあるものの、ブラウザのサポート状況を見ても取り入れやすいプロパティですよね。ただ、表現したいデザインによっては限界を感じる開発者も少なくないんじゃないでしょうか。
border-radius：
最も一般的な方法。角を丸くすることはできましたが、形状を細かく制御するのは非常に難しかったです。例えば、楕円形や角が少し凹んだ形などを作りたくても、border-radius の値を細かく調整する必要があり、自由度が低いと感じることが多かったです。また、切り欠きなどの鋭角なデザインは実装できませんでしたね。
clip-path：
より複雑な形を作るためには clip-path を使う方法がありましたが、これもデザインに合わせた正確な形を作るには計算が必要で、手間がかかる場合が多かったです。直感的な設定が難しく、他のプロパティとの組み合わせが必要でした。また、特定の角の形だけを変えることはできませんでした。
corner-shape で自由度が爆上がり
従来の方法では避けられなかった手間が削減され、ボックスの角の形状を簡単に指定できるようになりました。corner-shape では、例えば「切り欠き」や「凹んだ角」を簡単に実現でき、視覚的なデザインがより直感的に行えるようになりました。なんといっても、corner-shape の値を設定するだけですからね。
インタラクティブなデザインを簡単に実現
corner-shape はボックスの角を動的に変更することができるため、インタラクティブなウェブデザインに非常に役立ちます。たとえば、ユーザーがマウスオーバーした際に角の形が変化するアニメーションもお手の物。これにより、視覚的に面白みのある、かつ直感的なインタラクションを提供できます。簡単なアニメーションを取り入れるだけでも、ユーザーにとって魅力的なデザインになりますよね。
superellipse(k) を活用すれば、より細かいデザイン調整も
corner-shape に値に superellipse(k) を指定すれば、要素の形状をさらに詳細に調整することができます。これは角の丸め具合を設定する関数で、k の値によって角の形を動的に変えるものなんですが、特にデザインを繊細に制御したい場合に有用です。
corner-shape を使う際の注意点
ウェブサイト上では、ユーザーにより良い体験を提供するためにインタラクティブデザインを採用する事が多いですよね。その上で corner-shape は非常に有用な機能だと言えます。その一方で、パフォーマンスにも目を向けなくてはなりません。複雑な形状やアニメーションを使用すれば、パフォーマンスに少なからず影響を与えます。そのため、特にモバイル端末向けのサイトでは慎重に使用すべきです。
また、古いブラウザや、corner-shape をサポートしていないブラウザでは代替手段を使用する必要があります。
ブラウザ対応状況
こんなに魅力的なプロパティなら、さっそく取り入れてみたくなりますよね。でもちょっと待ってください。ひとつ前のセクションでも触れたように、ブラウザによってはフォールバックが必要になってくるため、しっかりと確認しておく必要があります。ひとまず “Can I Use…” してみましょう。
CSS property: corner-shape
真っ赤にもほどがありますね。
現時点での corner-shape は Chrome 139 以降でサポートされていますが、他の主要ブラウザではまだサポートされていない状況です。そのため、クロスブラウザでの互換性を確保するためには、corner-shape を使用する際に代替手段を考える必要があります。border-radius や clip-path を使って角の形状をエミュレートする方法が、もっとも手っ取り早いかもしれません。
corner-shape で作る理想の角 ( カド )
corner-shape プロパティは、CSSでのデザインを大きく革新する新しい機能です。要素の形をより自由に、そして簡単にデザインすることができ、特にインタラクティブなデザインに強力な武器となります。
ただし、現時点では一部のブラウザでのみサポートされているため、クロスブラウザ対応が必要な場合はフォールバックが求められます。あるいは、プログレッシブエンハンスメントとして活用する方法も有効です。
これからCSSを学んでいく上で、corner-shape のような新しいプロパティに触れておくことは、より高度なデザインスキルを身につけるために大きなステップになります。ぜひ試してみてくださいね。
