ホームページビルダーを使用しております。


以下の画面をYAHOOのように、中央表示するにはどうしたらよろいしいのですか?

http://www.medi-bridges.com/


具体的な操作方法やコピーする記述をお教え頂ければ助かります。
何卒よろしくお願い申し上げます。

回答の条件
  • 1人3回まで
  • 登録:2009/02/01 21:51:54
  • 終了:2009/02/03 19:17:19

回答(4件)

id:hkwgch No.1

hkwgch回答回数252ベストアンサー獲得回数222009/02/01 22:34:17

 (1)中央揃えにしたい範囲をマウスで選択する。

 (2)プルダウンメニューから、「書式」>「位置揃え」>「中央揃え」を選ぶ。

これでよろしいのでしょうか?

id:michiojapan

上記の操作を行いましたが、何も変化がございません。

ちなみに、モードは「標準モード」を使用しております。

誠に申し訳ございませんが、HTML文を一度確認頂き、これで良いか、またこれをどのように直せば中央に表記されるのかお教え頂ければ幸いです。

すいませんが、何卒よろしくお願い申し上げます。

2009/02/01 22:46:07
id:onihsan No.2

onihsan回答回数795ベストアンサー獲得回数172009/02/01 23:58:05

ポイント54pt

そのページを全てホームページビルダーにコピペして実際に操作してみました。

レイアウト枠が4か所に分割されていて、それぞれが左寄りに設定されている為、ページ上で左寄りに表示されているのだと思われます。

各部分は「レイアウト枠」内で「中央表示」になっているのでレイアウト枠自体削除すれば解決します。

ただし、レイアウト枠を削除する前に画像、文章を救助と言うか切り取りしておかないとレイアウト枠と一緒に消えてしまいます。

1番上の画像部分の捜査

画像を選択し切り取る。

表示→編集ページ情報→レイアウト枠一覧→1番上のレイアウト枠を削除

画像を任意の場所に張り付ける

2番目の各サイトへのリンク部分

  各サイトへのリンク部分すべてを選択(右クリックしたまま黒く反転させる)して切り取る。

  表示→編集ページ情報→レイアウト枠一覧→1番上のレイアウト枠を削除

(最初のは消えているので1番上になっている)

以下繰り返し…

1番下の会社概要の部分は、レイアウト枠自体のバックに色を指定しているので、別にパックを作成する必要がある。

1列1行の表を挿入し、パックの色を指定、大きさを調整…

上下の表示場所は、Enterの数で調整する。

これで画面中央に表示されるように変更されると思います。

id:michiojapan

上記方法でとても上手くいきました。

誠にありがとうございました。

2009/02/02 17:36:23
id:plateplus No.3

plateplus回答回数1ベストアンサー獲得回数02009/02/02 00:35:22

ソースまで拝見させていただきました。

ちょっと、記述がスタイルシートを使用していないので、簡単にできるかどうか分からないのですが、

<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;

}

をいれると中央に寄りますよ。

id:michiojapan

今回のHTML文では、上記の方法で行っても変更されませんでした。

2009/02/02 17:38:12
id:kent0608 No.4

kent0608回答回数220ベストアンサー獲得回数232009/02/02 02:22:15

ポイント36pt

コメント欄の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の理解が必須です。

下記に初心者の方向けの解説サイトのリンクを張っておきますのでご覧下さい。

ごく簡単なHTMLの説明

CSSレイアウト実践講座

また、DreamweaverはAdobeから30日体験版が利用可能となっています。

Adobe Dreamweaver CS4

一度体験してみてください。

Adobeからビデオチュートリアルも提供されています。

http://www.adobe.com/jp/designcenter/video_workshop/

合わせてご覧になってください。

id:michiojapan

本当にご丁寧な解説ありがとうございます。

今のフォームにそって中央表示したいので、今回は”onihsan ”さんの方法で行って上手くいきました。

誠にありがとうございました。

2009/02/02 17:41:43
  • id:kn1967
    divでブロック分けしてあるのでbodyタグ直後のcenterタグは無意味になります。

    お望みのことを実現するためには、各divブロック毎にサイズを指定して
    さらにポジションも指定するという手間が掛かるため
    同様のサイトから丸写しして1から造りなおしのほうが早いくらいです。

    ただし、そうなるとホームページビルダーではついていけなくなりますので
    それなりの開発ツールが必要になってきて
    それなりの開発ツールを扱うとなると、開発手法から学びなおさねば・・・。
    といったような同道巡りめぐりになります。

    センター寄せにする必要がどの程度あるのかについて再考なさるのが1番だと思います。

    余談になりますが
    同じくセンターよせしているサイトとして楽天などもありますが
    以前は文字サイズ等のブラウザ側の設定でデザインが狂ったりしてました。
    今年に入ってからだと思いますが、今は何と・・・divから
    旧態依然としたtableタグでのデザインに変わったりしてますから・・・。
  • id:michiojapan
    HTMLを変更し、DIVからテーブルを使用するようにしました。
    しかしながら、まだFireFoxで開くと、真ん中のテーブルがおかしく表示されます。

    どうかお助け頂ければと思います。
    何卒よろしくお願い申し上げます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません