Webページに画像を使う場合、位置合わせに苦労する場合があるかもしれません。思いつく範囲で解決策を書いてみました。参考になれば幸いです。
CSSで調整
[CSSルール定義]ダイアログの[ボックス]カテゴリまたは[位置]カテゴリの値が特に重要です。
セレクタをimgタグに指定しても良いですし、クラスを新規に作るのも良いでしょう。
margin・paddingで隣り合う要素との間隔を調整
画像などのオブジェクトの周りには、内側から外側に向かってpadding領域、border領域、margin領域とあるのですが、要は隣の要素と重ならないように余白を作ってくれるのがmarginやpaddingです。背景色・背景画像の及ぶ範囲が、内側のpaddingです。枠線のborderの領域を設定するために指定する場合もあります。margin領域には何も表示されません。
floatを使うと良い場合も
画像などのボックス領域のfloatプロパティをrightにすると右寄せ、leftにすると左寄せできます。右寄せ・左寄せをやめたくなったら、続くオブジェクトのclearプロパティをbothにするのを忘れずに。
widthの値にも注意
widthの値が大きすぎると、隣り合う要素が入りきらなくなって、レイアウトが崩れる場合があります。レイアウト崩れが発生したら値を小さくしたり、オブジェクトを一時的に隠したりしてみましょう。
位置カテゴリを調整
[位置]カテゴリはpositionとplacementが重要です。通常、HTMLファイルは親タグに子タグが挟まれて階層構造となっているのですが、親要素のpositionプロパティにrelativeの値を設定する事で原点を指定できます。以後子タグはpositionプロパティにabsoluteと指定する事でplacementプロパティに指定したtop・right・bottom・leftの値だけ原点からずらした位置にイメージなどを表示できます。
デザインビュー
最近はワイド画面のディスプレイも普及し、分割ビューで作業をしている人も多くなっていると思います。簡単な確認はデザインビューが便利です。
ライブビュー
デザインビューが表示されている状態でライブビューボタンを押すと、通常のデザインビューよりブラウザに近い表示をする事ができます。
ブラウザで確認
最後はターゲットブラウザで確認しましょう。Internet ExplorerやFireFox Chrome Safari、スマートフォンのブラウザなど、昔より種類が増えてきていますが、できる限りの対応をしましょう。
広告
関連コンテンツ
