CSS の shape-outside で特定の形の図形にテキストを回り込ませるFront End Programming

CSS の shape-outside で特定の形の図形にテキストを回り込ませる

CSS

最近 float 使ってますか? 一昔前の横並びのカラムレイアウトの鉄板は float と クリアフィックス でした。 今は grid や flex の登場でめっちゃ毛嫌いされている float の使い道と四角以外の図形へのオサレな回り込みをしてみましょう。

挿絵とテキスト / 読みものとして適した配置を実現できるプロパティ、float

よく以下のようなレイアウトを見かけますが、私は読みものとしてこんな感じのレイアウトは正直好かんです。

float-06.jpg

もともと、float は画像などへの回り込みをするために作られたプロパティです。カラムレイアウトを作るためにできたものではないです。
デザインが多様化し、テーブルレイアウトからカラムレイアウトで利用するようになり、flex、gridの登場もあり急に悪者扱いされるようになりました。

雑誌なんかでよく見かけるのは以下みたいなレイアウトが多いはずです。それを実現するのが float です。

float-07.jpg

余談ですが、私の頭の中では float は FF の魔法でいうレビテトに近いです。多分。
今はスマフォで画像とテキストの縦積みレイアウトが圧倒的に組むことが多いですが、PCになった時にエリアを有効活用するためにはこんなレイアウトは必要不可欠なのではないでしょうか?

本来の float の使い方を知らない世代のデザイナーさん、ぜひこのレイアウトでデザインカンプを作って欲しいです。

CSSプロパティ float の本質を理解する

float はオブジェクトを擬似的に浮かして回り込ませます。必ずと言っていいほど、解除処理とセットで使います。
float させると、要素のコンテナーと回り込ませたい要素は重なっています。コンテンツだけが回り込ませたい要素にぶつかって折り返しているイメージです。

なので余白を設定したいときは回り込ませたい要素の方に設定してください。floatの概念がわかってなくてよくここら辺で転ぶ人、多いですねw

float と shape-outside で複雑な図形に対してハイレベルな回り込みを実現する

丸や複雑な図形への回り込みを実現する、shape-outside というプロパティを使うとさらにかっこいい実装ができるそう。
今はIE以外は全てカバーしています。

shape-outside | Can I use

基本図形

  • inset() …… 内側にオフセットした長方形
  • circle() …… 円
  • ellipse() …… 楕円
  • polygon() …… 多角形


ということで早速使ってみましょう!!

円形に対して回り込ませる

図形の形を縁に設定してみます。

.c-profile__img {
    border-radius: 50%;
    display: block;
    margin: 15px;
    float: left;
    shape-outside: circle();
    width: 200px;
}

余白も含めてこんな感じで回り込みます。

float-04.jpg

楕円に回り込ませる。

shape-outside: circle() を shape-outside: ellipse() に変えるだけです。

float-05.jpg

画像のパスを直接設定することも可能

以下みたいに直接画像を読み込んでも良いそう。

shape-outside: url(images/test.png);

複雑な図形に回り込み処理をする

せっかくなら複雑な形にも回り込みさせたいですよね?とはいえ計算が面倒なので、ここは思い切ってGUIツールでパスの頂点を調整することをお勧めします。
CSS Shapes Editor という Chrome に拡張機能があるらしいのですが私はうまくできなかっったので  FireFox のデフォの shape 編集機能を利用してパスを作成しました。

CSS シェイプのパスを編集する

開発者ツールで適当に3つ以上値を追加して、プロパティを追加したら、パス編集ツールが出るのでそちらをクリック。

float-03.jpg

shape-outside: polygon(10% 20%, 40% 50%, 60% 70%);

あとは頂点をドラッグして位置を調整したら出来上がりです。

.c-profile__img {
    width: 200px;
    display: block;
    margin: 15px;
    float: right;
    shape-outside: polygon(38.5% 1.07%, 16.5% 45.89%, 19% 62.25%, 2% 70.4%, 2.50% 89.95%, 36% 88.86%);
    shape-margin: 15px;
}

float-02.jpg

複雑な図形では shaape-margin で余白を調整するのが良いみたいです。

IEに対応したい場合は polyfill で対応しましょう。
https://github.com/adobe-webplatform/css-shapes-polyfill

まとめ・CSSはより複雑な表現が可能となった

CSSの進化でより複雑な実装が可能になりましたね。
みなさん、どうかfloatのことを嫌いにならないでください。

最後までお読みいただきありがとうございました。

関連記事もあわせてお読みください

Read More Blogs

よく読まれている記事

管理人について

IT戦士:かみーゆ

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に約10年Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me