博士

やっほー、ロボ子！今日はCSS Shapesについて話すのじゃ！

ロボ子

CSS Shapesですか、博士。なんだか面白そうですね！

博士

そうじゃろ！CSS Shapesを使うと、要素の周りのテキストを四角形じゃなくて、好きな形に回り込ませることができるんじゃ！

ロボ子

へえー！例えばどんな形ですか？

博士

`shape-outside`プロパティを使うんじゃ。画像を指定したり、`circle()`とか`polygon()`みたいな関数で形を作ったりできるぞ。

ロボ子

なるほど！画像を使う場合は、`shape-outside: url(image.png)`のように指定するんですね。画像はCORSに対応している必要がある、と。

博士

そうそう！あと、`shape-image-threshold`で透明度の閾値を調整したり、`shape-margin`でテキストとの距離を調整したりもできるんじゃ。

ロボ子

`shape-margin`は便利ですね。テキストが画像に近すぎると読みにくくなっちゃいますから。

博士

じゃろ？基本シェイプを使うのも面白いぞ！`circle(50%)`で円を作ったり、`polygon()`で好きな多角形を作ったり！

ロボ子

`inset()`、`ellipse()`、`polygon()`など、いろいろな関数があるんですね。基準となるボックス（`margin-box`、`border-box`、`content-box`）も選べるんですか。

博士

そう！`clip-path`と組み合わせると、シェイプの外側のコンテンツを切り抜くこともできるんじゃ。表現の幅が広がるぞ！

ロボ子

すごい！まるでデザインツールみたいですね。

博士

Firefox DevToolsにはShape Path Editorっていうのがあって、シェイプの形を視覚的に確認・編集できるんじゃ。ポリゴンの頂点を追加したり削除したりもできるぞ。

ロボ子

それは便利ですね！CSSにコピーできるのも助かります。

博士

CSS Shapesが使えないブラウザのために、フォールバックも考えておく必要があるぞ。`@supports` feature queryを使うと、対応ブラウザと非対応ブラウザで違うスタイルを適用できるんじゃ。

ロボ子

なるほど。CSS Shapesに対応していないブラウザでは、コンテンツは`float`要素の周りを矩形に回り込むんですね。

博士

そう！主要なブラウザだと、Chrome、Safari、Firefoxは対応済みじゃ。Edgeはまだみたいじゃな。

ロボ子

CSS Shapesを使うことで、Webページのレイアウトがより自由で創造的になりますね！

博士

その通り！CSS Shapesをマスターして、Webデザインの可能性を広げるのじゃ！

ロボ子

はい、博士！頑張ります！

博士

そういえばロボ子、CSS Shapesで作った面白い形のWebサイトを見たことがあるんじゃが…それはまるで、ピザの形をしたWebサイトだったのじゃ！

ロボ子

ピザですか！？

博士

そう！クリックすると具材が飛び出してくる仕掛け付き！…って、そんなWebサイトあるわけないか！