- ベストアンサー
ホームページビルダー作成にて画面サイズでつまづいています
ホームページビルダー13でホームページを作成しているのですが、ビルダー上では画面サイズを940×1200で作成していているまして、横に長い画像を使用できる画面いっぱいまで伸ばしているのですが、webブラウザーで確認すると右にかなりの余白ができてしまう状態になります。私の理想としては見る側がどんなサイズの画面でもきちんと中央を基本にしたいと思っています。 文章だと伝えづらいので、目標イメージのサイトを書きに載せました。 そのサイトを参考にいうと、トップページの家が写ってる画像が私の場合左に寄っていて、右側に四分の一程空白ができてしまうのです。 作成ページ右いっぱいに画像を広げても空いてしまいます。 どういう処理をしたら下記サイトのようにキレイにレイアウトできるのでしょうか?どなたかわかるかたいらっしゃいましたら教えてもらえると助かります。よろしくお願いします。
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
どこでも配置モードで作ると、style属性として書き出されるから、ソースが汚いといわれるんじゃないでしょうか。 外部スタイルシートに作り直せば、HTMLタグや構造そのものは比較的綺麗だと思います。 で本題のセンタリング(中央寄せ)の方法ですが、 たぶん、標準の機能(ダイアログやボタン)では作れないかもしれませんが、 以下のようにすれば、どこでも配置モードのままでも可能です。 ホームページビルダーのデザインビューではセンタリングされないかも知れません。 ・センタリングしたいレイヤーを選択して、スタイルシートの編集ダイアログを表示 ・位置指定の左(left)を50%に指定する ・左マージン(margin-left)を、幅の半分の値をマイナスで指定する (幅が400pxの場合は、左マージンが-200px) これを保存して、ブラウザで見てみてください。 HTMLコードとスタイルシートはだいたいこうなると思います。 <div style="position:absolute; top: 100px; left: 50%; margin-left: -200px; width: 400px; height: 300px; border: 1px solid #999999"> <p>文章など</p> </div>
その他の回答 (3)
- jaco-xyz
- ベストアンサー率0% (0/2)
>でも難しいんですよね、標準モードでレイアウトを整えるのが。 HP全体を一つのテーブルと考えてにてはいかがですか? その中を幾つものマスで仕切ってリンクを入れたりとか テーブルの中にテーブルを入れるのもアリだと思います。 一度、白紙に大まかなデッサンを描いてみて それをマスで仕切ってみてはいかがでしょうか?
- jaco-xyz
- ベストアンサー率0% (0/2)
「どこでも配置モード」の場合、それぞれのオブジェクトを ブラウザ左上から何ピクセルの位置に置く様に指定してしまいますので ブラウザのサイズに合わせて中央に置くのはできません。 「どこでも配置モード」はブラウザに依ってはオブジェクトが重なって 表示されてしまいますのでお勧めできませんよ。
お礼
そうなんですか。何となく噂には聞いていたのですが結構な頻度で、そういう現象が起こるもんなんでしょうかね?ソースも汚くなるというし。(ちなみに標準モードで作るとソースはきれいなのかな?) でも難しいんですよね、標準モードでレイアウトを整えるのが。 例えば上記のサイトと同様のものなんかも標準モードで作れるものなんですかね?表を使った方がやりやすいのかなと思いやってみたのですが、なかなか思うようにいかなくて、どこでも配置モードを使ってました。何か参考になるサイトをご存知ですしたら教えてもらえたらと思います。夜遅くにありがとうございます。
- jaco-xyz
- ベストアンサー率0% (0/2)
ビルダーの編集画面の書式ツールバー(フォントのサイズや色などのアイコンがある所)の「中央揃え」をクリックしてみましたか? (画像をクリックして赤い枠で囲まれた状態にしておいて下さい。)
補足
すみません、参考サイトを載せるのを忘れました。 http://www.atelier-m4.com/ やってみたのですが、画像が赤い枠で囲まれないんですよね。 「どこでも配置モード」でやってるからでしょうか? 確か標準モードだと赤い枠があったような。 そして画像の上でクリックすると画像サイズを変える隅にポッチのある状態になり、そこで書式でフォントを変更しようとしてもフォント変更ができません。中央揃えもできません。「どこでも配置モード」では限界があるのでしょうか?
お礼
お返事遅くなり失礼しました。 早速やってみましたができました。理解するのに時間がかかりましたが、なんとなく理解できたと思います。 本当にありがとうございます。×2