

テキストの回り込みを円形にしてみる
floatが必須です。shape-outsideは、円形の『circle()』の他に楕円の『ellipse()』、多角形の『polygon()』などがあります。円形以外はあまり使う機会がないかなと思いますが、ここぞという時に使ってみてください。
HTML
1 2 | < 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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
1 2 | < 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
1 2 3 4 5 6 7 8 9 10 | .circle_left { display : block ; float : left ; margin-right : 25px ; } .circle_right { display : block ; float : right ; margin-left : 25px ; } |
対応ブラウザ
『shape-outside』の対応ブラウザは下記サイトで確認できます。
IE対応は不要なので、『shape-outside』は問題なく使えますね。
さいごに

