【CSS】floatした画像を文章の右下に回りこませる方法

admin

2週間前

※このページはプロモーションを含みます

はじめに
完成版HTMLとCSS
- ポイント
- その他注意点
コード解説
- shape-outsideとは？
- shape-outsideのブラウザ対応状況
最後に

はじめに

デザイナーから渡されるデザインカンプで画像が右下の回り込んでいるパターンを見たことがある人はどれだけいるのでしょうか？

画像が回り込んでいる部分の幅や高さが固定値ならばそれほど困らないのですが画面幅によって見た目が変わるレスポンシブデザイン全盛の現在では対応に困ってしまいます。

そんな右下回り込み画像ですがCSSの進化によってJSを使用しないでも対応できるようになっていたのでこの記事ではそのやり方を記します。

完成版HTMLとCSS

<div class="float-right-bottom-wrapper">
	<div class="float-right-bottom">
		<img src="https://picsum.photos/200/200" alt="" />
		<p>回り込ませるテキスト。回り込ませるテキスト。回り込ませるテキスト回り込ませるテキスト回り込ませるテキスト回り込ませるテキスト回り込ませるテキスト</p>
	</div>
</div>

.float-right-bottom-wrapper {
	display: flex;
}
.float-right-bottom > img {
  --img-width: 200px;
  --img-height: 200px;
  float: right;
  width: var(--img-width); /* imgタグのwidth属性を指定している場合は不要です  */
  height: 100%; /* 親要素の.float-right-bottomの存在が重要です！ */
  margin-left: 10px; /* お好みで */
  shape-outside: inset(calc(100% - var(--img-height)) 0 0 0); /* ポイント！ */
  object-fit: contain;
  object-position: bottom;
}

ポイント

<div class=”float-right-bottom”></div>が一見余計なものに見えますが「shape-outside」プロパティで指定している「100％」を利用するために必要な要素です。このdivタグがなければうまく動きません。
とにかく「shape-outside」が重要です。これを効かせるためにほかの値が必要になります。