ホームページビルダー16　ページセンター表示

Question

現在サイトを制作しています。 Yahooなどのようにページをセンター表示をしたいのですがやり方が分かりません。調べて色々試してみましたがセンターに表示されません。どのようにするのでしょうか？以下は試しにやってみた結果です。

ORUKA1951 · Accepted Answer

No.1です。
tableを使用するどこでも配置モードは、決して使用してはならない手法ですので論外ですが・・
「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」
「国内のウェブサイトにおける非互換要因の一つとして、ホームページ・ビルダーの名前が調査書の中で挙がっている( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC#.E4.BD.9C.E6.88.90.E3.81.97.E3.81.9F.E3.82.A6.E3.82.A7.E3.83.96.E3.82.B5.E3.82.A4.E3.83.88.E3.81.AE.E5.BD.B1.E9.9F.BF )」

＞ビルダーも16になりもう少し使えるかと思いましたが、
　これは良く誤解されているのですが、テンプレートなどお仕着せのデザインをそのまま流用するのなら問題ないのですが、ちょっとデザインを変更しようとするとオーサリングツールの知識だけでは難しいです。ちょっと手の混んだことをしようとすると、実際には、テキストエディタで作成できる人以上に、HTMLやCSSの知識が必要になります。
　仕様書なんて高々数十ページですが、それに加えて数百ページのマニュアルを読破しないといけないのですから(^^)

★特にIEが標準モードで起動するようDOCTYPEを書くこと!!
　(注)margin:0 auto;でそのブロックは左右中央に配置されるはずです。
　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )
　　ビルダーのデフォルトはそうではありません。
　⇒ホームページビルダーでのホームページ作成方法 [TempNate HP設置マニュアル]( http://tempnate.com/hp_making/hpbuilder.html )

★ブロックを中央配置にするプロパティは、
　margin:0 auto;
　　意味は、
　　　margin-top:0;margin-right:auto;margin-bottom:0;margin-left:auto;
　　値が３以下しか書かれていない場合は、上→右→下→左の対辺が省略されている
　text-align:center;
　　はブロック要素の中で行内要素を中央配置するものです。
　　　IEの互換モードはブロックを並べてしまい。しかもmargin:autoが無効

＞CSSやXHTMLの技術的な話は正直そこまでに至る基本から勉強しないとわからないです。

そのほうが、はるかに早道で簡単でしょう。そして、楽ですし、自由自在にデザインできるようになりますしね。将来のメンテナンスもとっても楽です。
　No.1のサンプル参照

★Webオーサリングツールを自在に使用するためには、テキストエディタで作成する人以上にHTMLやCSSの知識が必要です。決して逆じゃないですよ。

頑張ってください。
　^^^^^^^^^^^^^^^^^
[例]
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　はブラウザの[表示]メニュー→[スタイルシート]でスタイルシートを選択するとデザインが劇的に変化しますし、ウィンドウ幅が変化してもデザイン保たれます。さらに、印刷プレビューだとそれようのデザインになります。
　しかし、HTMLはソースを見られたら分かるように、極めてシンプルです。HTMLは誰でも内容を追加したり変更できるくらい簡単です。もちろん、検索エンジンも内容を正確に理解できるでしょう。

Z31 · Answer

センター表示というのは、ディスプレイの中央ということでしょうか？

どのサイズのディスプレイでも中央表示にするには「表」を使います。

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

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

ORUKA1951 · Answer

ビルダー使うとややこしくなるので・・最初のは、必ず次のいずれかにします。ビルダーの初期設定で変更できます。 HTML4.01strict 　本来は↑で書くべき!! 　　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 HTML4.01transitinal　ビルダーはtransitinalだけど、こちらの宣言に書き換える。 XHTMLにすると、IE6は互換モードになってしまうので以下は使わないほうがよい。 XHTML1.0strict XHTML1.0transitinal ★IEが互換モードで起動すると、他のブラウザとの表示の違いで悩まされます。IEを含めて標準モードで起動するように作成すること。　これが、中央配置の基本です。 ★HTMLは文書構造だけを記述します。デザインに関わるものは、id、class名を含めて一切書かないようにします。　　

本文

　スタイルシートは html,body{margin:0;padding:0;}/* ページの余白を消しておく */ div.header, div.section, div.footer{ width:90%;/* 幅を指定 */ min-width:480px;max-width:950px;/* スマホ用に480pxまで自在に伸縮 */ margin:0 auto;/* 上下は0,左右は自動で中央配置 */ } /* ここまでがheader,section,footerの中央配置 */ /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ div.header h1{ text-align:center;/* ヘッダの見出しは中央配置 */ }/* ページタイトルの中央配置 */ /* 調整 */ div.section{ min-height:400px;/* 本文の最小高さ */ position:relative; } #contentTable{ height:100%; width:180px; position:absolute; left:0;top:0; } h1,h2,h3,p{margin:0;line-height:1.6em;}/* ブロック要素の上下マージンを消す */ /* 分かりやすくするために色をつける */ body{background-color:gray;} div.section{background-color:white;} div.header{background-color:yellow;} div.footer{background-color:aqua;} #contentTable{background-color:fuchsia;} 　これだけ、スタイルシートを見るだけで、どのようにデザインしてあるか、わかると思います。class名はそのようにつけます。　ビルダーは、互換性のあるページを作るのは苦手です。テンプレートをそのまま使わない場合は、断然テキストエディタのほうが楽でしょう。HTMLやCSSを良く知らないと、ビルダーを使って自由にデザインするのは難しいですね。　サンプル全体です。 ★タブは＿に置換してあります。戻すこと ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATAタグで、検証済みです。 ★幅はリキッドにしてあるのでスマホでもワイドディスプレイでも中央に!! ★HTMLには文書構造しか書いてないのでメンテナンスもデザインも楽になります。＿＿サンプル＿＿＿＿＿

＿＿

本文

＿＿

＿＿＿

ホームページビルダー16 ページセンター表示

No.1です。

センター表示というのは、ディスプレイの中央ということでしょうか？

この回答への補足

ビルダー使うとややこしくなるので・・

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

ホームページビルダー16　ページセンター表示