右下または左下においた画像に文字列を回り込ませるHTML/CSS
普通、HTML で画像の回り込みというと、右上か左上に画像があって、そこに文字列が回り込むという感じです。これは簡単です。画像に対して float: left; すれば OK です。
しかし、右下か左下に画像を固定して、文字列がそこにたどり着いたら回り込むという動作は一筋縄ではいきません。
画像をブロックの左下に配置してテキストを回り込ませる方法を考える というページで色々と考察されていて、ふむふむと思ったのですが、この方法では、テキストの量が変わるたびに調整が必要になってしまうので、テキストの量が動的に変わる場合には対応しにくいです。
何より、文章をぶった切って画像を入れるというのはどうもスマートではありません。
色々と試行錯誤してみたところ、以下の方法で実現できそうだったので、公開してみます。
<html>
<head>
<style>
#block {
width: 200px;
height: 200px;
overflow: hidden;
font-size: 10pt;
border: solid 1px #666;
padding: 0.5em;
}
#bar {
float: right;
width: 1px;
height: 100px;
background-color: red;
}
#img {
float: right;
clear: both;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="block">
<div id="bar"></div>
<div id="img"></div>
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああ
</div>
</body>
</html>
このソースを保存して開くと、以下のような見た目になります。
わかりやすいように色分けした div で表現していますが、赤線は実際には透明、青い四角は実際には画像だと思って下さい。
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
#bar の部分とか美しいマークアップとは言えないですし、画像に文字が被ったりとかしてますが、微調整してやれば十分使い物になるかと思います。
最初は絶対実現できないんじゃないかと思ったので、出来た時は嬉しかったですね～。
2件のコメント »
RSS feed for comments on this post. TrackBack URL
はじめまして、こんばんは
この仕組みを考えつくのはすごいと思いました。
挿絵ならこんな使うシーンは少ないかもしれませんが広告などでしたら使うシーンがありそうですね。
コメントありがとうございます。
どうしてもそうしないといけない理由があったもので、色々必死に考えました。
ブログのエントリがちょっと中途半端で微調整されていないのは、ここまで出来た時点で、本来やりたかった方に没頭したからでもあります。