■見出し１■

ＨＯＭＥ > 画像関係マニュアル

画像関係マニュアル

※「<」 「>」 については、全角で表記していますが、コードに入れるときは半角にしてください。

段落タグ＜p＞、または画像タグ＜img＞に class をつけて、画像の回り込みを行います。

＜img＞に設定する場合は、ドリームウィーバーではできませんので、ソースコードを直接編集してください。

左寄

class="flo-l"　というクラスを入れると、左寄になります。
ここでは、段落タグ＜p＞に入れてみます。

このフロート系のレイアウトは、ブラウザごとのレイアウト崩れを起こしやすいので注意が必要です。

回り込んだ文章が、
テキスト量が多くて、画像より下に来ていれば良いのですが、ここの例のように、画像の高さより、文章が少ない場合は対策が必要です。

その場合は、＜br class="clear" /＞を入れて、回り込みを解除します。（ソースコード参照）

回り込んだ後は、画像の下に文字 or 画像が来るようにしてください。回り込み画像の下に何もない場合はブラウザによってレイアウトが崩れます。

ドリームウィーバー等で編集しているときに、この＜br class="clear" /＞の位置が書き換わることがありますので、ソースコードを直接編集するようにしてください。

応用

キャプション

←このようにキャプションをいれると見栄えもよくなります。

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

右寄

class="flo-r"　というクラスを入れると、左寄になります。
ここでは、画像タグ＜img＞に入れてみます。
コードを直接編集する必要があります。

＜br class="clear" /＞で、回り込みを解除しています。

この＜br class="clear" /＞は、ドリームウィーバーで編集中に、＜p＞タグの中に移動してしまうことがあるので、必ずコードを確認しながら作業してください。
コードが移動してしまうのは、隣接した段落を削除した場合など、です。

画像の入るサイズ

画像を入れる場合、＜p＞タグ内に入れる場合と、＜div＞ボックスに入れる場合があります。

＜p＞は段落ですから、文字を読みやすいように適度な余白を設定しています。
＜div＞がレイアウトボックスとして利用しています。余白は０にしています。

このコンテンツ領域には、横幅540px までの画像が入ります。
枠いっぱいの画像を使う場合には上記のサンプルバナーのように＜div＞を使ってください。
＜p＞だと、余白を設定している分、枠をはみ出して一部ブラウザで大きくレイアウト崩れします。

500px を超えるような場合には、＜div＞を使うようにしてください。

PageTop

マニュアルメニュー

Yahoo!検索 スタッフブログ

会社概要

定休日