TOPページ >  画像を表示する/動画/サウンド > 画像と文字の左右間隔を指定する

画像と文字の左右間隔を指定する

画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。

<img src="画像URL" align="画像表示位置" hspace="画像と文字の左右間隔">
  • 画像表示位置:『left』(文章を右に回り込ませる)または『right』(文章を右に回り込ませる)から指定できます。
  • 画像と文字の左右間隔:数値で指定します。値はピクセルになります。
<img src="./sample/millenario.jpg" width="160" height="120" align="left" hspace="20" alt="東京ミレナリオ2006">
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまい、再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

このソースを表示させると、次のようになります。わかりやすいように少し大げさ( 20 ピクセル)に間隔を指定してみました。

東京ミレナリオ2006■2006年1月1日■
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまい、再開の目処はたっていないとのことだったので、今回見ることができてよかったです。
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

ただし この指定は、画像の左右に余白を設けるものなので、ご覧のとおり画像右側に文字を回り込ませた場合でも左側にも20ピクセルの余白が生まれます。回り込ませた文字の逆側にも間隔が空いてしまうのが好ましくない場合は、hspace属性ではなく、スタイル指定で余白(マージン)を設けるのがよいでしょう。


この場合、ソースは次のようになります。

<img src="./sample/millenario.jpg" width="160" height="120" align="left" style="margin-right:20px" alt="東京ミレナリオ2006">
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまい、再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

このソースでは、画像の左側に 20pxの余白(マージン)を設けています。表示させると、次のようになります。

東京ミレナリオ2006■2006年1月1日■
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまい、再開の目処はたっていないとのことだったので、今回見ることができてよかったです。
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。

マージンについて詳しくは、こちらをご覧ください

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
バックグラウンドでサウンドを演奏する(BGM)
インラインフレームを表示する
プラグインで動画やサウンドを再生する
文字や文章、テーブルなどの背景画像の位置を指定する
文章の背景に画像を固定表示する
文章の背景に指定した画像を繰返し表示する
テーブルに画像やボタンを表示する
文章の背景画像を指定する
画像をクリックで拡大させる
画像への文字の回り込みを解除する
画像と文字の上下間隔を指定する
画像と文字の左右間隔を指定する
画像の左右に文字を回り込ませる
画像の表示位置を指定する
画像を表示させる
画像にリンクを貼る
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス