Dreamweaverで作ったPHPを中心に表示したい

Question

こんにちは。
プロではないのですが、自力で自分のウェブサイトを作っています。なのでかなり苦戦しています；；

Dreamweaver cs3 の英語版をつかっており（なので余計困難です；；）左固定のフレームを使いました。
左にメニューがあり、右側は写真の作品だけのシンプルな物です。

苦戦しつつなんとかできたのですが、今現在左すみに左のメニューがあり、メインもそれにあわせてあります。私のポータブルMACの画面でみるとサイズはちょうどなんですが、大きい画面などでみるときは中心に表示されるほうがキレイと思いまして、中心にくるように調整したいのでうすが、どうしたらいいのでしょうか。

ちなみに左は固定してあり、メインは下のスクロールで写真を見るようになっています。ちなみに写真のサイズはH４４０pxで、左のメニューもそれに合わせてデザインしてあります。なのでサイト全体（全てのフレームを）centerではなく、上下のmiddleにしたいのです。メインのほうはalign="middle"とすると中心になるのですが、左固定のmenuのほうがmiddleをいれても全く動いてくれませんでした。そうすると、画面上では左固定が左上の隅から始まっていて、メインだけがmiddleにくるといった風になってしまいました。
ということで、今は取り合えずすべてtopにしてるのですが、、


わかりにくい説明ですみません。どなたかアドバイスお願いします。

abril · Accepted Answer

> メニューの（B）のコードをもう一度きちんと確かめたて整理したらなりました。

> ですが、DTD宣言を入れるとTOPにばかりなってしまいました。
> 言われた通りにやってみたのですが、、（二通りともためしてみました、、）どうしてでしょう。

前回の回答でも申し上げました通り、本件で回答させて頂いているサンプルはあくまで（B）（C）共に”XML宣言付の”XTML、になっている場合のみ、IEが後方互換モードになるので上下センタリングが有効になる、と極めて条件を限定したものです。DTD宣言が”それ以外のもの”であるとか、XTMLでもXML宣言がない、という場合には、そのレイアウトが実現される事を保証していません。

「二通りともためしてみました」と仰っているのは、ANo.4で推測したXHTML 1.0 Strict又はTransitional、の事だと思いますが、この宣言だけ入れても、XML宣言が無しのままだとIEが標準準拠モードになりますのでやはり上下センタリングにはなりません。XHTML文書におけるXML宣言とDTD宣言は別物であり、この2つの組み合わせに依って、以前から説明しています通り、IEにおけるレンダリングの挙動は変わります。

繰り返しますが、サンプルと条件が完全に一致しない限り、サンプルと同じ結果は望めないという事です。

> （C）のほうにもDTD宣言はつけずに、WELCOM.HTMLのみにDTD宣言をつけました。（といいいますか、自然にそうなっていました、、：：）

いや、「自然にそう」なる、という状態は有り得ないのです。おそらく、（B）や（C）のテンプレート部分（最終的に、DTD宣言等をはき出すファイル）に相当するPHPを編集しきれていないのだけの事だと思います。適切なファイルを適切に編集すれば、そのあたりのHTMLコードも任意で変更する事は必ずできる筈ですが、質問者様の今の状態ではちょっと難しそうですね…

> 「Webサーバ上にアップした状態」でHTMLソースを確認してみますと、通常のHTMLファイルと同様に<head>や<body>のある構成のソースが出力されていました。

まあそうじゃないとHTMLドキュメントにはなりませんので。でも、（B）や（C）には現在DTD宣言は無い状態になっているのですね。DTD宣言が全くないHTML文書の場合、今度はIEのみならず他のモダン・ブラウザも軒並み後方互換モードに切り替わる為、上下センタリングに関する挙動は実は（IEにおける）サンプルと同じになります。だから、現在の状態で上手くいっている様に見えるのです。
しかし、「DTD宣言のない」HTML文書は有り得ない間違いです。そういうものを書く事はNGなのです。これだけは肝に銘じておいて下さい。
ということで、

> とにかく、しばらくこのデザインのままで大丈夫そうです。

本当は全然「大丈夫」ではないのですが、それを良しとしてこのまま作業を進めるのも、ここで改めて時間をかけて適切なHTML文書をかける様になる方を選ぶのも、当然ですが質問者様の自由（お金を貰ってるプロの方じゃないですからね）ですので、前者を選ばれるのであれば現時点でこれ以上アドバイスする事もなくなりました。できるだけ早い内に基礎をじっくり学ばれる事をお奨めだけはしておきます。

蛇足：
DTD宣言が「システム識別子のないHTML 4.01 Transitional」（下記）だと、質問者様の現状の状態と同じ（モダン・ブラウザ軒並み後方互換モード）になります。でも、（質問者様の現在の状態と思われる）XHTMLだとどのヴァージョンであってもシステム識別子が必須の為、IE以外は後方互換モードにはなりません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
【参考】http://2xup.org/log/2007/07/27-2111

abril · Answer

ANo.1-3です。新たな補足を読みました …うーん、まだちょっと基礎的な部分の理解が不足している様に思われます…。 > 仰る通りにやってみたのですが、まだ中心になりません　；）いえ、現状のソース見たところ、前回のこちらが作成したサンプルと条件が一致していません。条件が一致していなければ、結果が異なっても当然と言えます。 > どこが間違ってるのでしょうか。ご指摘お願いします。まずDTD宣言が完全に間違っていますね。（B）はフレームの中に表示させるファイルですから、それ自身はフレーム構造ではありません。従って、上記の様な"Frameset"仕様のDTD宣言は不適切です。最初に指摘した通り、DTD宣言が実際のファイル内容に相応しいものになっていなければそれだけで不具合を生じます。上記の間違いから推測すると、質問者様のオリジナルのDTD宣言はXHTML 1.0 Strict又はTransitional（XML宣言なし）タイプかと思います（下記のいずれか）。今回の場合、「メニューの（B）が中心にきません。」というのはDTD宣言の違いが関係しております。私が前回提示したサンプルは、XML宣言付のXTML 1.1でした。DOCTYPEスイッチにより、これだと、IEに関しては後方互換モードになりますので、上下に対してセンタリングになります。しかし、XML宣言がないヴァージョンだと、標準準拠モードになり、Firefox等、”より仕様に沿った”レンダリングをするブラウザと同様に、高さの指定に関する解釈が異なってくる為、現状の様なテーブル・コーディングに依存したレイアウト方法では上下の中央揃えというのは望めなくなります。そうなりますと、アドバイスをする観点がまるで変わってくるのですが、失礼ですが質問者様はCSSレイアウトに関してはどれぐらいの知識やスキルをお持ちでしょうか。ある程度、CSSに関して理解をしていないと、上下中央揃えに関するアドバイスは難しいのですが… また、今回のソースを見ると実際にはCSSファイルも既に使用されている様ですので、CSS内のレイアウトに関する指定に依っても結果が変わってきます。そちらの内容も明らかにして頂かないと、的確な原因追及はできないです。ただ、気になるのが、 > （C）は上下中心にくるのですが、と仰っているところです。もし、（C）の方も今回の（B）と同じ仕様（XHTML 1.0 Strict又はTransitional（XML宣言なし））であるなら、（C）もIE上でも上下センタリングにはならない筈だからです。もしかして、（C）の方だけは前回のサンプルと同一条件になっているのでしょうか？前回の【A】【B】【C】のサンプルはいったん、”そのまま”試されてはみたでしょうか？もし試されていないなら、【A】【B】【C】ファイルの方をベースにして（文字コードの部分は最初からUTF-8に変更して頂いてもかまいません）、そこに少しづつ実際の内容（画像やテキスト）を置き換えて行って、徐々に結果を確認してみて下さい。ある時点から、中央揃えにならなくなったとしたら、その時の変更内容が、今回のサンプルと同じにはできなくなる条件、という事になります。その条件の方が、実際の内容として不可欠なものであれば、前回のサンプルは「使えない」という事になりますので、全く別の方向から考えなければなりません。 ※ちなみに前回の【B】にはタイポがありました。IE上では実際の表示に影響はしていない様ですが、間違いである事には変わりないので訂正しておきます。【誤】 ↓ 【正】

