【25-3】クリッピングに便利！ shape-outside と shape-margin

clip-pathプロパティの値のうち、<basic-shape>（基本シェイプ）で切り抜いた要素に float を使った時に、その切り抜いたシェイプのとおりにテキストを回り込ませることができる shape-outsideプロパティを使ってみます。
同時に、切り抜いた形にマージンを付ける shape-marginプロパティもあります。

本日のINDEX

1. ブラウザの対応状況（2018年2月）
2. shape-outsideプロパティは float と一緒に使う
   1. 回り込まない側の余白はそのまま
   2. 最初からピッタリ隅によせればイイ感じ
   3. shape-marginプロパティは margin でも代用できそう

clip-pathプロパティ関連は記事を3つに分けています

【25-1】切り抜き表示のための新しいプロパティ clip-path

CSSの「基本シェイプ」による切抜きを中心にサンプルを見ていきましょう

【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう

SVGのパスを使って切り抜きます。

【25-3】クリッピングに便利！ shape-outside と shape-margin　←今日はココ

切り抜いた要素の余白を取ってくれるshape-outsideプロパティと、その切抜き後のシェイプにマージンをつけてくれる shape-marginプロパティを使います。

参考：
CSS Shapes Module Level 1 - W3C Editor's Draft, 7 June 2017
日本語訳もありました ↓
CSS Shapes Module Level 1 日本語訳

ブラウザの対応状況（2018年2月）

Can I use （クリックで別ウィンドウで開きます）

これらはまだ W3C の Editor's draft（編集側の草案）なんですが、Chrome、Safari などで使えます。Firefox は未対応。
古めの iOS Safari はベンダープレフィクス「-webkit-」を付けます。

Edge は「検討中（Under Consideration）」、
Firefox は「開発中（in-development）」になっていますね。

shape-outsideプロパティは float と一緒に使う

shape-outsideプロパティは、floatプロパティを指定した要素に使います。

floatプロパティは、こちらをご覧ください。
【21】floatプロパティと clearプロパティ。そして Clearfixについて

回り込まない側の余白はそのまま

<img>要素に clip-path と float 、shape-outsideプロパティ、shape-marginプロパティを指定したサンプルです。（下は画像です）
今回は別ページでサンプルを作りました。クリックで別ウィンドウで開きます。

回り込むテキストが、クリップのアウトラインに沿ってレイアウトされています。
（サンプルページは Chrome、Safariなどで見てね）

フロートでテキストが回り込んだ側の反対側の余白はそのままです。位置まで調整してくれるわけじゃないんですね。

ネガティブマージンで余白を調整することもできますが、レスポンシブの場合は厄介。
なのでやはり、切り抜いても余白が出ないプロポーションの画像を最初から用意したほうが良さそうです。

サンプルページにも載せていますが、ソースを書いておきます。
HTMLはこちら。

<div class="sample clearfix">
 <img src="img/image.jpg" class="c-image">
 <h1>The shape-outside property</h1>
 <p>User agents must use ...略...</p>
</div>

CSSはこちら。

.clearfix:after {content:''; display:table; clear:both}
.sample {
	width:100%;
	min-width:600px;
	margin:20px auto;
	padding:1em 0;
	border:#ccc solid 1px}
.sample > h1, .sample > p {line-height:1.8; margin:1em 2em}
.c-image {
	float:left;  /*フロートを指定*/
	width:40%;
	-webkit-clip-path:ellipse(25% 48% at 60% 50%);
	clip-path:ellipse(25% 48% at 60% 50%);
	-webkit-shape-outside:ellipse(25% 48% at 60% 50%);
	shape-outside:ellipse(25% 48% at 60% 50%);
	-webkit-shape-margin:2em;
	shape-margin:2em}

shape-outsideプロパティの指定は、clip-pathプロパティとまったく同じ方法です。
このようにCSSの 基本シェイプ（basic-shape）（四角とか楕円とかポリゴンとか）を使ってアウトラインを描くんですね。

基本シェイプ（basic-shape）の他に、shape-box（シェイプボックス）も値として使えるそうです。これは margin-box、border-box、padding-box、content-box があります。

shape-marginプロパティは、1つの値を指定します（上下左右とか無いみたい）
単位付きの数値や「％」が使えます。マイナスの値は不可だって。

最初からピッタリ隅によせればイイ感じ

次のサンプルはこちら。
<img>要素ではなく、<div>要素の背景（background）に画像を指定し、クリッピングとフロートを指定。

画像を <div>要素の背景にしたのは、background-size: cover が使えるから。レスポンシブで 要素のプロポーションが変わっても、画像の縦横比を保てます。
クリックで別ウィンドウで開きます。

このサンプルの HTMLはこちら。

<div class="sample2 clearfix">
 <div class="element"></div>
 <h1>The shape-outside property</h1>
 <p>User agents must use ...略...</p>
</div>

CSSはこちら。

.clearfix:after {content:''; display:table; clear:both}
.sample2 {
	width:100%;
	min-width:600px;
	margin:20px auto;
	padding:0;
	border:#ccc solid 1px}
.sample2 > h1, .sample2 > p {line-height:1.8; margin:1em 2em}
.element {
	width:40%;
	height: 300px;
	float: left;
	background-image:url(../img/lavender.jpg);
	background-size:cover;
	background-position:left center;
	background-repeat:no-repeat;
	-webkit-clip-path:ellipse(70% 90% at 0% 50%);
	clip-path:ellipse(70% 90% at 0% 50%);
	-webkit-shape-outside:ellipse(70% 90% at 0% 50%);
	shape-outside:ellipse(70% 90% at 0% 50%);
	-webkit-shape-margin:2em;
	shape-margin:2em}

このサンプルのクリッピングの指定 clip-path:ellipse(70% 90% at 0% 50%) はこんな指定です。

shape-marginプロパティは margin でも代用できそう

最後のサンプルは、shape-margin: 2em と指定しているのを、普通の margin で指定しています。
ちょっと何の気なしにやってみたら、普通の margin-right でも、切抜きのシェイプに沿ってテキストが回り込みました。へー、CSSの Shapes Module ってなんかスゴイね。
クリックで別ウィンドウで開きます。

テキストが沿う側だけ（この場合ならright）にマージン指定できます。

で、サンプルページのウィンドウ幅を狭めてみてみると、
shape-margin: 2em と指定した＜サンプル2＞のほうは、テキストの行数が増えると、画像の<div>要素の下部にもマージンがついてしまいます。
margin-right: 2em と指定した＜サンプル3＞は、当然ですが右マージンしか付きません。

というわけで、shape-margin は、自動的に回り込みの部分にマージンを付けるようです。
普通の margin のように、上下左右に違う値を指定できるようになるといいですね。まだ草案なので、これからどうなるか、気になります（2018年2月記）

次回予告

クリッピングに関するプロパティの話は、今回で一旦 終わります。

クリッピングとマスキングは、W3C の CSS Masking Module（マスキング モジュール）でひとまとまりになっているので、次回はマスキング関連のプロパティに進みたいところなのですが...
マスクに関しては、プロパティが多く、勧告前でもありますし（詳しく調べても、勧告時に変わってそうな気がする）、もう少し時間を置いてから記事にします。

次回からは、ウェブサイト作成で基本になる「フォント・テキスト」に関するプロパティを見ていきましょう。
まずは、フォント（書体）を指定する font-familyプロパティを使おう。