CSS を使用して非長方形画像の周囲にテキストを折り返すにはどうすればよいですか?

長方形以外の画像の周囲でテキストを折り返す: ガイド

長方形ではない画像の周囲でテキストを折り返すことができますか?テキストが国の形やその他の不規則な形にシームレスに適合するこの効果を実現するには、Tory Lawson がブログ投稿で共有した方法を検討してみましょう。

ステップ 1: ラップ エリアを確立する

まず、テキストを折り返す領域を特定します。これは、Fireworks などの画像編集ソフトウェアを使用して行うことができます。適切な間隔でグリッドを設定し、わずかなパディングを考慮して、目的のテキスト終了位置を表す境界線を描きます。

ステップ 2: リストを作成する

この不規則な形状の幅を事前定義された間隔 (例: 10 ピクセル) で測定します。これらの測定値をリストに記録します。このリストは、次のステップで div を作成するためのガイドとなります。

ステップ 3: Div を構築して CSS を適用する

リスト内の各測定値の div 要素を作成し、ネストしますラッパー div 内にそれらを含めます。これらの div を右にフローティングし、右にあるフローティング要素を確実にクリアします。最後に、ラッパー div の高さと幅、および不規則な形状の背景画像を設定します。

コード例

これは、Tory Lawson のメソッドに基づいた簡略化されたコード例です。 :

<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 オプションほど単純ではありませんが、この方法は、Web デザインでインパクトのある視覚効果を作成するための回避策を提供します。