スタイルシートで画像の回り込みを指定してみよう

 スタイルシートを使って画像の回り込みをしてみよう。

 通常、画像とテキストの関係は、下のようになる。

画像の回り込みを行わない場合

無料ソフト&無料サービス この状態が画像の回り込みをしていない状態。
 段落を指定すると、画像の下にテキストが配置される。

 

画像の回り込みを指定した場合

無料ソフト&無料サービス これが、画像の回り込みを指定した状態の表示。

 画像の右側(画像そのものは、左側)にテキストが配置される。

 HTMLの記述は、
<p><img style="WIDTH: 80px; HEIGHT: 355px" border="1" alt="無料ソフト&amp;無料サービス"
align="left" src="http://blog-imgs-54.fc2.com/f/s/o/fsohuto/201207031857041a3.jpg"
width="80" height="355"> これが、画像の回り込みを指定した状態の表示。</p>
<p> 画像の右側(画像そのものは、左側)にテキストが配置される。</p>

 という形になる。

 画像の位置を右側にしたい場合、align="right"

 画像が続く限り、回り込みの指定は続く。

 回りこみを解除したい場合、<P class="f-clear">で段落を指定する。

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

noimage

電話番号の無料貸出サービス

noimage

無料Wi-Fi公衆無線LANサービス「セブンスポット」

noimage

iPad mini VS Nexus7

noimage

Twitterのログアウト

noimage

ウインドウズ8はどこに行く?

noimage

モデム・ルーター・アクセスポイントって・・・・

noimage

日本郵政のはがきデザインキット

noimage

プラグインの説明文にも変数やHTMLが入れられる

noimage

Yahoo!カレンダーとアウトルック

noimage

クリスマス素材無料配布サイト

noimage

Yahoo!ID流出被害確認ツール

noimage

エレコムの外付けテンキーを買った

noimage

Windows7のインストール用USBメモリーを作成する

noimage

Windows7さま、勝手にウィンドウサイズを変えないで!

noimage

Menu

HOME

 TOP