画像にテキストを回り込ませる
CSSを使って、テキストを画像に回り込ませる方法を解説。
新聞や雑誌などでよく見かける、画像に回り込ませたテキストの記述です。
テキストが長文の際に役に立ちます。
要素の配置にはfloat
floatを使うと、テキストを画像に回り込ませるようにできます。
See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.
ただ、float: left; を使用しただけでは画像にテキストがくっついてしまうので、margin を使いテキストとの間に余白をとります。
そうすることでテキストが読みやすくなります。
floatを解除するにはclear: both;
テキスト全てを回り込ませるのではなく、途中から画像の下にもっていくには clear: both; を使って float を解除します。
P タグをつけるとタグ間に余白ができるのですが、依然画像の横にあります。
See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.
.float-clear を解除してみてください。
すると画像の下に回り込ませることができます。
See the Pen Untitled by 奥谷 晋司 (@itpyduhk-the-encoder) on CodePen.
画像にテキストを回り込ませるまとめ
長文をユーザーが好んで読むかどうかはわかりません。
例をあげますと、Twitterは投稿できる文字数を１４０文字と決めています。
Twitterのコンセプトは「つぶやき」ですから、長々と書く必要がないのです。
相当興味がなければ長文を読むよりは、最近ではYoutubeなどを見て情報を得る人がいるくらいです。
しかし、時にはデザインとして活用するときがあるかもしれませんので、知って損はないかなと・・・
何はともあれ、経験です。