Mill's Note

【CSS-rules】shape-outside

/

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

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

shape-outside プロパティ

.shape-outside: 値対象指定値単位説明
1circle(50%);正円(円の半径)%,px50%、正確な半径
circle(50% at 10px);正円(円の半径 at 移動量)%, px回り込む要素の中心点をずらす
2ellipse(50% 50%);楕円(横半径 縦半径)%, px50% 50%,正確な横縦半径
ellipse(50% 50% at 10px 20px);楕円(横半径 縦半径 at 横移動 縦移動)%, px回り込む要素の中心点をずらす
3polygon(0px 0px, 100px 0px, …);多角形(ポイント, ポイント, ポイント, …)%, pxパスを作成
4url(image.png);画像透過png, 背景無しsvg透過部分を無視する
  • clip-path:を利用した場合は、clip-path:の値shape-outsideの値にそのまま書けばOK。
  • circle, ellipse は50%又は正確な半径を記載。数値が違うとshape-outside が適用されない
  • circle , ellipseat は、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(); ]

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

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(); ]

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

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 両方に同じ画像を指定する必要があります。

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

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