『ボヘミアン・ラプソディ』はなぜ人々を魅了したのか >>

ホームページビルダー13でホームページを作成しているのですが、ビルダー上では画面サイズを940×1200で作成していているまして、横に長い画像を使用できる画面いっぱいまで伸ばしているのですが、webブラウザーで確認すると右にかなりの余白ができてしまう状態になります。私の理想としては見る側がどんなサイズの画面でもきちんと中央を基本にしたいと思っています。

文章だと伝えづらいので、目標イメージのサイトを書きに載せました。
そのサイトを参考にいうと、トップページの家が写ってる画像が私の場合左に寄っていて、右側に四分の一程空白ができてしまうのです。
作成ページ右いっぱいに画像を広げても空いてしまいます。

どういう処理をしたら下記サイトのようにキレイにレイアウトできるのでしょうか?どなたかわかるかたいらっしゃいましたら教えてもらえると助かります。よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

お返事遅くなり失礼しました。
早速やってみましたができました。理解するのに時間がかかりましたが、なんとなく理解できたと思います。
本当にありがとうございます。×2

お礼日時:2009/02/02 22:52

>でも難しいんですよね、標準モードでレイアウトを整えるのが。



HP全体を一つのテーブルと考えてにてはいかがですか?
その中を幾つものマスで仕切ってリンクを入れたりとか
テーブルの中にテーブルを入れるのもアリだと思います。

一度、白紙に大まかなデッサンを描いてみて
それをマスで仕切ってみてはいかがでしょうか?
    • good
    • 0

「どこでも配置モード」の場合、それぞれのオブジェクトを


ブラウザ左上から何ピクセルの位置に置く様に指定してしまいますので
ブラウザのサイズに合わせて中央に置くのはできません。

「どこでも配置モード」はブラウザに依ってはオブジェクトが重なって
表示されてしまいますのでお勧めできませんよ。
    • good
    • 0
この回答へのお礼

そうなんですか。何となく噂には聞いていたのですが結構な頻度で、そういう現象が起こるもんなんでしょうかね?ソースも汚くなるというし。(ちなみに標準モードで作るとソースはきれいなのかな?)

でも難しいんですよね、標準モードでレイアウトを整えるのが。

例えば上記のサイトと同様のものなんかも標準モードで作れるものなんですかね?表を使った方がやりやすいのかなと思いやってみたのですが、なかなか思うようにいかなくて、どこでも配置モードを使ってました。何か参考になるサイトをご存知ですしたら教えてもらえたらと思います。夜遅くにありがとうございます。

お礼日時:2009/01/30 00:04

ビルダーの編集画面の書式ツールバー(フォントのサイズや色などのアイコンがある所)の「中央揃え」をクリックしてみましたか?


(画像をクリックして赤い枠で囲まれた状態にしておいて下さい。)
「ホームページビルダー作成にて画面サイズで」の回答画像1

この回答への補足

すみません、参考サイトを載せるのを忘れました。
http://www.atelier-m4.com/

やってみたのですが、画像が赤い枠で囲まれないんですよね。
「どこでも配置モード」でやってるからでしょうか?

確か標準モードだと赤い枠があったような。
そして画像の上でクリックすると画像サイズを変える隅にポッチのある状態になり、そこで書式でフォントを変更しようとしてもフォント変更ができません。中央揃えもできません。「どこでも配置モード」では限界があるのでしょうか?

補足日時:2009/01/29 23:04
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qホームページビルダーで横幅について

ホームページを作ろうと、とりあえずホームページビルダー17の体験版をDLしました。

とりあえず四苦八苦しながらですが、なんとか少しずつ理解をしてきたのですが、まだまだ分からない事だらけです。

とりあえず、今一番分からないのが横幅の指定についてです。


例えば、皆さんそれぞれ横幅が違うディスプレイをお使いですよね?
ですが、どのサイトも自動的にそのディスプレイにあわせて自動的に最大化しているように思います。
そうするにはどのように設定すればいいのでしょうか?

また、950ピクセルくらいが最適とかを調べているうちに目にしたのですが、試しに950を設定して画像を挿入したところ横幅に余白があります。
サイト作成では、上部を青、中を白、最下部を青という想定をしているので余白があるとどうしても不恰好です。
見ている人のディスプレイにあわせて最大にしたいので、どのようにすればいいのか横幅について教えてもらえませんか?

できれば専門用語をくだけた表現で教えてもらえると非常に助かります。

宜しくお願いします

Aベストアンサー

>自動的にそのディスプレイにあわせて自動的に最大化している

訳ではないです

>950ピクセルくらいが最適とかを調べているうちに目にしたのですが、試しに950を設定して画像を挿入したところ横幅に余白があります


一般的なホームページの横幅(width)は800ピクセルから950ピクセルぐらいが妥当
余白は背景で埋めます
http://copicopi.com/bgall.html

http://masaboo.cside.com/new_html1/ht_12.htm

QHPビルダーで中央表示がしたいのですが・・。 

HPビルダーで中央表示がしたいのですが・・。 
どこでも配置を使って作ったHPが、左端がブラウザに固定の表示になってしまいました。
常に開いたブラウザの中央に表示されるようにするにはどうしたらいいのでしょうか。

Aベストアンサー

>http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1037

IBMのサイトを参考にしてください。

標準モードで「表の挿入」で「表」を使って、表の一番外枠を選択状態で「書式(O)」「位置揃え(A)」「中央揃え(E)」で表が中央に来ます。

または、普通の「文字の中央」をクリックでもOKです。

どのサイズのディスプレイでも中央表示となります。

どこでもモードでは不可です、標準モードで作成です。

表の列や行は後からいくらでも追加や削除が出来ますので、文字列の配置や画像の挿入位置などレイアウトを考えて、列や行を作りましょう。

またセルの結合や分割もできますので、自由な画面のレイアウトが可能です。

表の外枠を選択状態で「編集(E)」「属性の変更(A)」で表やセルの寸法を決めたり枠表示を消したり、枠に色をつけたりも出来ます。

Qホームページビルダーで背景画像がうまくいかない

