【CSS】『shape-outside』でテキストの回り込みを円形にしてみる

文章の回り込みって丸くできないですかー？

あー、円形に回り込みですねー、できますよー

テキストの回り込みを円形にしてみる

floatが必須です。shape-outsideは、円形の『circle()』の他に楕円の『ellipse()』、多角形の『polygon()』などがあります。円形以外はあまり使う機会がないかなと思いますが、ここぞという時に使ってみてください。

HTML

<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png" alt="" class="circle_left">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_megane.png" alt="" class="circle_right">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>

CSS

.circle_left {
  display: block;
  float: left;
  border-radius: 50%;
  shape-outside: circle();
  margin-right: 25px;
}
.circle_right {
  display: block;
  float: right;
  border-radius: 50%;
  shape-outside: circle();
  margin-left: 25px;
}

ちなみに、テキストの回り込みを『円形』にしなかったらこうなります

HTML

<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_pan.png" alt="" class="circle_left">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
<div class="clearfix"><img src="https://125naroom.com/wp/wp-content/themes/design125naroom/img/kinoko_megane.png" alt="" class="circle_right">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>

CSS

.circle_left {
  display: block;
  float: left;
  margin-right: 25px;
}
.circle_right {
  display: block;
  float: right;
  margin-left: 25px;
}

対応ブラウザ

『shape-outside』の対応ブラウザは下記サイトで確認できます。
IE対応は不要なので、『shape-outside』は問題なく使えますね。

Can I use

さいごに

できたー

さて、おやつにしましょうー

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2018

【CSS】タブレット、スマホ表示の時は:hoverを不要にする

あ、:hoverが残ってる。そんなときの記述。問題点は、iPad Proのような大きなタブレットは悩むところだったりしますが。 CSS サンプル iPad Pro横向きサイズの「1367px」以上を指定。PCの画面を縮め

...

CSS

デザインのメモ

2023

【CSS】Webフォントのちらつきをなくす方法

一瞬だけ別のフォントが表示されるのですがーちらつきをなくす方法を紹介しますねー Webフォントの『ちらつき』の原因 Adobeフォントやgoogleフォントなどの『Webフォント』を使うと、サイトを開いた時に一瞬だけ別

...

CSS

デザインのメモ

2024

【CSS】三角アイコンと矢印アイコンをつくる

画像は使わないんですか？ CSSだけで簡単にできますよー三角アイコン疑似要素「:before」でテキストの横に三角アイコンをつけています。 See the Pen CSSだけで、三角アイコン by 125naroom

...

CSS

デザインのメモ

Googleさんの
おすすめ

2025