【誤】

↓ 【正】 > ウェブデザイナーがphpの方がいいといって作ってくれたのです。理由はわかっていませんでした：：。私のHPは自分の作品のブックのような物で、新しい作品（写真、またはビデオ）ができるたびに自分で更新できるように作ってくれました。理由は、そこに書かれてる通り「HTMLファイルを直接編集しなくても更新がある程度自動化できる様に」という事だと思いますよ、多分… それを使用していて何か問題があったのでしょうか？そのままお使いになった方が随分楽ができる様に思えますが…？ > なので、今回全部やり直したのですが、そのままPHP のベースから作ってしまいました。質問者様が現在PHPに関する知識をお持ちでないのなら、PHPのまま編集する事はちょっと無謀なのでおやめになった方が良いかと思います。 > HTMLのほうがよいのですか。そちらに変換するのは簡単なのですか？よいかどうかは、何とも。前述した通り、PHPによる更新システムがあるのであればそちらを使い続けた方が更新の手間が省けるというメリットがあります。一方、自分で色々と（レイアウトの一新など）カスタマイズしたいのであれば、HTMLファイル化して手動で地道に更新する方が、いきなりPHPの編集に挑戦するよりも遙かに敷居が低いです。どちらを取るか、という事ですね。変換が簡単かどうか、という事ですが、前回も書きました通り、PHPは「動的にHTMLデータを生成するプログラミング言語」ですので、実際にWebコンテンツとして見る時にはき出されているのはHTMLコードです。ですから、ぶっちゃけた話、ブラウザで表示させたソースを1ファイル毎にHTMLファイルとして保存し、リンク先が"aaa.php"となっているのを"aaa.html"と書き直す（URLにパラメータがセットされている場合は改めて全体の構造を見通しつつリンク先の辻褄が合うようにHTMLファイル名を付けて行く）という地道な作業を繰り返せば誰でもHTML化はできます。量が多ければ根気のいる作業ではありますが。

abril · Answer

間を空けない連続投稿ができないシステムになっていますので、遅くなりましたが「その2」です。以下が、検証してみたサンプルです。 ---------------------------------------------------------------------- 【A】"welcom.html" ---------------------------------------------------------------------- ウェルカム <body> <p>代替内容</p> </body> ---------------------------------------------------------------------- 【B】"menu.html" ---------------------------------------------------------------------- 左メニュー

---------------------------------------------------------------------- 【C】"main.html" ---------------------------------------------------------------------- 右メイン

実際の写真など…

---------------------------------------------------------------------- 質問者様がCSSを使用していればそちらの指定との兼ね合い影響してきますが、おそらくこのテーブル・コーディングの感じだと使用されていらっしゃらない様に思いますのでその点は考慮していません。 ※レイアウトの為にtableを使用する方法は推奨されませんが、一足飛びに色々言っても混乱の元ですから、ひとまずは質問者様の現在のソースを大きく覆さないという前提でお話をさせて頂いています。とりあえず、上記のサンプルであれば、IE6に限れば少なくとも左右フレームのコンテンツはウィンドウサイズに関係なく実際の内容部分が常に天地に対してセンタリングされた状態になります。左右のレイアウトの大枠の構成が基本的には同じになっていますので。上記のサンプルを一度試してみて実際のイメージを確認してみて頂けますか？細かいご要望や解釈の違いがあれば、その後で補足して下さい。下記は、ご質問のその他の部分に対する補足的回答です。 > ここではにあるtopをmiddleに変えると中心に表示されます。そうなりますね。上記のサンプルの様に、天地100%のtableが親要素としてあって（）、そのセルに対してセル内のテキストやイメージなどの内容の垂直方向の揃え方を中央揃えに指定（