ホームページビルダーでHPを作成している初心者ですが、どうも背景画像がうまくいきません。
どこでも配置モードで製作しているのですが、背景画像の大きさ(範囲)を指定できないものでしょうか?編集→ページのサイズ→800×600等を選んでも、背景画像の範囲が限定されるわけでもなく、画面いっぱいに背景画像が映し出されます。
ちなみに、挿入→画像ファイル→ファイルから壁紙として  このやり方で背景画像を設定すると、ぺーじ編集画面ではしっかりと背景画像が表示されるのですが、プレビューでは背景が表示されない不具合が出ました。(検索してみると同じ不具合が出る人が数人見つかり、一つだけ解決策が見つかったのでそれを実行しています。 http://www.aimix.jp/hpboldlog2/old3594.html   の一番下のやり方です。)

最悪、背景の問題が解決できなければ、ページの中央表示で妥協しようと思っています。
で、標準モードで製作していれば簡単にページの中央表示(真中寄せ)ができるようですが、今どこでも配置モードで製作していますので、どこでも配置モードで中央表示する方法はありませんか?
できれば全てにおいてhtmlタグは極力直接入力は避けたいです(わけがわかっていないので・・・)

お詳しい方よろしくお願いします。

ホームページビルダーでHPを作成している初心者ですが、どうも背景画像がうまくいきません。
どこでも配置モードで製作しているのですが、背景画像の大きさ(範囲)を指定できないものでしょうか?編集→ページのサイズ→800×600等を選んでも、背景画像の範囲が限定されるわけでもなく、画面いっぱいに背景画像が映し出されます。
ちなみに、挿入→画像ファイル→ファイルから壁紙として  このやり方で背景画像を設定すると、ぺーじ編集画面ではしっかりと背景画像が表示されるのですが、プレビューでは背...続きを読む

Aベストアンサー

>背景画像の範囲が限定されるわけでもなく、画面いっぱいに背景画像が映し出されます。

この意味は、背景画像が繰り返して、表示されるという意味でしょうか?

繰り返さないにするには「編集」「ページの属性」「ページの情報」タブを開いて「スタイル」ボタンを押します。「色と背景」タブの中に「繰り返さない」の設定があります。

しかし、「800×600」の画像では、左上に固定されます。

私は、画像ファイルのサイズを1100×915くらいに大きくして、背景として挿入でなく、画像ファイルの挿入にしていますが、表示されないとかの不具合は一度もありません。

バージョン8の時から、いまの11までですが。

もともと、ビルダーは、どこでも配置モードでは「常に画面の中央表示」はできません。最新バージョンの13ではどうなってるかわかりませんが。

どのサイズの画面でも、画面の中央表示にするには、標準モードで「表」をうまく使えば、かなり複雑な画面のレイアウトが出来ます。

Qホームページビルダーでプルダウンメニュー作成

質問させていただきます。HP作成中です。素材サイトにあるようなプルダウンメニューを作成したいのですがどのような方法で作成するのでしょうか?こちらのサイトです。http://www.s-chimp.com/mc/
メニューをクリックするとサブメニューが表示されます。理想としては違うメニューをクリックしたときに他のサブメニューが表示されたままではなく閉じると嬉しいです。初心者なので難しいことは出来ないと思うのですがどなたかお願いいたします。

Aベストアンサー

ホームページビルダーの機能にはありませんので
こちらの メニュー か 個人的に使ってみたいスクリプト を参考にしてください

http://www.wsb.jp/hpb/java_s/top.htm

Qナビゲーションバーの作り方について

今までは1コづつ単体でボタンを作り(イラストレーターで)ホームページビルダーに貼り付けてリンクを挿入してホームページを作成していましたが、ボタンを単体ではなくナビゲーションバーに作り変えたいのです。作業工程を教えてください。
ナビゲーションバーってもしかして素材を同じ色・大きさで作って並べてるだけ?
素材作成ソフトはフォトショップかイラストレーターです。そしてImage Readyも必要でしょうか?使ったことないですが、あります。
オンマウスでロールオーバーさせたりしたら分りやすい見だしになる
と思うのですが・・・Image Readyで出来るのですか???
はてなマークばかりですいませんっ
よろしくお願いします。

Aベストアンサー

PhotoshopとImageReadyを連携させて、メニューバーや画像などいっぺんに作って、一つの大きな画像を、ImageReadyでスライス(分割)して、それぞれにロールオーバーなどの動きを作り、書き出す(保存する)と、分割された複数の画像とロールオーバーなど用の画像ができます。HTMLを同時に作成することもできますので、私の場合は、Deamweaverにコピペして、ロールオーバーのスクリプトなどを設定し直しています。

Qホームページビルダーでセルの幅の固定するには

ホームページビルダー6.5の標準モードでの表の挿入ついて教えてください。
表のセルの幅を300ピクセルに固定したいと思っています。
セルをを選択→属性の変更→セル→セルの幅に300(ピクセル)を入力。
すると、セルの幅は300ピクセルに固定されますが、セルに長い文章を入力すると文章にあわせて幅が大きくなってしまいます。

どうすればセルの幅を固定し、文章がセルに合わせて表示されるようになりますか。
よろしくお願いします。

Aベストアンサー

スタイルシートを使います。
(後で説明書を読んでね。)

セルの幅に300をとりあえず未入力状態にします。
[表]又は[セル]タブ内の[スタイル]ボタンをクリック、
[スタイル]タブ内の[現在のタグのみにスタイルを設定]の[編集]ボタンをクリック、
[位置]タブ内の[幅]の「予約語」→「ピクセル」に変更して
入力ボックスに「300」を入力です。(以後、OKボタン)

下記URLも参考にしてください。

参考URL:http://tohoho.wakusei.ne.jp/wwwcss.htm

Qイラストレーターに取り込んだ画像の白い部分を透明にできますか?

例えば図面などのデータがあったとした場合、その線の部分、つまり黒い部分だけを残し、残りの白紙部分を全て透明にすることはできますか?
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
画像の白紙部分を簡単に透明にできる方法がありましたら教えていただければと思います。

Aベストアンサー

Illustrator 上に、すでに配置されている白黒画像であれば、画像を選択して、透明を「乗算」 に変更してみてください。
画像の下のパスが、透けて見えます。

Qホームページビルダーで画面が小さく全画面表示できない

ホーページビルダー12を使っています。初心者です。
1.作成したHPの画面が小さく全画面表示できず余白に生ります。
  画面拡大の方法を教えて下さい。
2.各パーツの位置が編集画面とプレビュー画面で異なります。
  ずれが生じてしまいます。どこでも配置モードを利用しています。
ご教示お願いします。

Aベストアンサー

 どこでも配置モードは、自分にしか通用しないサイトしかできないので、使わないほうがよいです。ソースもやたらと悠長なものになってしまう。
 きちんと標準モードで作成して、スタイルシートでデザインしまょう。
 いずれ気がついて、全部を直す羽目になる。
 オーサリングツールはタグは覚えなくてもできますが、HTML自体はしっかり理解していないと、とんでもないものが出来上がってしまいます。

Qフッターを固定して、常にどのページでも常に表示

フッターを固定して、常にどのページでも常に表示させる方法について。

今、FC2様の方で、ホームページを作成しているのですが、
フッターを固定して、そのフッターの内容を
常にどのページでも表示させるようにしたいのですが、
(付属の画像のようなスクロールしても常に画面下に表示されるもの)
なのですが、

タグ初心者でどのようにすればいいのかよく解りません。

タグはどのようなものが解りやすく出来ますでしょうか?
後、タグの意味も教えていただけると嬉しいです。

回答宜しくお願い致します。

Aベストアンサー

先ほども回答した者です。
フッター固定で一応CSSで見つけましたので貼っておきます。
お望みと全く一緒の効果が有るかわかりませんが、
色々頑張ってみて下さい。
出来ればHTML、CSS、JavaScriptこの3つはあると
WEBページ制作する上で大変よろしいとおもいます。
私は参考書のみ買ってやってましたがHTMLとCSSはそれだけで覚えられます。
(プログラムではない為)、ですがJavaScriptはプログラム言語であるため、
独学だと大変です。ですが慣れると結構応用が利きますので、
頑張って下さい。
補足:私は英語苦手に付き意味を説明できません。
様は英語ですから。

参考URL:http://scuderia-web.com/tips/xhtml_css/fixed_header_and_footer.php

Qホームページビルダで画像を簡単にアニメーション表示

現在、ホームページビルダー14を使用しています。
写真をクリックしなくても、ホームページが開いた時点から、自動的に2.3枚の画像が切り替わるようにしたいと思っています。

例として他の方が作成したページですが、私が参考にしたもので、
http://www.geocities.jp/nakayoshi_c2004/
のページの右の方には、切り替わっている写真があります。

ここで質問ですが、スライドショー形式ではなく、この様なものにするには、ホームページビルダーで簡単にできる機能はありますでしょうか?
また、なければ、最も簡単に出来る方法をお教えいただければと思います。
詳しい方がいましたら、よろしくお願いします。

Aベストアンサー

ツール(T)→ウェブアニメーターの起動(R)→ツール(T)→
  アニメーションウイザード(W)→複数の画像を使用してアニメーションを作成
<画像の追加をクリックし、順次画像ファイルを指定>し、次へ→

 位置・サイズ定し、次へ→繰返し回数を指定し、次へ→完了。

  そして、名前をつけて保存。 <animation gif> で保存されます。
http://www.weblio.jp/content/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3GIF

★ 先に、表示されたい画像のサイズを揃えておくと、、綺麗に見えます。


人気Q&Aランキング