Div と CSS を使用して、不規則な画像の周囲にテキストを折り返すにはどうすればよいでしょうか?

不規則な画像の周りに回り込むテキスト

今日の Web デザイン環境では、国の地図や複雑なベクター グラフィックスなど、非長方形の画像に遭遇することがますます一般的になっています。これらの画像の視覚的なインパクトは、テキストを周囲に巻き付けることで強化できますが、これには特有の課題が生じます。画像の不規則な境界線から一定の距離を保ちながら、テキストを自然に流すにはどうすればよいでしょうか?

フローティング ダイブ折り返し領域を定義する

この問題に対する創造的な解決策は、Tory Lawson によって 2011 年のブログ投稿「テキストの折り返し」で提案されました。長方形以外の形状の周り。」 Lawson の方法では、図形の横に浮かんでテキストが回り込む領域をブロックする一連の div を作成します。

図形の測定と分割

へラップ領域を定義するには、Fireworks などの画像編集ソフトウェアを使用して画像の上にグリッドを配置し、目的のテキスト境界の周りに境界線を描きます。次に、この線の幅が測定され、等間隔 (10 ピクセルごとなど) に分割されます。

Div の作成

測定値が決定されたら、HTML list は一連の div を作成するために使用されます。各 div はラップ領域の垂直方向の間隔を表し、右にフローティングされ、テキストが図形の上に流れるのを防ぐ「ブロッカー」効果を作成します。

CSS スタイリング

最後のステップでは、CSS スタイルを div とテキストに適用します。ラッパー div には、イメージ全体を含む幅と高さが割り当てられ、background-image プロパティが形状のイメージに設定されます。スペーサー div には、間隔の測定値に対応する高さが割り当てられ、ブロック効果を作成するために右にフローティングされます。最後に、テキストはインライン表示と色でスタイル設定され、画像上に表示されます。

サンプル コード

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

結論

不規則な形状の周囲でテキストを折り返す簡単な CSS ソリューションは存在しないかもしれませんが、ローソンの方法は実行可能なアプローチを提供します。形状を慎重に測定し、折り返し領域をブロックする div を作成することで、テキストが自然に流れ、形状の境界線から一定の距離を維持する、視覚的に魅力的な結果を達成することができます。