【CSS Modules】shapeメディア機能の使い方

Copy
1/*
2 * CSS Shapes モジュールを使用した、要素の周囲にテキストを回り込ませる例です。
3 *
4 * `shape-outside` プロパティは、要素の外側にテキストが流れるカスタムシェイプを定義します。
5 * この例では、画像などの要素の周りに円形のシェイプを作成し、テキストがその周りを自然に流れるようにします。
6 * `float` プロパティと組み合わせて使用する必要があります。
7 */
8.circular-shape-container {
9  /* 要素を左にフロートさせ、周囲のテキストを回り込ませる */
10  float: left;
11  /* 周囲のコンテンツとの間にマージンを設定し、テキストとの間隔を確保 */
12  margin: 0 20px 20px 0;
13
14  /* シェイプの基になる要素の幅と高さを定義 */
15  width: 150px;
16  height: 150px;
17  
18  /* シェイプを視覚的に分かりやすくするための背景色 (実際の使用では画像などを配置します) */
19  background-color: #add8e6; /* ライトブルー */
20  /* 要素自体を円形にするためのプロパティ */
21  border-radius: 50%;
22
23  /* --- ここが CSS Shapes の主要プロパティです --- */
24  /*
25   * `shape-outside: circle(50%)` は、要素の中央を原点とする半径50%の円形をシェイプとして定義します。
26   * このシェイプの外側をテキストが流れるようになります。
27   */
28  shape-outside: circle(50%);
29}
30
31/*
32 * 注意: このCSSファイルがCSS Modulesとして扱われる場合、
33 * 上記のクラス名 (`circular-shape-container`) は自動的にハッシュ化され、
34 * グローバルな名前衝突を防ぐローカルスコープのクラス名に変換されます。
35 * JavaScriptからは、例えば `import styles from './my-component.module.css';` のようにインポートし、
36 * `<div className={styles.circularShapeContainer}>...</div>` のように使用します。
37 */

このCSSコードは、CSS Shapesモジュールを利用して、Webページ上の要素の周囲にテキストを特定の形状で回り込ませる方法を示しています。特にshape-outsideプロパティが重要です。これは、要素の外側にテキストが流れるカスタムシェイプを定義するものです。

サンプルコードでは、.circular-shape-containerクラスにfloat: left;とshape-outside: circle(50%);を適用しています。floatプロパティは要素を左に寄せ、周囲にテキストを回り込ませるために必須です。shape-outsideプロパティに指定されているcircle(50%)が、シェイプの形状とサイズを定義する「引数」にあたります。この引数によって、要素の中央を原点とする半径50%の円形がシェイプとして設定され、テキストはその円形に沿って流れるようになります。このプロパティ自体に直接的な戻り値という概念はありません。

コード内のwidth、height、background-color、border-radius: 50%;は、シェイプの基となる要素を視覚的に円形にするための設定です。これにより、指定した円形のシェイプの外側をテキストが自然に回り込む、美しいレイアウトを作成できます。

補足として、このCSSファイルがCSS Modulesとして扱われる場合、クラス名であるcircular-shape-containerは自動的にローカルスコープのクラス名に変換され、グローバルな名前衝突を防ぎます。JavaScriptからは特定の構文でインポートして使用する形になります。

Copy
1/*
2 * CSSのshape-outsideプロパティのサンプルコード。
3 * 浮動要素の周囲にコンテンツを特定の形状で回り込ませます。
4 * これにより、Webページのレイアウトに視覚的な面白さを加えることができます。
5 */
6.custom-shaped-float {
7  float: left; /* 要素を左に浮かせ、周囲のコンテンツが回り込むように設定 */
8  width: 150px; /* 要素の幅 */
9  height: 150px; /* 要素の高さ */
10  margin: 0 20px 20px 0; /* 浮動要素と周囲のコンテンツの間に余白を作成 */
11  background-color: #add8e6; /* 要素の背景色（形状を視覚的に確認しやすくするため） */
12  border-radius: 50%; /* 要素自体を円形に表示 */
13
14  /*
15   * shape-outsideプロパティで、周囲のコンテンツが回り込むパス（形状）を定義します。
16   * ここでは、要素の中心から半径50%の円形に沿ってコンテンツが回り込みます。
17   * これにより、テキストなどがこの円形の周りに配置されるようになります。
18   */
19  shape-outside: circle(50%);
20}

このサンプルコードは、CSSのshape-outsideプロパティの使用方法を示しています。shape-outsideは、Webページ上で浮動要素（floatプロパティで配置された要素）の周囲に、コンテンツ（主にテキスト）がどのような形状で回り込むかを定義するためのプロパティです。これにより、単なる四角形ではなく、より多様で魅力的なレイアウトをデザインできるようになります。

まず、.custom-shaped-floatクラスを持つ要素は、float: left;によって左に浮かせられ、周囲のコンテンツがその右側に回り込むように設定されています。widthやheightで要素の大きさを、marginで周囲との余白を調整し、background-colorで背景色を設定しています。border-radius: 50%;は、要素自体の見た目を円形にするための設定です。

このコードの核心は、shape-outside: circle(50%);という記述です。このshape-outsideプロパティは、実際にコンテンツが回り込む「形状のパス」を指定します。ここではcircle()という関数を使用しており、その引数として50%を指定することで、要素の中心から半径が50%の円形に沿ってコンテンツが回り込むように定義しています。これにより、要素自体が円形であるかどうかにかかわらず、テキストなどの周囲のコンテンツはこの仮想の円形パスに沿って配置されます。

この設定により、浮動要素の周りにテキストが滑らかな円形に沿って配置され、従来の四角いレイアウトでは難しかった、視覚的に洗練されたデザインを実現することが可能です。shape-outsideプロパティ自体には直接的な戻り値はありませんが、その効果としてコンテンツの回り込み形状が定義され、Webページのレイアウトが変更されます。