www.wanichan.com

Web > FrontPage > FAQ > トラブル

レイアウトがうまくいかない!

文字や画像を思い通りに配置させるには?

どうもうまくレイアウトがうまくいかない、思い通りに文字や画像を配置させたいのにずれてしまう、この場合はどうすればいいのでしょうか。

この場合、透明な表枠を作り、それぞれの枠(セル)内に配置させるといいでしょう。
透明な表枠は、外枠のサイズをゼロにすればOKです。最初の表作成においての規定値はゼロになっていますね?

実は私のサイトのトップページの左側のメニュー、右側ヘッドラインテキスト、
時間帯ごとにステータスが変わるワニchanの画像は
まず2列の表を作り、右側のセル内にさらに2列の表を作って左側にヘッドラインテキスト、
ワニchan画像を貼り付けているのです。
(以下の表はわかりやすくするように表に罫線を付けています)

メニュー1
メニュー2
メニュー3
メニュー4
ヘッドラインテキストワニchan画像

ここにテキストを入力しています。。。

なお、表の隣に文字を配置させたい場合も同様です。

二列の表を作成して、左側に表、右側に文字を入力することによって表と文字を横に並べることができます。

左側にこのように表をつくります。
  
  
  

この左のセルにはもうひとつ、表がありますね。

右側にはこのように文字をいれます。
外枠の表の罫線はあえてわかりやすくつけています。

詳しくは、

FrontPage 2000:
表作成してみよう!Part 1から順番にご覧ください。
FrontPage 2002:
表作成してみよう! Part 1から順番にご覧ください。
FrontPage 2003:
表作成してみよう! Part 1から順番にご覧ください。

▲Page TOP

画面の解像度に気を配ろう

画面の大きさはパソコンによって環境が異なります。
中には、1600×1200という大画面で見ている人もいれば、どう頑張っても800×600という画面までしか大きくならないというパソコンもあります。

800×600ピクセルの解像度でバランスよく表示できるように工夫することが重要です。
でないと、パソコンの環境によってどうしてもレイアウトが崩れてしまったり、横のスクロールバーが表示されたりしてちょっと厄介になります。

ちなみに、私のメインで使っているCOMPAQのノートパソコンは1024×768、VAIOノートはどう頑張っても800×600までしか大きくすることはできないのです。

画面の大きさを確認するには、
デスクトップ上の何もないところを右クリックして、ショートカットメニューより[プロパティ]をクリックします。

[設定]タブを開くと、右下に画面の領域を調整する部分があります。
下の図では、1024 x 768 ピクセル と表示されていますね?
画面のプロパティ

▲Page TOP

FrontPageで[ブラウザでプレビュー]のウィンドウのサイズを指定するには

FrontPageではブラウザでプレビューでのウィンドウのサイズを指定することができます。

FrontPage 2000/2002の場合

[ファイル]→[ブラウザでプレビュー]をクリックします。
ブラウザでプレビュー

下の[ウィンドウのサイズ]で、ページのプレビューに使用する画面の解像度を「800 x 600」に指定して[プレビュー]ボタンを押してください。

ただし、ツールバーでのブラウザでプレビュー(ブラウザでプレビュー)ボタンをクリックすると、
標準サイズ、すなわち、あなたのパソコンの解像度でプレビューすることになります。

▲Page TOP

FrontPage 2003の場合

[ファイル]→[ブラウザでプレビュー]をポイントし、表示したいブラウザとウィンドウのサイズ(800 x 600)を指定します。

ツールバーでのブラウザでプレビュー(ブラウザでプレビュー)ボタンの右側▼をクリックして、
表示したいブラウザとウィンドウのサイズを指定することも可能です。

とにかく、どの画面の解像度でも横スクロールバーを表示させたくない場合は、
表の列幅をピクセル単位ではなく、パーセント単位で指定してくださいね。

▲Page TOP

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

2012年12月21日(日本時間)をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。

* Expression Web 4 無料版をダウンロード

▲このページのトップへ