スタイルシートの技
画像の回り込みを行う
画像を配置して、その後にすぐテキストを書くと、 次のように感じになってしまった経験がありませんか？
imgタグの後にすぐ文章を書くと…
つまり、テキストがきれいに回り込んでくれずに画像の右下の方から開始されえしまうというものです。 これを強引にテーブルなんかでデザインしている人もいるでしょうけど、 画像が出るたびに毎回テーブルを使うのは多大な労力が必要ですし、 メンテナンスも大変ですよね。 とはいえ、img要素にもalign属性がありますからそれを使えば便利ですが、 HTML4.01や今後のXHTMLではalign属性は廃止方向へ向かっています。 そこでスタイルシートで画像の回り込みをやってみましょう。 スタイルシートで設定すれば、管理もラクです。試しに以下の写真を使ってみる事にしましょう。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title>画像の回り込み</title>
<style type="text/css">
*.float
{
float: left;
margin-right: 1em;
}
*.floatclear
{
clear: both;
}
</style>
</head>
<body>
<h1>画像の回り込み</h1>
<div class="float">
<img src="./iwagikyou.jpg" width="240" height="180" alt="イワギキョウ">
</div>
<p>イワギキョウ（岩桔梗） キキョウ科</p>
<p>学名：Campanula lasiocarpa</p>
<p>乗鞍岳（のりくらだけ）にて撮影。
高山から亜高山の砂礫地にはえる多年草。</p>
<p> 北東アジア〜北アメリカの亜高山帯〜高山帯に分布する。
日本では、北海道〜中部地方の高山の砂礫地や草地に群生するのが見られる。 </p>
<br class="floatclear">
</body>
</html>
img要素はインライン要素でbody直下に直接書くことはあまり推奨されていない事からdivで括ってしまって、 回り込みをした方が直感的にも分かりやすいと思います。「float: left;」とすると左に回り込ませる事ができます。 また、回り込みを解除したい場合には必ず「clear: both;」を行いましょう！ そうしないとデザインが崩れてしまいます。 Internet Explorerでは正常に見ていてもFirefoxやOperaではひどくなる場合があります。 これはInternet Explorerのスタイルシート解析が大目に見てくれるというのもあると思います。 FirefoxやOperaは厳密に解析するため、レイアウトが崩れてしまいます。
「margin-left: 1em;」としているのは初期状態だと画像とテキストが密着しすぎているため、 余白を付けています。これを省略するとこんな感じになります。
また、逆に「float: right;」にすると右に回り込ませる事ができます。 試しに上記サンプルコードのスタイルシート部分を次のように変えてみましょう。 その下にプレビュー結果を示します。
*.float
{
float: right;
margin-left: 1em;
}何となく分かりましたか？これを使い分ければ日記などを書くときにもいちいちテーブルを作成しなくても、 左・右・左・右というように交互に配置したりできますし、管理も非常にラクになるでしょう。 floatはスタイルシートを学習する上では非常に難解なものとして扱われています。 floatを極めると複雑な段組なども作れるようになりますが、修得にはかなりの知識と時間を要するでしょう。 また、ブラウザ依存も多少あるため、自分の思い通りのデザインができずにテーブルでレイアウトしてしまう事も時にはやむを得ない状況も出てくるでしょう。 そんな時には無理をしないでテーブルを使うのも致し方ないと思いますが、 その場合にはアクセシビリティを考えて、必ずsummary属性やtitle属性にデザイン用テーブルである事を明記しましょう。