以下の画面をYAHOOのように、中央表示するにはどうしたらよろいしいのですか?
http://www.medi-bridges.com/
具体的な操作方法やコピーする記述をお教え頂ければ助かります。
何卒よろしくお願い申し上げます。
そのページを全てホームページビルダーにコピペして実際に操作してみました。
レイアウト枠が4か所に分割されていて、それぞれが左寄りに設定されている為、ページ上で左寄りに表示されているのだと思われます。
各部分は「レイアウト枠」内で「中央表示」になっているのでレイアウト枠自体削除すれば解決します。
ただし、レイアウト枠を削除する前に画像、文章を救助と言うか切り取りしておかないとレイアウト枠と一緒に消えてしまいます。
1番上の画像部分の捜査
画像を選択し切り取る。
表示→編集ページ情報→レイアウト枠一覧→1番上のレイアウト枠を削除
画像を任意の場所に張り付ける
2番目の各サイトへのリンク部分
各サイトへのリンク部分すべてを選択(右クリックしたまま黒く反転させる)して切り取る。
表示→編集ページ情報→レイアウト枠一覧→1番上のレイアウト枠を削除
(最初のは消えているので1番上になっている)
以下繰り返し…
1番下の会社概要の部分は、レイアウト枠自体のバックに色を指定しているので、別にパックを作成する必要がある。
1列1行の表を挿入し、パックの色を指定、大きさを調整…
上下の表示場所は、Enterの数で調整する。
これで画面中央に表示されるように変更されると思います。
上記方法でとても上手くいきました。
誠にありがとうございました。
ソースまで拝見させていただきました。
ちょっと、記述がスタイルシートを使用していないので、簡単にできるかどうか分からないのですが、
<BODY background="wallppr001.gif" style="color : white;background-color : #ffffff;">
↑
<BODY background="wallppr001.gif" style="color : white;background-color : #ffffff;margin-right: auto;margin-left: auto;">
としてみてはいかがでしょうか?
通常センターにする場合は、
css使う場合なのですが、
body{
margin-right: auto;
margin-left: auto;
}
をいれると中央に寄りますよ。
今回のHTML文では、上記の方法で行っても変更されませんでした。
コメント欄のkn1967さんがおっしゃるとおり、商用レベルのサイトを製作する場合にはプロユースのソフトウェアが製作の現場では必須になっています。
デファクトスタンダードといわれているのが、AdobeのDreamweaverです。
そこで当方が所持しているDreamweaverで中央寄せレイアウトのテンプレートを作ってみました。
右クリック>ソースを表示でHTMLソースが確認できますのでご自由にお使いください。
(著作権は当方にありますが、カンパウェアとさせていただきます。)
HTMLテンプレート
http://blog-imgs-32.fc2.com/k/e/n/kent0608/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>テンプレート</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <!--ここからヘッダー--> <div id="header">ここに社名ロゴやトップイメージを挿入</div> <!--ここからグローバルナビゲーション--> <div id="g_navi"> <ul> <li><a href="#">トップ</a></li> <li><a href="#">事業内容</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">IR情報</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> <!--ここからメインコンテンツ--> <div id="main"> ここにメインコンテンツを書いてください </div> <!--ここからフッター--> <div id="footer"> <p>Copyright (C) 2009 kent0608 All Rights Reserved.</p> <p>このテンプレートは<a href="https://www.hatena.ne.jp/sendpoint?name=kent0608">カンパウェア</a>です。</p> </div> </div> </body> </html>
CSSファイル
http://blog-imgs-32.fc2.com/k/e/n/kent0608/style.css
@charset "utf-8"; * { margin: 0px; padding: 0px; } body { background-color: #CCCCCC; } #container { height: 100%; width: 950px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } #header { height: 100px; background-color: #999999; padding: 10px; } #g_navi { float: left; width: 100%; background-color: #EEEEEE; } #g_navi li { list-style-type: none; float: left; width: 120px; text-align: center; background-color: #EEEEEE; padding: 5px; } #g_navi a { display: block; height: auto; width: auto; } #main { clear: both; padding: 20px; height: 500px; } #footer { clear: both; background-color: #999999; } #footer p { padding: 5px; text-align: center; }
なお、このテンプレートを理解するには、基本的なHTML構文の理解、CSSの理解が必須です。
下記に初心者の方向けの解説サイトのリンクを張っておきますのでご覧下さい。
また、DreamweaverはAdobeから30日体験版が利用可能となっています。
一度体験してみてください。
Adobeからビデオチュートリアルも提供されています。
http://www.adobe.com/jp/designcenter/video_workshop/
合わせてご覧になってください。
本当にご丁寧な解説ありがとうございます。
今のフォームにそって中央表示したいので、今回は”onihsan ”さんの方法で行って上手くいきました。
誠にありがとうございました。
上記の操作を行いましたが、何も変化がございません。
ちなみに、モードは「標準モード」を使用しております。
誠に申し訳ございませんが、HTML文を一度確認頂き、これで良いか、またこれをどのように直せば中央に表記されるのかお教え頂ければ幸いです。
すいませんが、何卒よろしくお願い申し上げます。