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

締切済

質問者：chimin-chimin
質問日時：2012/08/30 22:22
回答数：6件

初めまして。
何度かこちらで質問させていただいております。
今回も、どうぞ宜しくお願い致します。

ヘッダー・左ナビ・フッターなどの共通部分は、更新時に全ページの書き換えが面倒なので、
（なんとなく良くないのは解っているのですが；）全てフレームセットにしていました。

けれども、▼このgooのヘッダーのように、
http://oshiete.goo.ne.jp/

マウスオンで別メニューが出るようなデザインにした場合、
通常ヘッダーの為に確保しているフレームの高さよりデザイン的にはみ出る部分は、表示できなくなってしまいます……よね？(;ω;)

そこで質問なのですが、
全部のファイルにヘッダーのソースを書く以外に、何かスマートな対処方法はありますか？
プログラムの知識に乏しいのですが、こんなわたしでも便利で使えそうなやり方があったら、是非ご指南の程お願い致します。

どうぞ宜しくお願い致します。
読んでいただきありがとうございました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.6

回答者： korinakkum
回答日時：2012/09/03 18:03

http://benri-tools.net/contents.php?code=kyotu_m …

こちらのサイトならとても簡単にPHPでメニューの共通化を説明してくれていますので、
参考になれば～

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

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

ありがとうございました＾＾

通報する

お礼日時：2012/09/03 22:50

No.5

回答者： ORUKA1951
回答日時：2012/08/31 16:00

スタイルシートです。

HTMLに文書構造しか書いてないため、スタイルシートも文書構造で指定してあるのでわかりやすいでしょう。
印刷時には適用されません。

★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
タブは＿に置換してあるので戻すこと。

＿<style type="text/css" media="screen">

＿</style>

- 1
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2012/08/31 15:52

＞も、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/h … )をご覧になるとわかります。これらは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>

- 0
- 件

通報する

この回答へのお礼

No.3、4さま
ご回答ありがとうございます。
いろいろと詳細をありがとうございました。

いただいたソースをそのままローカルでテストさせていただいた時は動いたのですが、
自分のファイルに書き換えで挿入すると、動作せず……（謎；）、

結局最終的にindexをphpファイルにして、include部分にも書き足しを行い、
それから「div id="header"></div>」の領域指定を外したら動作いたしました……！＞＜
やはりこのdivが窓枠？のような役目になっていたらしく、height指定した数値以上のデザイン部分を隠していたようです。

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

通報する

お礼日時：2012/09/03 22:47

No.3

回答者： ORUKA1951
回答日時：2012/08/31 08:53

あまりにも昔からある技術なのに、忘れている？

SSI(Server Side Includes)を使います。とても、簡単な技術で多くのサイトで使われています。
　HTML内にとか書くだけです。

先日も回答しました。
→CSSを使って定型文を挿入できますか？ - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7662666.html )

＞通常ヘッダーの為に確保しているフレームの高さよりデザイン的にはみ出る部分は、表示できなくなってしまいます……よね？
　いいえ、そのためにz-indexがあります。

　ただ、それがナビゲーションでしたらヘッダーに書くのではなく、footerや本文よりあとに書くのがよいので、スタイルシートでヘッダ部分に回せば、z-indexがなくても上に表示されます。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

すみません、ある意味既出の質問だったのですね。
細かい内容は違えど、なんとなく同じ感じです＾＾；　失礼致しました。

も、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以内だけが表示されている感じです…(;ω;)

細かい説明を補足ですることになりすみません＞＜
何か間違いがあったら、ご指摘をお願い致します…！

通報する

お礼日時：2012/08/31 10:38

No.2

回答者： shockatz
回答日時：2012/08/31 03:42

サーバサイドより、編集用PCでDreamweaverのテンプレート使うほうが絶対に楽です。

（規模にもよるけど、５０ページ程度なら楽勝）
大昔のバージョンからある、定番機能です。

Dreamweaver Template
http://www.adobe.com/jp/devnet/dreamweaver/artic …

テンプレートとライブラリこそ、Dreamweaverの存在価値というのは言いすぎ？

- 1
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

DreamWeaverで作業をしているものの、ソフト自体の機能については殆ど使いこなしておらず、
原始的な手打ちに近い感じでした…＾＾；

いろいろと便利な機能があるのですね！
確認してみます。

ありがとうございました☆

通報する

お礼日時：2012/08/31 10:20

No.1

回答者： anyhelp
回答日時：2012/08/30 22:46

良い悪いは置いておいて、色々やり方はあります。

PHPといったサーバのスクリプトを使う方法
JQueryといったブラウザ側のスクリプトを使う方法
iframeやframeといった原始的なタグに読み込む方法
WordpressなどのCMSを使う方法
SSIを使う方法

何が得意かにもよりますが、PHPならすぐにできるとおもいます。
http://www.streetcar.jp/blog/index.php?e=645

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！

iframeは、ファイル内に▼
<iframe src="header.html" name="header" width="960" height="150" frameborder="0" scrolling="no">
…といった、こういったソースを書く方法のことで合っていますか？
それもやってみたのですが、heightで指定した範囲しか表示できませんでした…；

headerを別ファイルにしてPHPに…のようなことも調べてやってみたのですが、
どうも思っていたように表示されず、わたしのやり方が間違っているのかも…と思いつつ、
他の方法もお伺いしたく、ご質問させていただきました＞＜

もしかして、indexファイルそのものに、headerなどの共通部分を表示する領域をcssで確保しているのがマズいのでしょうか？（←これだとiframeと同じ原理…？）

通報する

お礼日時：2012/08/31 10:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！