締切済み

全ページに共通のヘッダーを置きたいのですが……

2012/08/30 22:22

初めまして。何度かこちらで質問させていただいております。今回も、どうぞ宜しくお願い致します。ヘッダー・左ナビ・フッターなどの共通部分は、更新時に全ページの書き換えが面倒なので、（なんとなく良くないのは解っているのですが；）全てフレームセットにしていました。けれども、▼このgooのヘッダーのように、 http://oshiete.goo.ne.jp/ マウスオンで別メニューが出るようなデザインにした場合、通常ヘッダーの為に確保しているフレームの高さよりデザイン的にはみ出る部分は、表示できなくなってしまいます……よね？(;ω;) そこで質問なのですが、全部のファイルにヘッダーのソースを書く以外に、何かスマートな対処方法はありますか？プログラムの知識に乏しいのですが、こんなわたしでも便利で使えそうなやり方があったら、是非ご指南の程お願い致します。どうぞ宜しくお願い致します。読んでいただきありがとうございました。

chimin-chimin
お礼率87% (27/31)

CSS
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

みんなの回答

korinakkum
ベストアンサー率0% (0/2)

2012/09/03 18:03 回答No.6

http://benri-tools.net/contents.php?code=kyotu_menu こちらのサイトならとても簡単にPHPでメニューの共通化を説明してくれていますので、参考になれば～

質問者

お礼 2012/09/03 22:50

ご回答ありがとうございます！ php、今回初めて使うことになったのですが、いろいろと参考にさせていただけそうなサイトをありがとうございます☆ 頑張りますね！ありがとうございました＾＾

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/31 16:00 回答No.5

スタイルシートです。 HTMLに文書構造しか書いてないため、スタイルシートも文書構造で指定してあるのでわかりやすいでしょう。印刷時には適用されません。 ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みタブは＿に置換してあるので戻すこと。＿<style type="text/css" media="screen">  ＿</style>

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/31 15:52 回答No.4

＞も、phpのことを調べている際に見つけたので試してみたり、　phpじゃなくて、もっと古い枯れた技術です。HTTPサーバー自体が持っている機能です。とてもシンプルでわかりやすいかと　ただし、SSIとして動作させるためには、リモート/ローカルを問わずHTTPサーバー経由である必要があります。サーバーは拡張子さえshtmlにすれば、http://経由で開けば、設定不要で動作するはずです。拡張子htmlで動作させるためには.htaccessの記述が必要です。(apacheの場合) ＞CSSでz-indexも使ってみたのですが、やっぱりダメでした…；　よほど古いブラウザでない限り、それも考えられません。 <div id="header">グローバルナビゲーション</div> <div id="left">左メニュー・バナー置場</div> <div id="main">メインコンテンツ</div> <div id="footer">フッター</div> 　基本的なことはわかります。ただ、厳密に言うとおかしいです。 ★たとえば、将来考え変わって右に表示していたものを左にしたくなったり、下に表示したくなったときHTMLを書き直さなくてできますか？ ★header、main、footerは、文書内に何度も登場する可能性のある名称です。HTML5の3.1. 新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )をご覧になるとわかります。これらはclass名でマークアップするほうが良いでしょう。　簡単なHTMLをあげておきます。誰でもわかるHTMLであることがわかるかと 1) 文書構造だけしか書いていないので将来どのようにもデザインできます。　　左右を変えたり、縦に並べたり・・HTMLを書き直す必要はありません。 2) 無駄なclass/id名はありません。 3) はそのままgrobal-nav.htmlの内容に置き換わります。　　footerの前にありますが、section(本文)の前でも(z-indexが指定してあるので)構いません。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) にて検証済みのHTML4.01strictです。 ★<class="header">などはそのまま<header>にするとHTML5になります。 ★タブは＿に置換してあるので戻すこと。 [ssi.shtml]拡張子はshtmlであること。http経由(サーバーにアップすること) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div>  ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div class="section" id="section1"> ＿＿＿<h3>見出し</h2> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div class="section" id="section2"> ＿＿＿<h3>見出し</h2> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div class="section" id="section3"> ＿＿＿<h3>見出し</h2> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿<h3>目次</h3> ＿＿＿<ol> ＿＿＿＿<li>一章</li> ＿＿＿＿<li>二章</li> ＿＿＿＿<li>三章</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>脚注</h3> ＿＿＿<p>本文と関係ない記事</p> ＿＿</div> ＿</div>  ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html> [grobal-nav.html]上記と同じフォルダへ＿<div id="global-nav" class="nav"> ＿＿<ul class="menu" id="menu"> ＿＿＿<li class="a">項目１</a> ＿＿＿＿<ul> ＿＿＿＿＿<li>ドロップダウン</li> ＿＿＿＿＿<li>ドロップダウン</li> ＿＿＿＿＿<li>ドロップダウン</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li class="a">項目２</a> ＿＿＿＿<ul> ＿＿＿＿＿<li>ドロップダウン</li> ＿＿＿＿＿<li>ドロップダウン</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li class="a">項目３</a> ＿＿＿＿<ul> ＿＿＿＿＿<li>項目４</li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿＿<li class="a">項目５</a> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="dl-1.html">ドロップダウン</a></li> ＿＿＿＿＿<li><a href="dl-2.html">ドロップダウン</a></li> ＿＿＿＿＿<li><a href="dl-3.html">ドロップダウン</a></li> ＿＿＿＿</ul> ＿＿＿</li> ＿＿</ul> ＿</div>

