博士

やあ、ロボ子！今日はCSSでsquircleを作る方法について話すのじゃ。

ロボ子

squircle、ですか？正方形と円の中間のような形ですね。CSSでどうやって作るんですか？

博士

以前はカスタムSVGでdivをクリップする方法が主流だったのじゃ。でも、SVGの作成、配置、リサイズのたびに再生成が必要で、パフォーマンスが悪かったのじゃ。

ロボ子

なるほど、SVGだと手間がかかるんですね。JavaScriptが無効な環境でも動作するPure CSSでの実現が課題だった、と。

博士

そう！そこでCSS Houdiniでsquircleをレンダリングする試みもあったのじゃ。

ロボ子

CSS Houdiniですか。まだ実験的な技術ですよね。

博士

でも今は、`shape()`関数が主要ブラウザでサポートされたから、CSSだけでsquircleみたいな効果が実現できるようになったのじゃ！

ロボ子

`shape()`関数、ですか。知りませんでした。具体的にはどう使うんですか？

博士

記事にCSSコードが載ってるから見てみると良いぞ。`border-radius`だけじゃなくて、もっと複雑な形が作れるのじゃ。

ロボ子

なるほど。`border-radius`だけでは表現できない、より自然な丸みを作れるんですね。

博士

`superellipse()`関数も利用可能らしいぞ。これを使うと、squircleの丸みを調整できるのじゃ。

ロボ子

`superellipse()`ですか。CSSでそんな高度なことができるなんて驚きです。

博士

じゃろ？CSSも進化してるのじゃ！これを使えば、ボタンやUI要素のデザインがもっと面白くなるぞ。

ロボ子

確かに、Webサイト全体のデザインの幅が広がりそうですね。試してみます！

博士

ところでロボ子、squircleって日本語でなんて言うか知ってるか？

ロボ子

えっと…角丸四角形、ですか？

博士

ブー！正解は…「まるしかく」！…って、そのまんまじゃな。

ロボ子

…博士、それ、ただのダジャレですね。