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

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

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

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

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

 

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

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

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

 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

ApacheOpenOfficeCalc、Excelで8桁の数字を年月日にする

noimage
noimage

無料年賀状素材をWindows7にダウンロード

noimage

ブログやホームページ作成に便利な、HTMLエディタ

noimage
noimage

サジェスト機能って、一体何?

noimage

Adobeサイバー攻撃で個人情報流出

noimage
noimage

meta keyword(メタ キーワード)をSEOに役立てよう

noimage

ようやくブログ移転完了

noimage
無くなってしまったウェブサイトを見る方法

無くなってしまったウェブサイトを見る方法

noimage

Bloggerのテンプレートのカラムデザインを変えてみよう

noimage

MoneyLookのCSVファイルをMoney通帳に取り込む

noimage

Menu

HOME

 TOP