質問者

お礼 2012/09/03 22:47

No.3、4さまご回答ありがとうございます。いろいろと詳細をありがとうございました。いただいたソースをそのままローカルでテストさせていただいた時は動いたのですが、自分のファイルに書き換えで挿入すると、動作せず……（謎；）、結局最終的にindexをphpファイルにして、include部分にも書き足しを行い、それから「div id="header"></div>」の領域指定を外したら動作いたしました……！＞＜やはりこのdivが窓枠？のような役目になっていたらしく、height指定した数値以上のデザイン部分を隠していたようです。ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/08/31 08:53 回答No.3

あまりにも昔からある技術なのに、忘れている？ SSI(Server Side Includes)を使います。とても、簡単な技術で多くのサイトで使われています。　HTML内にとか書くだけです。先日も回答しました。 →CSSを使って定型文を挿入できますか？ - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7662666.html ) ＞通常ヘッダーの為に確保しているフレームの高さよりデザイン的にはみ出る部分は、表示できなくなってしまいます……よね？　いいえ、そのためにz-indexがあります。　ただ、それがナビゲーションでしたらヘッダーに書くのではなく、footerや本文よりあとに書くのがよいので、スタイルシートでヘッダ部分に回せば、z-indexがなくても上に表示されます。

質問者

お礼 2012/08/31 10:38

回答ありがとうございます。すみません、ある意味既出の質問だったのですね。細かい内容は違えど、なんとなく同じ感じです＾＾；　失礼致しました。 も、phpのことを調べている際に見つけたので試してみたり、 CSSでz-indexも使ってみたのですが、やっぱりダメでした…；何か根本的なことが間違っているのでしょうか…？端的に説明しますと、widthとheightを設定したブロック要素をレイアウト用として置いて、細かいコンテンツはそれぞれの中に書き込んでいます。 ▼すごい省略型ですみません； <div id="header">グローバルナビゲーション</div> <div id="left">左メニュー・バナー置場</div> <div id="main">メインコンテンツ</div> <div id="footer">フッター</div> で、今まで共通部分は、iframeで別の1枚ファイルを呼び出す形にしていたので、更新もラクしていました；が、今回はheaderにのみマウスオンで別メニューが出るようなデザインをCSSとJavaScriptで組みましたら、通常時（height: 150px;）はちゃんと表示されていますが、マウスオンした際（約、縦250px？くらいの領域を使用する）、150px以内だけが表示されている感じです…(;ω;) 細かい説明を補足ですることになりすみません＞＜何か間違いがあったら、ご指摘をお願い致します…！

shockatz
ベストアンサー率80% (153/191)

2012/08/31 03:42 回答No.2

サーバサイドより、編集用PCでDreamweaverのテンプレート使うほうが絶対に楽です。（規模にもよるけど、５０ページ程度なら楽勝）大昔のバージョンからある、定番機能です。 Dreamweaver Template http://www.adobe.com/jp/devnet/dreamweaver/articles/using_template_part1.html テンプレートとライブラリこそ、Dreamweaverの存在価値というのは言いすぎ？

質問者

お礼 2012/08/31 10:20

ご回答ありがとうございます！ DreamWeaverで作業をしているものの、ソフト自体の機能については殆ど使いこなしておらず、原始的な手打ちに近い感じでした…＾＾；いろいろと便利な機能があるのですね！確認してみます。ありがとうございました☆

anyhelp
ベストアンサー率43% (79/181)

2012/08/30 22:46 回答No.1

良い悪いは置いておいて、色々やり方はあります。 PHPといったサーバのスクリプトを使う方法 JQueryといったブラウザ側のスクリプトを使う方法 iframeやframeといった原始的なタグに読み込む方法 WordpressなどのCMSを使う方法 SSIを使う方法何が得意かにもよりますが、PHPならすぐにできるとおもいます。 http://www.streetcar.jp/blog/index.php?e=645

質問者

お礼 2012/08/31 10:17

回答ありがとうございます！ iframeは、ファイル内に▼ <iframe src="header.html" name="header" width="960" height="150" frameborder="0" scrolling="no"> …といった、こういったソースを書く方法のことで合っていますか？それもやってみたのですが、heightで指定した範囲しか表示できませんでした…； headerを別ファイルにしてPHPに…のようなことも調べてやってみたのですが、どうも思っていたように表示されず、わたしのやり方が間違っているのかも…と思いつつ、他の方法もお伺いしたく、ご質問させていただきました＞＜もしかして、indexファイルそのものに、headerなどの共通部分を表示する領域をcssで確保しているのがマズいのでしょうか？（←これだとiframeと同じ原理…？）

全ページに共通のヘッダーを置きたいのですが……

みんなの回答

お礼 2012/09/03 22:50

お礼 2012/09/03 22:47

お礼 2012/08/31 10:38

お礼 2012/08/31 10:20

お礼 2012/08/31 10:17

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう