【CSS-rules】shape-outside(形状に合わせた文字の回り込み)

[公開] 2024-08-02 / [更新] 2024-08-16

shape-outside は、floatした要素 ( 図形や画像、border-radiusなど ) の形状に合わせてテキストを回り込ませるcssプロパティ。

通常の矩形の回り込みではなく、オブジェクトの形に合わせて文字が回り込むので、使い方次第で面白いレイアウトが作れそうですね。

shape-outside プロパティ

.	shape-outside: 値	対象	指定値	単位	説明
1	`circle(50%);`	正円	`(円の半径)`	`%,px`	`50%`、正確な半径
	`circle(50% at 10px);`	正円	`(円の半径 at 移動量)`	`%, px`	回り込む要素の中心点をずらす
2	`ellipse(50% 50%);`	楕円	`(横半径縦半径)`	`%, px`	`50% 50%`,`正確な横縦半径`
	`ellipse(50% 50% at 10px 20px);`	楕円	`(横半径縦半径 at 横移動縦移動)`	`%, px`	回り込む要素の中心点をずらす
3	`polygon(0px 0px, 100px 0px, …);`	多角形	(ポイント, ポイント, ポイント, …)	`%, px`	パスを作成
4	`url(image.png);`	画像	透過png, 背景無しsvg	—	透過部分を無視する

clip-path:を利用した場合は、clip-path:の値をshape-outsideの値にそのまま書けばOK。
circle, ellipse は50%又は正確な半径を記載。数値が違うとshape-outside が適用されない
circle , ellipse の at は、shape-outside: をかけた要素ではなく、回り込む要素の位置をずらす
( 回り込む要素が重なってくる。/ 横位置→左移動、縦位置→上移動 )
背景透過の画像はurlだけで回り込みしてくれるので、背景透過画像を使うのがお勧め
背景透過以外の画像の場合、polygon(多角形)を使用し自分でパスを作成する必要がある

shape-outside サンプル

外枠などは共通設定にして、2重classをかけています

共通 css

CSS code

.shape {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 1.5em;
  padding: 15px;
  border: solid 1px #ccc;
  overflow: hidden;
}
.shape p { 
  margin: 0;
  font-size: 14px;
}

1. 正円 [ shape-outside: circle(); ]

仕事を遊び倒すをモットーにお仕事に邁進??しているオバサンWEBデザイナー兼フロントエンジニアの忘備録サイト。オリジナルテーマによるWordpressサイト作成を中心に、テーマ改修、サイト設定、デザイン、コーディング、画像作成やDTPなど幅広く行っています。

circle(); のコード

HTML code

<div class="shape shape1">
  <div></div>
  <p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>

CSS code

.shape1 div {
  aspect-ratio: 1 / 1;
  width: 130px;
  float: left;
  shape-outside: circle(50%);
  margin: 0 15px 15px 0;
  background: linear-gradient(45deg, #00FF24, #90FFFD);
  border-radius: 50%;
}

2.楕円 [ shape-outside: ellipse(); ]

ellipse(); のコード

HTML code

<div class="shape shape2">
  <div></div>
  <p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>

CSS code

.shape2 div {
  aspect-ratio: 1 / 1.3;
  width: 100px;
  float: left;
  shape-outside: ellipse(50% 50%);
  margin: 0 15px 15px 0;
  background: linear-gradient(45deg, #00FF24, #90FFFD);
  border-radius: 50%;
}

3. 多角形 [ shape-outside: polygon(); ]

polygon(); のコード

HTML code

<div class="shape shape3">
  <div></div>
  <p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>

CSS code

.shape3 div {
  aspect-ratio: 4 / 3;
  width: 150px;
  float: left;
  clip-path: polygon(0% 25%, 60% 25%, 60% 0%, 100% 50%, 60% 100%, 60% 75%, 0% 75%);
  shape-outside: polygon(0% 25%, 60% 25%, 60% 0%, 100% 50%, 60% 100%, 60% 75%, 0% 75%);
  margin: 0 15px 15px 0;
  background: linear-gradient(to bottom, #00FF24 50%, #00D01C 50%);
}

背景透過ではない画像の場合

こちらの shape-outside: polygon(); を利用します。
が、自分で画像に合わせたパスを作成するとなると。。。

現時点で Firefox なら画像パスが作れるらしいけど ( Chromeのアドオンはダメでした> < )、Firefox の利用率はメチャ低いし、この為だけに使うのもどうかと ^^;

複雑な画像パスを作る工数を考えたら、背景抜いて url() 使う方が現実的かな。

4. 画像(背景透過) [ shape-outside: url(); ]

shape-outside: url(); は、html と css 両方に同じ画像を指定する必要があります。

url(); (背景透過) のコード

HTML code

<div class="shape shape3">
  <div><img src="ttl-cat-sit-side.svg" alt=""></div>
  <p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>

CSS code

.shape4 div {
  aspect-ratio: 227 / 200;
  width: 140px;
  float: left;
  shape-outside: url(ttl-cat-sit-side.svg);
  shape-margin: 10px;
  margin-right: 10px;
}

他の要素との間隔を開ける (一応検証)

回り込む要素のみに適用される為、margin とは違い親要素に影響しません。

shape-outside: と周囲の要素との間を開けたい場合は shape-margin を利用 (モダンブラウザはフルサポート)とMDN にはありましたが、なかなか微妙だったり。。(Chrome, edge, 最新ver で確認 )

利用時はmargin も含め都度確認した方が良いかと思います。

プロパティ / 値	単位	説明
`shape-margin: 10px;`	`%, px, em` 等	shape-outside: と周囲の要素との間隔を設定

shape-outside: / 値	形状	利用	shape-margin の利用
× `shape-outside: circle()`	正円	不要	使わずに`margin`のみで設定した方が無難かも
× `shape-outside: ellipse()`	楕円	不要	使わずに`margin`のみで設定した方が無難かも
▲ `shape-outside: polygon()`	多角形	要検証	回り込む要素にだけ適用されるので、レイアウトによっては有用ただ形状によって`margin` の方がきれいに回り込む事もある
● `shape-outside: url()`	画像	必要	使用しないと間隔が開けられないが、間き方は微妙。 `margin` との併用を推奨