CSS Shapesでテキストを回り込ませるレイアウトを表現
Webでのデザインはどうしても四角形のボックス型になりがち。印刷物だとテキストの配置ももっと自由にできますよね。今回はテキストを画像などの形にあわせて回りこませたり流しこんだりできちゃう CSS Shapes について紹介します！
↑私が10年以上利用している会計ソフト！
CSS Shapesとは
CSS Shapesを使えば、円形や多角形、画像に合わせて、そのまわりに float で横並びにしているテキストを回り込ませて配置できます。雑誌や印刷物の広告などでみかけるレイアウトのひとつですね！これがWebでも表現できるようになれば、デザインの幅がグンと広がるのではないでしょうか？
通常、テキストと円形の要素を横に並べると、この図のように四角形をベースとした配置になり、円の右上・左上・左下・右下には空白ができます。そのスペースを shape-outside プロパティーを使って埋めることができるんです！
CSS Shapesの対応ブラウザー
Can I use…によると、CSS ShapesはIE、Firefox非対応。Safariには -webkit- のベンダープレフィックスが必要です。でもご安心を！後ほどJavaScriptを使ってFirefoxやIEにも対応させる方法を紹介しますよ！
それでは簡単に、CSS Shapesの中でもよく使いそうなものを紹介します！
正円 – circle
円形にテキストを回り込ませるには、円形要素に shape-outside: circle(); を与えます。ここでは画像の周りにテキストを回り込ませてみましょう。
HTML
<img src="image.jpg" alt="" /> <p>文章が入ります……！</p>
CSS
img {
float: right;
border-radius: 100%;
shape-outside: circle();
}
See the Pen CSS Shapes: circle() by Mana (@manabox) on CodePen.
とっても簡単に雑誌風レイアウトに仕上がりました！
楕円 – ellipse
正円だけではなく、ellipse 関数を使えば楕円にも対応できます。ちなみに shape-margin プロパティーでシェイプの周りにスペースを追加できます。
CSS
img {
float: right;
shape-margin: 1rem;
border-radius: 100%;
shape-outside: ellipse();
}
See the Pen CSS Shapes: ellipse() by Mana (@manabox) on CodePen.
画像
画像の形にあわせてテキストの形を変えたい場合は、並べる画像がPNGなどの透明領域を含める画像形式である必要があります。そうすれば、透明部分にもテキストを挿入できます。書き方はこれまでの関数ではなく、直接画像のパスを指定します。
HTML
<img src="image.png" alt="" /> <p>文章が入ります……！</p>
CSS
img {
width: 300px;
float: right;
shape-margin: 5px;
shape-outside: url(image.png);
}
See the Pen CSS Shapes: url() by Mana (@manabox) on CodePen.
多角形 – polygon
多角形の場合は、これまでの正円や楕円のように関数のみを指定するだけではなく、各頂点の座標値をカッコ内に記述する必要があります。(x1 y1, x2 y2, x3 y3…) といった具合ですね。
CSS
.polygon {
float: right;
shape-outside: polygon(nonzero, 148px 452px, 32px 329px, -7px 273px, 8px 197px, -22px 131px, 118px 0px, 383px 0px, 386px 451px);
}
See the Pen CSS Shapes: polygon() by Mana (@manabox) on CodePen.
複雑な形にも対応できました！
多角形の座標取得には便利なツールを使おう
多角形の場合は、その座標を取得するのがかなり大変。なので便利なツールに頼っちゃいましょう！
CSS Shapes EditorはChromeの拡張機能。描画する線をドラッグするだけで直感的に Polygon シェイプと、その座標を習得できちゃいます！
使い方はとっても簡単。拡張機能をインストールし、Chromeのデベロッパーツールを表示すると、「shapes」というタブが追加されています。そこで「＋」ボタンをクリックすると、青い線が表示されます。こちらをドラッグして形を作っていきます。頂点となるポイントは、線をクリックすれば追加され、ポイントをダブルクリックすれば削除できます。あとはパネルに表示された値をコピペすればOK！
各ブラウザーに対応させるスクリプト
冒頭でも紹介したとおり、CSS ShapesはIEとFirefoxに対応していません。そこで活躍してくれるのが
CSS Shapes Polyfillです。使い方は、ダウンロードした shapes-polyfill.js（またはshapes-polyfill.min.js）を読みこませるだけ！本当に簡単！
HTML
<script src='shapes-polyfill.js'></script>
IEでもちゃんと表示されています。ちなみにこの記事で紹介しているデモも、すべてこちらのPolyfillを使ってIEとFirefoxに対応させました。
使い方によってはテキストが読みづらくなってしまうので、使いすぎには注意が必要ですが、デザインの可能性が広がったという点だけでも大きな進化です。このCSS Shapes、みなさんはどんなデザインに使ってみたいですか？
