window


この質問記事は解決しています。
トップページ > 記事閲覧
*ホームページに左右の余白(空白)をつけたい
日時: 2008/06/16 23:17
識別: ID:CImUGeY5p841
名前: 元気
はじめまして。
このたび、ホームページビルダー12で、HP作成のデビューを果たしました。
ところで私がホームページを作って、ブラウザで表示させると、ページが左右一杯に広がってしまいます。
ヤフーなどのページは左右に余白(空白)があるのですが、ホームページビルダーのどの機能を使うと、そのような余白を自分の作ったページにもつけられるのでしょうか?
お教えください。よろしくお願いいたします。
メンテ

Re: ホームページに左右の余白(空白)をつけたい ( No.1 )
日時: 2008/06/17 12:56
名前: nn

> ページが左右一杯に広がってしまいます。

ブラウザウィンドウをモニター画面いっぱいに開いていればそうなるのが普通です。
印刷物などとは違い、表示領域が広ければ広いなりに、狭ければ狭いなりに、どんな閲覧環境でもそれなりに支障なく閲覧できるのがwebページのいいところです。

> ホームページビルダーのどの機能を使うと、そのような余白を自分の作ったページにもつけられるのでしょうか?

ページの余白は、スタイルシートのmargin(外側余白)、padding(内側余白)で指定します。

http://hpbuilder.net/hpbuilder4.htm
↑の「ボックスの概念」「左右に余白をつけてみる」ちゅうところを参照。

例では、P(段落)に左右マージンを設定していますが、BODY(本文)を選べばページ全体の余白を指定できます。
あと、上記例は、余白に数値指定していますが、ページの内容物全体を囲むブロック(ビルダーで言うレイアウトコンテナ)の幅を指定し、左右マージンをauto(自動)にする方法もあります。
参考:http://www.mozilla.gr.jp/standards/webtips0004.html
メンテ
Re: ホームページに左右の余白(空白)をつけたい ( No.2 )
日時: 2008/06/17 20:21
名前: mita
参照: http://webiina.web.fc2.com/newpage24.html

簡単にできる中央の配置
メンテ
Re: ホームページに左右の余白(空白)をつけたい ( No.3 )
日時: 2008/06/17 20:58
名前: 元気

ありがとうございます。
うまい具合に、左右に余白のある、コンパクトはページになりました。

ただもう一つお聞きしたのですが、余白は出来たのですが、
その余白の部分にも、背景の模様が覆われてしまいます。

自分は左右の余白を作れば、左右の余白は白で、
中身にだけに背景があるようなページにしたかったのですが、
そういうのは可能なのでしょうか?

重ね重ね申し訳ないのですが、よろしくお願いいたします。
メンテ
Re: ホームページに左右の余白(空白)をつけたい ( No.4 )
日時: 2008/06/17 22:31
名前: nn

「中身のブロック」だけに背景をつければよいと思います。
>>1 の例で言えば、「ページの内容物全体を囲むブロック(ビルダーで言うレイアウトコンテナ)」のことです。
まあ、表で代用することも出来ますが、表でないものを表としてマークアップするのは個人的にはお奨めしません。

あと、「中身」の幅が固定されているのなら、その幅に応じた背景画像を、水平方向の中央に、垂直方向にだけ繰り返して表示してもいいかもしれません。

すべてスタイルシートマネージャーで設定できます。
http://hpbuilder.net/hpbuilder5.htm#backgrondimage
メンテ
Re: ホームページに左右の余白(空白)をつけたい ( No.5 )
日時: 2008/06/18 20:29
名前: 元気
状態: 解決!

丁寧な解説ありがとうございました。

初めてのホームページですが、イメージどおりに作れそうです。
メンテ
- ( No.6 )
日時: 2011/12/04 23:45
名前: d251.osa20nn1fm11.vectant.ne.jp

#SPAM

メンテ

 返信フォーム (上記スレッドに返信する場合は以下のフォームから投稿します)
題名 ※必須 スレッドをトップへソート
名前
E-Mail
URL
パスワード 記事メンテ時に使用します (メンテは該当記事のメンテアイコンをクリック)
返信内容
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定

・問題が解決したら 解決 を選択して投稿して下さい HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ(メンテアイコン)から修正する事ができます。


投稿内容をご確認下さい(記事の削除は出来ません)

   クッキー保存