）した上で、高さを544pxに決め打ちしたtableを子要素として配置（）している事になるからです。 ※ただし、元々このtdのvalign属性の初期値は"middle"ですので、CSSでそこを他の属性に変えていなければ何も指定しなくても中央揃えになる筈ですが… その、質問者様が既に右フレームのコンテンツ【C】に対して成されていたコーディングの基本的な部分を、そっくり【B】にも当てはめてみただけのものが上記のサンプルです。 > 以下、左のメーニューのコード（の一部）です。 >

（省略） > ここで、Tableにvalign="middle" を入れてもプレビューでみても中心になってくれません。これも当然ですね。valign属性は、tdには適用されますが、tableは適用対象となっていませんので無効です。これらに限らず、各属性はそれぞれ適用対象が決まっていますのでまずはそういった決まり事（文法）をよく読まれることですね。 > 次のtdはイメージ（ロゴ）なので、そこに入れたらへんですよね。 > 変、というより、そこは元々height="83"で高さを83pxに指定されたセルの中に、高さ83pxのロゴを入れてますので、器と中味の高さが全く同じなでセルの中に余白ができないわけですから、そのセルに対してvalign="middle"としようがvalign="top"としようが見た目の配置は変化しません。 > あと、不思議に思っているんですが、メニューにはもないんですけど、おかしいですか。メニューのコンテンツ【B】が、サンプルの様に普通のHTMLファイルだったら、その様な構成はあり得ません。しかし、質問者様のお手元にあるそのメニュー用のファイルは実際にはPHPファイルなわけですよね（こちらを仮に【B'】とします）。であれば、その【B'】から更に外部のPHPファイルをインクルードする様な構成になっていれば、やといった共通のテンプレート（可変ではなく常に一定の固定データを表示する）部分を外部ファイル【B2'】の方にまとめて置く事で、【B'】からは取り除かれている可能性もあり得ます。【B2'】＋【B'】をくっつけて出力したHTMLソースが結果として【B】と同一になる、という様な仕組みです。 Webサーバ上にアップした時に、左フレームのコンテンツが： > （サイトでは問題なく表示されていますが、、、）右のページのようにhead, bodyをいれるとうえに余白や変な文字がでてちゃんと表示されないのです。という事であれば、やはり他にもPHPファイルがあって上記の様な構成になっていると思われますね。一度、「Webサーバ上にアップした状態」での質問者様のオリジナルの左フレーム内のHTMLソースを確認してみて下さい。その状態では、通常のHTMLファイルと同様にやのある構成のソースが出力されている筈ですので。

abril · Answer

ANo.1です。

> 私PHPとHTLMの違いもあまりわかっていませんでした。今ネットでみましたが、まだよくわかりません、、。

そうですか…文面から察するにまだ初心者の方の様に見受けられますが、なぜいきなりPHPで始められたのでしょうか？
通常、初心者の方はまず普通のHTMLファイルの作成から入られる様に思うのですが。

単純に言えば、HTMLは単なるマークアップ言語ですので、ルールに沿った記述をしたHTMLファイルはブラウザさえあれば表示される様になっています。つまり、Webサーバーにアップしなくてもローカル（ご自分のPC上）でも「作成したそのままの（Dreamweaverのデザイン・ビューで表示されるのとほぼ同じ）内容」がブラウザに表示されます。

が、PHPは「HTML埋め込み型のサーバサイド・スクリプト言語」であり、動的にHTMLデータを生成するプログラミング言語ですので、通常は（PHPがインストールされている環境の）Webサーバ上にアップしないと動きません（ローカル環境でもPHPをインストールして動かせる様にする事もできますが、意図的にお膳立てをしない限りその様な対応はされていません。）。

ですのでHTMLとPHPでは全然性質も作成の難易度も異なります。元がプログラマー系の方であればその限りではないかもしれませんが、Webコンテンツ（サイト）作るにあたって、静的なHTML作成を学ばずいきなりPHPによる動的なHTML作成から手を付けられる方はまずいらっしゃらないかと…もしかして、既に他者が作られたコンテンツがあってそれをカスタマイズしようとされているのでしょうか？

> でも私はテキストと写真だけなのでhtmlでもいいんでしょうか。

