画像にたいするテキストの回り込み
サンプル
HTMLの記述
こちらは画像を「float="left"」で左に寄せて、テキストを回り込ませています。
こちらは画像を「float="left"」で左に寄せて、テキストを回り込ませています。
こちらは画像を「float="left"」で左に寄せて、テキストを回り込ませています。
こちらは画像を「float="left"」で左に寄せて、テキストを回り込ませています。
こちらは画像を「float="left"」で左に寄せて、テキストを回り込ませています。
こちらは画像を「float="right"」で右に寄せて、テキストを回り込ませています。
こちらは画像を「float="right"」で右に寄せて、テキストを回り込ませています。
こちらは画像を「float="right"」で右に寄せて、テキストを回り込ませています。
こちらは画像を「float="right"」で右に寄せて、テキストを回り込ませています。
こちらは画像を「float="right"」で右に寄せて、テキストを回り込ませています。
ソース
<html>
<head>
<title>画像にたいするテキストの回り込み</title>
<style type="text/css">
<!--
//画像を左寄せにする場合
.leftbox img {
float: left;
}
.leftbox {
color: #728DB0;
font-size: 12px;
line-height: 170%;
width: 250px;
height: 300px;
}
//画像を右寄せにする場合
.rightbox img {
float: right;
}
.rightbox {
color: #df65b0;
font-size: 12px;
line-height: 170%;
width: 230px;
height: 300px;
}
-->
</style>
</head>
<body>
<p class="leftbox">
<img src="../images/leftcat.gif">
こちらは画像を「float="left"」で左に寄せて、テキストを回り込ませています。
…
こちらは画像を「float="left"」で左に寄せて、テキストを回り込ませています。
</p>
<p class="rightbox">
<img src="../images/rightcat.gif">
こちらは画像を「float="right"」で右に寄せて、テキストを回り込ませています。
…
こちらは画像を「float="right"」で右に寄せて、テキストを回り込ませています。</p>
</div>
</body>
</html>
ソフト紹介編
ホームぺージ作成ソフト
- IBM ホームページ・ビルダー
- Macromedia Dreamweaver
画像ソフト
- AdobePhotoshop Elements
- Macromedia Fireworks
ネットショップ構築ソフト
- 通販開業Ｘ
- ネットショップ・オーナー
FTPソフト
- FFFTP
- NextFTP4
- Fetch日本語版
メールソフト
- Spam Mail Killer
エディターソフト
- TeraPad
- StyleNote
- ez-HTML
- 秀丸エディタ
- mi
- Jedit4.0
サンプル集編
スタイルシートサンプル
