![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
以前画像のようなHPを作成しました。HPビルダーを使用しております。
ページ数は約30P、HTMLのみで作成しました。
更新を考えずに作ったもので、色々と不都合があるために
1から作り直そうかと思っています。
約30Pあるのですが、今考えてみると「コンテンツ」部分以外は全てのページ共通だったのですが、制作の段階では何も考えず、
全てコピー→新規ページに貼り付け→コンテンツ部分の書き換え
といった具合で作ってしまいました。
「フレームを使えば良い」という事も知ったのですが、
調べてみると「フレームはこれからは使わないほうが無難」
という記事や「スタイルシートの疑似フレームを使ったほうが良いが
ブラウザによってはずれが生じる」等といった記事も目にしたもので
これからどのように、どうやってHPを作り直そうか迷っています。
要望としましては・・
1、ヘッダー、左メニュー、フッターは各ページ共通なので
更新する際に1か所(例えばindexページ)を書き換えると全ての
ページに反映される様にしたい。
2、1が出来るとすればどのような手法、スタイルシートでのレイアウトが
良いのか、もしくはフレーム等を使ったほうが良いのかをお教えいただきたいです。
3、すみません。。スタイルシートって言葉はぼんやり理解しておりますが、まだどうやって使うかもよく理解できておりません。参考URL等ございましたらお教えください。
お詳しい方がいらっしゃいましたらどうかご教授下さいますようお願い申し上げます。
![「この様なHPを効率よく更新させる方法はど」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/c/18370213_5497d6e273a33/M.jpg)
No.1ベストアンサー
- 回答日時:
HTMLファイルには文章や構造を書き、スタイルシートのほうでデザインをする、というのが一応正当なサイト制作のモットーとなっています。
そのためフレームやテーブルによる整形は、HTMLファイルの方でデザインをすることになるため、なるべく避けた方が良いというわけです。
ですが、結局は出来てなんぼですので、サイトの構成に合わせてやりやすい方法を選択するのが一番だと思います。
ちなみにフレームを使うことの欠点は、検索でヒットしたときに、たとえばメニューのフレームが表示されなかったりする可能性があることです。同じページ内でもHTMLが複数あるので、そういうことがしばしば起ります。
また、画像のようなサイトを作るのであればインラインフレームを多用することになりそうですので個人的には微妙です。
また、tableタグを使って整形すれば画像のようなサイトも作れますが、tableタグを多く利用することになりソースが見にくくなるのと、SEO(検索)対策的にはよくないです。でも、一つの方法ではあるでしょう。
個人的には画像のようなサイトはスタイルシートを使うのが一番スマートだと思います。スタイルシートについては
http://www.stylish-style.com/index.html
のサイトが入門としては非常にお勧めです。リファレンスは
http://www.htmq.com/style/index.shtml
がシンプルで使いやすいです
ただし、スタイルシートを使うとなると、HPビルダーで楽々作る、というのとは違い、地道に自分でソースを書いていくことになるでしょうし、スタイルシートを使いこなすのには少々時間がかかります。また、工夫をしないとブラウザにより見栄えが変わるのですが(ブラウザにより解釈が違うため)、これが極めて厄介です。
そのため、今すぐ作りたいのであればtableを使った方が良いかもしれません。
それと、
>1、ヘッダー、左メニュー、フッターは各ページ共通なので
>更新する際に1か所(例えばindexページ)を書き換えると全ての
>ページに反映される様にしたい。
についてはスタイルシートの場合は変更したソースの部分は書き換える必要があると思います。
フレームだったら一発ですので、メニューを頻繁に増やしたり減らしたりするのであれば、メニューの部分だけフレームを使う、などの工夫をするといいかもしれません。
長くなりましたが以上です。
参考になったら幸いです。
とても丁寧にご説明いただき誠にありがとうございます。
>tableタグを多く利用することになりソースが見にくくなる。
現在のページはtableの入れ子のまたその入れ子といった具合で
何がどこだか修正が困難な状況です。
更新を全く頭に入れておりませんでした。
頂いたURLを参考にレイアウトをスタイルシートで頑張ってみようかと
思っています。
本当に丁寧にわかりやすご説明頂いてありがとうございました。
またの機会がありましたらよろしくお願いいたします。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_05.png?e8efa67)
No.4
- 回答日時:
1、ヘッダー、左メニュー、フッターは各ページ共通なので
更新する際に1か所(例えばindexページ)を書き換えると全ての
ページに反映される様にしたい。
>僕もメニューの変更などがあった際、1つの変更で全ページに反映させたいと思ってました。
そんな難しくなりそうな事をするより、このフォルダ内のhtmlファイルを一括で複数行を変更するソフトがあれば…と思い、探した結果今はこれを使っています。
無料で便利ですよ。
http://www.vector.co.jp/soft/win95/util/se359701 …
ついでにスタイルシートについてのサイト
http://www.html-css.com
健闘を祈ります。
参考URL:http://www.html-css.com
No.3
- 回答日時:
始めまして
1,2についてです。
フレームは、サーチエンジンを使っての訪問者には表示されないことがあります(フレームの中に直接飛んでくるため)。そのため、フレームを表示させるように、片隅にリンクを張っておけばいいと思います。
または、PHPを使う方法もあります。
共通部分を外部のPHPに書いて、ページの中から呼び出すことができます。共通部分の変更は外部のPHPを変更するだけで、すべてのページに変更が反映されます。
サーバーによっては使用できないこともありますのでお使いのサーバーの仕様を確認してください。
No.2
- 回答日時:
いくつか気付きを。
>今考えてみると「コンテンツ」部分以外は全てのページ共通だったのですが、
これはおかしいですよね。特にヘッダ部が同一というのは検索エンジンにSPAMと判断されかねません。
文書構造中、ヘッダ部にはそのページの見出しや要約(Summary,Abustract)があるほうがよいので、必ずページごとに異なるはずです。
図では、ページのメニューと書かれていますがこれは構造上は見出しの後に登場するはず。
フッターには多くの場合、その文書の情報(改定履歴とか著者とか・・)のように、本文に関連する情報やサイト内ナビゲーション(いわゆるパンくずリスト)をおくことが多いと思いますから、できれば本文・コンテントの最終部分におくのが普通だと思います。・・スクリーンユーザーエージェント(いわゆるパソコンなど)の場合は、パンくずリストはデザイン上は最上部に表示してもソース的にはコンテンツの最後。また、図のように配置すると左データが長くコンテンツが少ないときは、スクロールしないと見れなくなります。・・コンテントが長い分には問題ない。
なによりも、CSSで、floatなりrelativeでメニューを配置したときの回り込み解除が大変や使いになります。
フッターをコンテント(単数形ですよ)の最下部にコンテントの幅で配置すると、メニューがfloatはむろん、fixさせても問題ないかと思います。
実際に、各ページですべて同じものは実質的にはないはずというか、あってはならない、最小限にとどめるものでしょう。だとすると、
>1、ヘッダー、左メニュー、フッターは各ページ共通なので
はあまり意味のない条件だと思います。
30ページそこらなら、基本的な制作方法は、今までにされてこられた
テンプレート作成
→コピー
→新規ページに貼り付け
→内容の書き換え
という手順でよいと思います。
ツールを使わず、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で処理しているだけかもしれない。
![「この様なHPを効率よく更新させる方法はど」の回答画像2](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/2/650963_5497ed3823e6e/M.jpg)
とても丁寧にご説明いただき誠にありがとうございます。
おはずかしいです・・・。「ヘッダー」や「フッター」の意味を
間違えて理解しておりました。
おっしゃる通り、ヘッダーやフッターではなくて添付いただきました
画像のように「見出しと要約」や「目次」、「ページ情報」が
各ページ同じデザインという意味でした。
ご迷惑をおかけいたしました。
>実際に作業してみてください。習うより慣れろです。
まさにおっしゃるとおりですね。
頂きましたURL等拝見しながら理解を深めたいと思います。
本当に丁寧にご説明いただきありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- 美術・アート トレパク疑惑をかけられにくくするには ここ最近いわゆるトレパク警察のいいがかりがが厳しくなったようで 1 2023/08/21 09:59
- 画像編集・動画編集・音楽編集 動画をディスク作成すると画像が乱れる。 4 2022/06/24 07:49
- C言語・C++・C# 【C++】IDirect3DSurfaceのディープコピーは可能ですか? 1 2022/07/06 02:47
- Excel(エクセル) Excel 在庫管理について 3 2023/02/09 10:00
- その他(インターネット接続・インフラ) 語学レッスン予約ページを作ろうとしています。 1 2022/09/26 17:43
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- PHP $_SESSIONに渡した後はそのまま使っても問題ありませんか? 3 2022/11/08 22:17
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
AviUtlでのフレーム間引きの方...
-
この様なHPを効率よく更新させ...
-
ページの中に小さな画面でフレ...
-
カンマ区切り形式ではなく、セ...
-
エクセルVBAでマルチページの切...
-
ExcelのROUND関数を一括解除し...
-
Index hospitalization とは?
-
キングファイルの背表紙を作成...
-
リンクをアップデートするしな...
-
リンクを送るとは?
-
「リンク」と「ハイパーリンク...
-
<IFRAME>でコンテンツ部分のみ...
-
Dreamweaver現状維持したまま編...
-
PDFファイルの翻訳(科学技...
-
ホームページ作成 吹き出しに...
-
Wordチェックボックス作り方(...
-
パワーポイントで参照ページを...
-
エクセルでアルファベット5段階...
-
置換での互換(交代多項式・差...
-
UserForm.showでマルチページ1...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
30fpsから60fpsに変換する方法
-
2ページにまたがる画像のダブ...
-
Aftereffectsキーフレームが勝...
-
HPの分割フレームを消したい(H...
-
ページタイトルが全部同じにな...
-
adobe InDesignで長文の文字を...
-
AviUtlでのフレーム間引きの方...
-
METAフレームって
-
写真にフレーム(額縁)をつけたい
-
スクロールバーが表示されない...
-
「index.html」の名前の付け方...
-
【初心者】DreamWeaverで上左固...
-
PowerDirector 13でのズームア...
-
フレームで作ったページ全体の...
-
Dreamweaver3でフレームを使っ...
-
上のフレーム内のプルダウンメ...
-
自分の撮った画像をデコレーシ...
-
Flash画像をだんだん白っぽくし...
-
イラレで年賀状の写真フレーム...
-
ホームページビルダー8で作成...
おすすめ情報