【美大生が登場】色のユニバーサルデザインとは? >>

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

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

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


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

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

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

宜しくお願いします

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

A 回答 (3件)

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



訳ではないです

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


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

http://masaboo.cside.com/new_html1/ht_12.htm
    • good
    • 0

せっかくホームページビルダーの最新版を使うのでしたら、フルCSSテンプレートなどの最新テンプレートから始めることをお勧めします。

その方が、HTMLうんぬんという技術的詳細より、内容・構成に専念できると思いますよ。
    • good
    • 0

最初が間違っているような??


最初にすべきは、
 ⇒はじめてのWebドキュメントづくり( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
 ⇒1と2の間辺りからはじめるホームページ講座( http://www6.plala.or.jp/go_west/beginner/ )
でウェブ、HTML、CSSなどの知識を身につけることですよ。それなくして、いきなりビルダーじゃ、たとえできても先に勧めなくなります。
 HTMLのタグなんて、一般人が使うのはせいぜい数十個、中学校の英単語2,000に比較したら微々たる物。

 そのうえで、道具として使うほうが断然早いです。

 本題ですが、記事全体をdivで囲んで、
width:90%;
max-width:980px;
min-width:640px;
margin:0 auto;
とすれば、スマホのような小さな画面では640pxまで縮小され、それ以上小さな画面でははみ出す。
640px以上のディスプレイではディスプレイ幅の90%で中央に配置され、980pxを超えるディスプレイでは、980px幅に固定され中央に表示されます。
 単純にそれだけです。

 とりあえずは、ビルダーのテンプレートをそのまま使用して作成されることをお勧めします。

 今後、HTML5という仕様が主力になっていくと思いますが、HTML5では文書を読み解き、構成要素に分解して、意味のあるタグでマークアップしていくことが強く求められます。
HTML5では
<body>
 <header>文書のヘッダ</header>
 <section>本文
  <section><section>
 </section>
 <footer></footer>
</body>
 のように、そのためには文書を読み解き理解して最適なタグを選択するという人でないとできない部分が増えます。どんな高価なオーサリングツールでも、こればっかりはできなくなります。
 それをスタイルシートでデザインしていく手法もツールには頼れなくなります。

 ぜひ、最初に基本を学ばれてください。すくなくともビルダーのマニュアルを覚えるより楽です。(^^)
 私も中高年世代後半で始めて今は高齢者ですが・・
    • good
    • 0

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

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

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

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

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

Qホームページビルダーで表の列幅を調整するには

ホームページビルダーホームページを使ってホームページを作成中です。
表を作りましたが,表の列幅が揃いません。プレビュー画面では大体同じ幅になっているのに,実際の表の列幅は揃っていません。
なぜ揃わないのでしょうか?また揃えるためにはどうしたら良いでしょうか?
ご教授お願いします。

Aベストアンサー

hpbを利用し、表を多用し Hpを作成しています。
100桁 4列作成する場合、
 <TABLE border="1">
<COL span="4" width="100">
<TBODY>
だけではなく、合計幅を入れると安定します。
           ↓
 <TABLE border="1" width="400">
<COL span="4" width="100">
<TBODY>

※ この場合も、その列に 100pxを超す画像を入れたり、
長い文字列にリンクを張ったりすると、幅がかわる可能性があります。
 

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

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

Aベストアンサー

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

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

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

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

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

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

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

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

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

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

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

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

Aベストアンサー

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

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

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

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

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

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

Aベストアンサー

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

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

Qホームページビルダー作成にて画面サイズでつまづいています

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

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

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

Aベストアンサー

どこでも配置モードで作ると、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>

どこでも配置モードで作ると、style属性として書き出されるから、ソースが汚いといわれるんじゃないでしょうか。
外部スタイルシートに作り直せば、HTMLタグや構造そのものは比較的綺麗だと思います。

で本題のセンタリング(中央寄せ)の方法ですが、
たぶん、標準の機能(ダイアログやボタン)では作れないかもしれませんが、
以下のようにすれば、どこでも配置モードのままでも可能です。
ホームページビルダーのデザインビューではセンタリングされないかも知れません。

・センタリングしたいレイヤ...続きを読む

Qホームページビルダーで作成したサイト情報の保存場所は?

ホームページビルダーで作成したサイト情報の保存場所は?

パソコンをWindows XPからWindows7に買い換えたので、XPで使っていた【ホームページビルダーV6.5】を7にインストールし直しました。
しかしサイト情報(FTPサーバーアドレスやパスワード)をメモしたテキストファイルを誤って削除してしまい、サイトの再構築ができなくなってしまいました…

そこで質問です。

もともと使っていたXPの中からサイトの情報(転送時に使うFTP情報)をコピーして7に持っていきたいのですが、ホームページビルダーで作成したサイト情報の保存場所はどこなのでしょうか?
ホームページビルダー自身はCドライブ内のprogram filesにあります。
調べたところ、サイト情報はそことは別に「C:\Windows\Application Data\Ibm\HomePage Builder Version 6」に入っているという情報を見つけたのですが、Windowsフォルダ内にApplication Dataというフォルダはありませんでした。
自分のミスで本当に情けない限りですが、XPでのホームページビルダーV6.5のサイト情報が保存されている場所をご存じの方、いましたらご回答のほど宜しくお願い致します。

ホームページビルダーで作成したサイト情報の保存場所は?

パソコンをWindows XPからWindows7に買い換えたので、XPで使っていた【ホームページビルダーV6.5】を7にインストールし直しました。
しかしサイト情報(FTPサーバーアドレスやパスワード)をメモしたテキストファイルを誤って削除してしまい、サイトの再構築ができなくなってしまいました…

そこで質問です。

もともと使っていたXPの中からサイトの情報(転送時に使うFTP情報)をコピーして7に持っていきたいのですが、ホームページビルダーで作成し...続きを読む

Aベストアンサー

windows7だと、ビルダーv6.5は未対応となっていますので、
もしかしたらうまく使用できないかもしれませんが・・・。

xpだとWindowsじゃなくてDocuments and Settings¥ユーザー名¥内にApplication Dataがあります。
その中にIBM¥HomePage Builder Version ●¥site¥があると思います。
siteをクリックしてください、ご自分が作成したサイト名(ビルダーのサイト一覧でのサイト名)のフォルダがあると思います。
このフォルダの中身のファイルを直接確認することはできないと思うのですが、サイト情報が保存されているのはこちらかもしれません。
(転送設定情報が含まれているかどうかは確認できませんでした。)

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

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

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

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

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

Aベストアンサー

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

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

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

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

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

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

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

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

Qホームページビルダー プレビューでのずれ??

ホームページビルダー10の標準モードでHPを作成しています。
素人なので大変苦労しています。
表を作成して属性の変更でセルの大きさをきめて、セルのなかに
ウエブアートデザイナーで作成した物や文字を入れているのですが
全てではないのですがプレビューを見るといくつか編集
画面の位置よりズレがある文字や作成した図があります。
(編集画面とプレビュー画面で作成した図や文字の位置にズレが生じている。。。)
色々と試行錯誤しているのですが、どうしてもズレが直りません
何か原因があるのでしょうか?
素人な質問で説明がわかりずらくてすみませんが宜しくお願い致します。

Aベストアンサー

編集画面とプレビューでの差、ありますよね。
自分も以前これに悩んでこちらのサイトのお世話になりました。
その時の質問が少しでも参考になれば、と思い参考URLに貼らせていただきました。
この時は「どこでも配置モード」で作っていた時の質問ですが、現在は標準モードで作り直しました。
標準画面でもプレビューとの差はあります。
しかしアップロードすると、プレビューで見た状態のものがウェブ上で表示されるので、プレビューを信用してビルダーを使っています。

参考URL:http://okwave.jp/qa1989223.html

Qホームページビルダー リンク設定できない

ホームページビルダーで作っているのですが リンクできません
ビジュアルサイトビューでリンク設定できたらツリーみたいになるはずなのに
リンクされていないHTMLファイルのとこにあるのですが
リンク挿入 ページリンク作成する リンク先INDEX.HTMLとつなげたいのですが
どうしたらいいのですか?

Aベストアンサー

親ウィンドウ(index.html)のページを開きます。
その中の「この部分にリンクを貼りたい」というところを反転させます(文字の場合)。
ロゴや画像の場合はその部分をクリックするだけでOK。
そのリンクを貼りたいところで右クリックすれば、「リンク挿入」があります。
別ウィンドウが出てきます。
「参照」ボタンでどのページをリンクしたいのか設定。
一番下に「ターゲット」があります。
このターゲットで別ウィンドウを開くのか、フレーム使用で右側に開くのかなどを設定します。

右クリック→リンク挿入でなくても、
リンクを設定したいところをクリックして、ツールバーにある「挿入」→リンクでも出来ます。

他には、ご質問にある「ビジュアルサイトビュー」で、
「リンクされていないHTMLファイル」にあるページをリンクしたいページまでドラッグすることも出来ます。リンク解除したいときには、逆に「リンクされていないHTMLファイル」にドラッグすれば元通りですね。

http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F136492568B70015C90E?opendocument

参考URL:http://www-6.ibm.com/jp/domino01/swhc/esupport.nsf/key/49256A6A0001F136492568B70015C90E?opendocument

親ウィンドウ(index.html)のページを開きます。
その中の「この部分にリンクを貼りたい」というところを反転させます(文字の場合)。
ロゴや画像の場合はその部分をクリックするだけでOK。
そのリンクを貼りたいところで右クリックすれば、「リンク挿入」があります。
別ウィンドウが出てきます。
「参照」ボタンでどのページをリンクしたいのか設定。
一番下に「ターゲット」があります。
このターゲットで別ウィンドウを開くのか、フレーム使用で右側に開くのかなどを設定します。

右クリック→リン...続きを読む

QHPビルダー 画像が表示されない

拡張子はlpegで
半角英数のタイトルで、
ビルダーでの画面では画像表示できるのに
転送してみると
ばつ印でみれません
どうすればいいですか?

Aベストアンサー

まず「lpeg」じゃなくて「jpeg」では?

次に「ビルダーでは見えて転送後は見えない」件ですが、画像のファイル名に大文字を使っていませんか?
Windows系OSでは大文字小文字はどちらでもOKです。
しかし一般的なサーバはUnix系OSで、大文字小文字をきちんと判別します。よってHTMLファイル内に記述しているファイル名と、実ファイル名が異なると解釈されることがあるのです。
ご確認を。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング