テキストの回り込みのためのshape-outside
フロート要素にshape-outsideを指定し、カスタム図形に沿ってテキストを回り込ませます。
「テキストの回り込みのためのshape-outside」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
CSS Shapesモジュール
CSS Shapesモジュールを使うと、テキストを非長方形の形状に沿って回り込ませることができます。主要なプロパティはshape-outsideで、テキストが回り込む形状を定義します。
shape-outsideの要件
shape-outsideはフロートされた要素でのみ機能します。隣接するテキストを定義した形状に沿って回り込ませるには、要素を左または右にフロートさせる必要があります。
<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>
shape-outside: circle()
フロートされた要素を基準に定義した円形のパスに沿って、テキストを回り込ませます。
<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>
shape-outside: ellipse()
楕円形のパスに沿ってテキストを回り込ませます。
<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>
shape-outside: polygon()
多角形のパスに沿ってテキストを回り込ませ、複雑なエディトリアルレイアウトを実現できます。
<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>
画像を使ったshape-outside
URLを指定すると、画像のアルファチャンネルを形状の境界として使用できます。画像の透明でない領域に沿ってテキストが回り込みます。
<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>
shape-margin
shape-marginは、shape-outsideのパスと回り込むテキストの間に余白を追加します。
<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>
shape-image-threshold
画像をshape-outsideに使用する場合、shape-image-thresholdはシェイプの境界を定義するアルファ透明度のしきい値（0～1）を設定します。
デザインへの応用
CSS Shapesを使用すると、雑誌のようなエディトリアルレイアウト、シェイプに沿って画像の周囲にテキストを回り込ませたプルクォート、形状が不規則なテキストフローによるドロップキャップ領域を実現できます。これらは以前、印刷デザインやSVGでしか実現できなかった効果です。
ブラウザー対応
基本シェイプ（circle、ellipse、polygon、inset）を使用するshape-outsideは、すべてのモダンブラウザーでサポートされています。画像URLを使用するshape-outsideは、より広くサポートされていますが、対応状況が異なる場合があります。必ずテストしてください。
実践例：ドロップキャップ
大きな装飾文字の周囲にテキストを回り込ませる、三角形のドロップキャップ領域です。
<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>
確認問題
要素上でshape-outsideを機能させるには、何が必要ですか。
まとめ
shape-outsideを使用すると、floatされた要素に定義した長方形以外のシェイプの周囲にテキストを回り込ませられます。シェイプには、円、楕円、多角形、画像のアルファチャンネルを使用できます。余白を確保するにはshape-marginを使用します。clip-pathと組み合わせると、要素を定義したシェイプに見た目上合わせられます。
よくある質問
「テキストの回り込みのためのshape-outside」レッスンは無料ですか？
はい。「テキストの回り込みのためのshape-outside」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「テキストの回り込みのためのshape-outside」で何を学びますか？
フロート要素にshape-outsideを指定し、カスタム図形に沿ってテキストを回り込ませます。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「テキストの回り込みのためのshape-outside」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- polygon()とcircle()によるclip-path
- テキストの回り込みのためのshape-outside
- clip-path図形のアニメーション
- CSSマスクとClip-pathの比較