この様なHPを効率よく更新させる方法はどのようにしたらよいでしょうか？

質問

以前画像のようなHPを作成しました。HPビルダーを使用しております。
ページ数は約30P、HTMLのみで作成しました。
更新を考えずに作ったもので、色々と不都合があるために
1から作り直そうかと思っています。

約30Pあるのですが、今考えてみると「コンテンツ」部分以外は全てのページ共通だったのですが、制作の段階では何も考えず、
全てコピー→新規ページに貼り付け→コンテンツ部分の書き換え
といった具合で作ってしまいました。

「フレームを使えば良い」という事も知ったのですが、
調べてみると「フレームはこれからは使わないほうが無難」
という記事や「スタイルシートの疑似フレームを使ったほうが良いが
ブラウザによってはずれが生じる」等といった記事も目にしたもので
これからどのように、どうやってHPを作り直そうか迷っています。

要望としましては・・
1、ヘッダー、左メニュー、フッターは各ページ共通なので
更新する際に1か所（例えばindexページ）を書き換えると全ての
ページに反映される様にしたい。

2、1が出来るとすればどのような手法、スタイルシートでのレイアウトが
良いのか、もしくはフレーム等を使ったほうが良いのかをお教えいただきたいです。

3、すみません。。スタイルシートって言葉はぼんやり理解しておりますが、まだどうやって使うかもよく理解できておりません。参考URL等ございましたらお教えください。

お詳しい方がいらっしゃいましたらどうかご教授下さいますようお願い申し上げます。

回答No.1

LOHA · ベストアンサー

HTMLファイルには文章や構造を書き、スタイルシートのほうでデザインをする、というのが一応正当なサイト制作のモットーとなっています。
そのためフレームやテーブルによる整形は、HTMLファイルの方でデザインをすることになるため、なるべく避けた方が良いというわけです。
ですが、結局は出来てなんぼですので、サイトの構成に合わせてやりやすい方法を選択するのが一番だと思います。

ちなみにフレームを使うことの欠点は、検索でヒットしたときに、たとえばメニューのフレームが表示されなかったりする可能性があることです。同じページ内でもHTMLが複数あるので、そういうことがしばしば起ります。
また、画像のようなサイトを作るのであればインラインフレームを多用することになりそうですので個人的には微妙です。

また、tableタグを使って整形すれば画像のようなサイトも作れますが、tableタグを多く利用することになりソースが見にくくなるのと、SEO(検索)対策的にはよくないです。でも、一つの方法ではあるでしょう。

個人的には画像のようなサイトはスタイルシートを使うのが一番スマートだと思います。スタイルシートについては
http://www.stylish-style.com/index.html
のサイトが入門としては非常にお勧めです。リファレンスは
http://www.htmq.com/style/index.shtml
がシンプルで使いやすいです

ただし、スタイルシートを使うとなると、ＨＰビルダーで楽々作る、というのとは違い、地道に自分でソースを書いていくことになるでしょうし、スタイルシートを使いこなすのには少々時間がかかります。また、工夫をしないとブラウザにより見栄えが変わるのですが(ブラウザにより解釈が違うため)、これが極めて厄介です。
そのため、今すぐ作りたいのであればtableを使った方が良いかもしれません。

それと、
>1、ヘッダー、左メニュー、フッターは各ページ共通なので
>更新する際に1か所（例えばindexページ）を書き換えると全ての
>ページに反映される様にしたい。
についてはスタイルシートの場合は変更したソースの部分は書き換える必要があると思います。
フレームだったら一発ですので、メニューを頻繁に増やしたり減らしたりするのであれば、メニューの部分だけフレームを使う、などの工夫をするといいかもしれません。

長くなりましたが以上です。
参考になったら幸いです。

お礼

とても丁寧にご説明いただき誠にありがとうございます。
＞tableタグを多く利用することになりソースが見にくくなる。
現在のページはtableの入れ子のまたその入れ子といった具合で
何がどこだか修正が困難な状況です。
更新を全く頭に入れておりませんでした。

頂いたURLを参考にレイアウトをスタイルシートで頑張ってみようかと
思っています。

本当に丁寧にわかりやすご説明頂いてありがとうございました。
またの機会がありましたらよろしくお願いいたします。

回答No.4

chord_80th

1、ヘッダー、左メニュー、フッターは各ページ共通なので
更新する際に1か所（例えばindexページ）を書き換えると全ての
ページに反映される様にしたい。

＞僕もメニューの変更などがあった際、1つの変更で全ページに反映させたいと思ってました。
そんな難しくなりそうな事をするより、このフォルダ内のhtmlファイルを一括で複数行を変更するソフトがあれば…と思い、探した結果今はこれを使っています。
無料で便利ですよ。
http://www.vector.co.jp/soft/win95/util/se359701.html

ついでにスタイルシートについてのサイト
http://www.html-css.com

健闘を祈ります。

参考URL：

http://www.html-css.com

回答No.3

rukuku

始めまして

１，２についてです。
フレームは、サーチエンジンを使っての訪問者には表示されないことがあります（フレームの中に直接飛んでくるため）。そのため、フレームを表示させるように、片隅にリンクを張っておけばいいと思います。

または、ＰＨＰを使う方法もあります。
共通部分を外部のＰＨＰに書いて、ページの中から呼び出すことができます。共通部分の変更は外部のＰＨＰを変更するだけで、すべてのページに変更が反映されます。
サーバーによっては使用できないこともありますのでお使いのサーバーの仕様を確認してください。

回答No.2

ORUKA1951

いくつか気付きを。
＞今考えてみると「コンテンツ」部分以外は全てのページ共通だったのですが、
　これはおかしいですよね。特にヘッダ部が同一というのは検索エンジンにSPAMと判断されかねません。
　文書構造中、ヘッダ部にはそのページの見出しや要約(Summary,Abustract)があるほうがよいので、必ずページごとに異なるはずです。
　図では、ページのメニューと書かれていますがこれは構造上は見出しの後に登場するはず。

　フッターには多くの場合、その文書の情報(改定履歴とか著者とか・・)のように、本文に関連する情報やサイト内ナビゲーション(いわゆるパンくずリスト)をおくことが多いと思いますから、できれば本文・コンテントの最終部分におくのが普通だと思います。・・スクリーンユーザーエージェント(いわゆるパソコンなど)の場合は、パンくずリストはデザイン上は最上部に表示してもソース的にはコンテンツの最後。また、図のように配置すると左データが長くコンテンツが少ないときは、スクロールしないと見れなくなります。・・コンテントが長い分には問題ない。
　なによりも、CSSで、floatなりrelativeでメニューを配置したときの回り込み解除が大変や使いになります。
　フッターをコンテント(単数形ですよ)の最下部にコンテントの幅で配置すると、メニューがfloatはむろん、fixさせても問題ないかと思います。

　実際に、各ページですべて同じものは実質的にはないはずというか、あってはならない、最小限にとどめるものでしょう。だとすると、
＞1、ヘッダー、左メニュー、フッターは各ページ共通なので
　はあまり意味のない条件だと思います。

　３０ページそこらなら、基本的な制作方法は、今までにされてこられた
テンプレート作成
　→コピー
　　→新規ページに貼り付け
　　　→内容の書き換え
という手順でよいと思います。
　ツールを使わず、HTMLには文書構造だけを記述し、デザインはスタイルシートで行うにら、テキストエディタで十分作成てきますから、意外と簡単ですよ。

現実的な記述の為の XHTML1.1 入門 -- 碧天蒼夜 ( http://deztec.jp/x/02/xhtml/index.html )
　のサイトに簡単な説明と、
　　チュートリアルと CSS の配布 -- 碧天蒼夜 ( http://deztec.jp/x/02/xhtml/distribution.html )
　　HTML 文書のひな型 ( http://deztec.jp/x/02/xhtml/distribution.html )
などがあります。

スタイルシートとCSSの関係は、まず
はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
とかで、実際に作業してみてください。習うより慣れろです。

例として、私が良く使用するデザインは添付画像のようなものです。
HTMLは、携帯電話でデザインなしで見てもよいようにシンプルですが、ディスプレイでの利用には、スタイルシートで利用しやすいようにデザインしています。
　class名を見れば、何を含んでいるかお分かりになると思いますが、すべてのページで同じものになるわけないですよね。

　将来的に量が増えるテーマとかでしたら、CGI等を使って動的に作成するととても楽になります。新聞社のサイトなどがその代表的なもので
　http:/ /hoge.com/news/20090220_abc.html
　というページがあったとしても、それは20090220_abc.htmlというHTMLが存在しているわけではなく、記事と画像へのリンクくらいを記述したデータ（たとえば/database/20090220_abc.txt）があって、それをhttp:/ /hoge.com/index.cgi というCGIで処理しているだけかもしれない。

お礼

とても丁寧にご説明いただき誠にありがとうございます。
おはずかしいです・・・。「ヘッダー」や「フッター」の意味を
間違えて理解しておりました。
おっしゃる通り、ヘッダーやフッターではなくて添付いただきました
画像のように「見出しと要約」や「目次」、「ページ情報」が
各ページ同じデザインという意味でした。
ご迷惑をおかけいたしました。

＞実際に作業してみてください。習うより慣れろです。
まさにおっしゃるとおりですね。
頂きましたURL等拝見しながら理解を深めたいと思います。
本当に丁寧にご説明いただきありがとうございました。