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
.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(); のコード
<div class="shape shape1">
<div></div>
<p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>
.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(); のコード
<div class="shape shape2">
<div></div>
<p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>
.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(); のコード
<div class="shape shape3">
<div></div>
<p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>
.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(); (背景透過) のコード
<div class="shape shape3">
<div><img src="ttl-cat-sit-side.svg" alt=""></div>
<p>仕事を遊び倒すをモットーにお仕事に… 以下テキスト割愛</p>
</div>
.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 との併用を推奨 |