- ベストアンサー
ホームページビルダー16でページセンター表示する方法
- ホームページビルダー16でページをセンター表示する方法についてご質問です。
- 試しにやってみた結果を共有します。HTMLのメタ情報とCSSを使用して、ページをセンター表示する方法を説明します。
- 具体的な手順は以下の通りです。まず、HTMLのメタ情報の中にContent-TypeとContent-Style-Typeを追加します。次に、CSSのbody要素にtext-align: center;とmargin-left: auto; margin-right: auto;のプロパティを設定します。これにより、ページがセンターに表示されます。
- -_0_-
- お礼率16% (54/334)
- ホームページ作成ソフト
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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は誰でも内容を追加したり変更できるくらい簡単です。もちろん、検索エンジンも内容を正確に理解できるでしょう。
その他の回答 (2)
- Z31
- ベストアンサー率37% (735/1957)
センター表示というのは、ディスプレイの中央ということでしょうか？ どのサイズのディスプレイでも中央表示にするには「表」を使います。 次のサイトを参考にしてください。 http://www-06.ibm.com/jp/domino01/swhc/esupport.nsf/all/hpb1037
補足
表は確かに便利ですが、レイヤーの様な重ね表示ができないのが問題です。 そのままでは味気のない短調なサイトになります。 ここがクリア出来ればいいのですが。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ビルダー使うとややこしくなるので・・ 最初の<doctype>は、必ず次のいずれかにします。ビルダーの初期設定で変更できます。 HTML4.01strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 本来は↑で書くべき!! 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 HTML4.01transitinal ビルダーはtransitinalだけど、こちらの宣言に書き換える。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTMLにすると、IE6は互換モードになってしまうので以下は使わないほうがよい。 XHTML1.0strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML1.0transitinal <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ★IEが互換モードで起動すると、他のブラウザとの表示の違いで悩まされます。IEを含めて標準モードで起動するように作成すること。 これが、中央配置の基本です。 ★HTMLは文書構造だけを記述します。デザインに関わるものは、id、class名を含めて一切書かないようにします。 <body> <div class="header"> <h1><img src="logo11.gif" width="86" height="37" alt="ページタイトル"></h1> </div> <div class="section"> <h2>本文</h2> <div id="contentTable"> <h3>目次</h3> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> スタイルシートは 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には文書構造しか書いてないのでメンテナンスもデザインも楽になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- 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;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1><img src="logo11.gif" width="86" height="37" alt="ページタイトル"></h1> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<div id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div></body> </html>
補足
回答ありがとうございます。 CSSやXHTMLの技術的な話は正直そこまでに至る基本から勉強しないとわからないです。 ビルダーも16になりもう少し使えるかと思いましたが、まだまだGUIの機能がダメダメですな。
お礼
回答ありがとうございます。 取り敢えず表メインでデザインしました。 今後GUIでさらに機械的に最適化されるソフトが出ることを期待しておきます。