如何せん、上記で申し上げた様に現在こういう作成の仕方をしている経過がわからないので、それに対しては何ともお答えはできかねます。
「テキストと写真だけ」のコンテンツであっても、例えばそれが膨大な量であり且つ更新頻度が高く、いちいち手動で新規コンテンツを作ってリンクさせて…というのが手間暇かかって大変だ、という状況であれば、PHPで所謂CMSの様な、管理システムを採用している事も充分「有り」だからです。
よって、この点に関するアドバイスはご事情を伺うまでは控えさせて頂きます。

本題に戻ります。
ANo.1への補足とお礼で現状の大体の構造は把握できた様に思います。

> DTD宣言とは何でしょうか？すみません

HTMLファイルの先頭で宣言されていなければならない<!DOCTYPE～>という記述です。その(X)HTMLファイルがどの様なDTD（定義）に基づいて記述されるかを示すもので、必須です。
【参考】http://www.kanzaki.com/docs/html/doctype.html
これから関連付ける【A】【B】【C】の3ファイルそれぞれの先頭にどの様な記述がされているかを確認して補足して下さい。どの文書型を定義するかによって、CSSの解釈等、表示結果の差に関わってきますので、この情報は非常に重要です。

> まずサイトはINDEX.PHPから始まってそれをクリックするとBLANKで新たにページが開き、

ということであればとりあえず"index.php"は本件のご質問の内容とは無関係ですので、無視しておきます。

> DWのフレームセットから作りました。そのページだけHTML（WELCOME.HTMLと名付けました）で保存してあり、

ではこの"welcom.html"が
【A】フレーム自体のHTMLファイル、ですね。

> 左固定のメニューと右側のメインフレームは PHPで、

ここが何故PHPファイルになっているのかは後ほど補足して頂くとして、PHPファイルであっても出力結果は通常のHTMLのソースとなりますので、PHPファイルの中味ではなく、Webサーバー上で表示されている時のソースを基準に考えて下さい。今回はレイアウトに関するトラブルですので。

> メニューの項目を選ぶと右側だけがかわります。なので上に表示されているアドレスは最初のWELCOME.HTMLのままになっています。

当然ですね。それこそがフレームの仕様ですから。

> 各ページをHTMLで保存したのですが、結局右フレームだけ変わるのでそれは必要ないと言うの事なのでしょうか。

そうです。でなければフレームを仕様する意味はありません。今回の場合であれば、フレーム自体は"welcom.html"のみあれば良いのです。
フレームというのは、その名の通り「枠組」だけを定めるものであり、実際にその中に表示するコンテンツは外部ファイルになるわけです。
左フレームには「メニュー」に相当するHTML（実際にはPHPファイルの様ですが、前述しました通り話がややこしくなるので、今回はPHPではき出されたHTMLファイルとして扱う事にします）ファイルが常に表示されています。
これを、仮に"menu.html"とします。
【B】左フレームに表示するHTMLファイル、です。

【B】の各メニュー・リンク部分には、右フレームに表示されるべきファイルがリンク先として記述されており、且つ、「右フレームに表示させる」というターゲット指定（<a href="main01.html" target="main">メイン01</a>、といった感じで）がされている筈です。このターゲットが指定されていないと、右側のメイン部分に表示させる事ができず、左のメニューのコンテンツがメインのコンテンツに入れ替わってしまう為、フレームの意味を成さなくなりますので。つまり、右フレームに表示されるコンテンツは左メニューからのリンクで次々とファイル自体が差し替わって行きますので、右フレーム用コンテンツとして用意されているHTMLファイルは【A】【B】と違って複数存在する事になります。
右フレームに初期状態で表示されているファイルを仮に"main.html"とします。
【C】右フレームに表示するHTMLファイル、です。"main01.html""main02.html"…という様に続くものと考えます。

で、【A】【B】【C】それぞれのファイルの文書タイプですが【A】は当然Framesetとして、【B】【C】は謎なのですが【B】のソース中で空要素imgを<img～ />と閉じてあるので、XHTMLの何れかのタイプ、と判断させて頂きました。結果として検証用のファイルについては、これまで頂いた情報を元に以下の様に仮定させて頂いております。

【A】"welcom.html"
・HTML4.01 Frameset
・左右フレーム、左右ともスクロールバーは自動表示
・左フレームの幅は244px以上（ここではスクロールバーが表示される場合の事を考え、仮に265pxとしてあります）
・右フレームの幅は成り行き

【B】"menu.html"
・XML宣言付 XHTML1.1
・実際のメニュー部分のtableの領域はW244px×H540px
・CSSは使用していない？

【C】"main.html"
・XML宣言付 XHTML1.1
・実際のメイン（写真等）部分のtableの領域はW成り行き×H540px
・CSSは使用していない？

かなり長くなってしまったので、失礼ながら分割投稿させて頂きます。「その2」に続きます。

abril · Answer

まず、「Dreamweaverで作ったPHPを中心に表示したい」というタイトルなのですが、本文の内容からしてPHPのスクリプトについてのご質問ではなく、普通に手作業で作成したHTMLファイルについてのご質問ですよね…？以下はその前提で話をしています。

> 左固定のフレームを使いました。左にメニューがあり、右側は写真の作品だけのシンプルな物です。

ここで仰っている「フレーム」とは実際にframe要素を使用して作ったコンテンツ（左と右はそれぞれ別個の独立したHTMLファイル）の事ですよね？

> 左すみに左のメニューがあり、メインもそれにあわせてあります。（省略）中心にくるように調整したいのでうすが、どうしたらいいのでしょうか。
（省略）
> サイト全体（全てのフレームを）centerではなく、上下のmiddleにしたいのです。

という事は、ご希望は、その左右フレームのコンテンツそれぞれがウィンドウの表示領域に対して常に垂直方向に対してセンタリング（上下に均等に余白）されて欲しい、という理解で宜しいでしょうか？
ただ、続く質問文を読むと今ひとつ質問者様の実際のコンテンツのイメージが確定できないのですが。

> 左は固定してあり、メインは下のスクロールで写真を見るようになっています。

「下のスクロール」とはどういう意味でしょうか？メインの幅は固定ではなく成り行きで、しかも上下ではなく左右にスクロールが発生するぐらい幅を取る内容のコンテンツなのでしょうか？「下のスクロール」というのを字面通り受け取れば、ウィンドウの右側ではなく下側に出るスクロールバーというのは水平方向のスクロールですので…

> ちなみに写真のサイズはH４４０pxで、左のメニューもそれに合わせてデザインしてあります。

「左のメニューもそれに合わせて」とはどういう意味でしょうか？左フレームのコンテンツの高さをH440pxに固定してある、という事でしょうか？

> メインのほうはalign= "middle"とすると中心になるのですが、

この「align="middle"」という属性はどの要素に対して入れていますか？tableのセルに対してですか？左右それぞれのコンテンツは所謂テーブル・コーディングですか？

> 左固定のmenuのほうがmiddleをいれても全く動いてくれませんでした。

同様にこちらも実際のマークアップはどの様になっているのでしょう？

> 画面上では左固定が左上の隅から始まっていて、メインだけがmiddleにくるといった風になってしまいました。

もしも、左右のフレーム内のコンテンツが同様の作り方をしているのであれば、右が「middleにくる」のであれば、左も同様のやり方で「middleをいれても全く動いてくれ」ないという状態にはならないと思うのですが。

…という事で質問者様自ら「わかりにくい」仰られている通り、実情を想定するのがちょっと困難です。実際のソース（全体の構成を掴める程度の抜粋で結構です）を公開して下さい。

・フレーム自体のHTMLファイルのソース（DTD宣言を含む。以下同様）
・左フレームに表示するHTMLファイルのソース
・右フレームに表示するHTMLファイルのソース
・CSSを使っているなら左右フレームそれぞれに適用しているソース

Dreamweaverで作ったPHPを中心に表示したい

> メニューの（B）のコードをもう一度きちんと確かめたて整理したらなりました。

ANo.1-3です。

間を空けない連続投稿ができないシステムになっていますので、遅くなりましたが「その2」です。

この回答への補足

ANo.1です。

この回答への補足

この回答への補足

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

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

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

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