SSIに関するご質問

質問

下記サイトを参考にHTMLファイルを外部から読み込む方法（SSI）について試行錯誤しております。
一通り作業を済ませファイルは読み込むのですが、ファイルが挿入された１行目の上に隙間(10px程)ができて困っておりご質問させていただきます。

参考サイト
http://allabout.co.jp/gm/gc/23773/2/

-----------------------------------------
・CSS
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 1.2;
font-weight: normal;
font-family: "ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","Osaka";
color: #000;
background-color: #FFF;
overflow-x: hidden;
}
h1 {
font-size: 12px;
line-height: 14px;
margin: 0;
padding: 0;
}
-----------------------------------------
・共通部分のHTMLファイル（test.html）
<h1>私のホームページ</h1>
<p>
<a href="a.html">HOME</a>
<a href="b.html">紹介</a>
<a href="c.html">日記</a>
<a href="d.html">LINK</a>
</p>
-----------------------------------------
・ページのHTML
<!--#include virtual="/ssi/test.html" -->
-----------------------------------------
・備考
h1タグをspanにすると隙間がなくなって表示されました。
-----------------------------------------

CSSでどのような記述をすればh1タグの上にできる隙間をなくせるのかご教授いただければ幸いです。
よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

HTMLとCSSについて基本は理解しておきましょう。でないと、単純なところで先に進めなくなります。
　SSI経由だろうが無関係にHTMLは
<h1>私のホームページ</h1>
<p>
<a href="a.html">HOME</a>
<a href="b.html">紹介</a>
<a href="c.html">日記</a>
<a href="d.html">LINK</a>
</p>
<H2>日記</H2>
　　<P>
　　　　私の日記です。お暇な方はどうぞ。
　　</P>
となるはずですね。(余分な文字が入っていない限り)
これを
<span>私のホームページ</span>
<p>
<a href="a.html">HOME</a>
<a href="b.html">紹介</a>
<a href="c.html">日記</a>
<a href="d.html">LINK</a>
</p>
<H2>日記</H2>
　　<P>
　　　　私の日記です。お暇な方はどうぞ。
　　</P>
とすると、「ページ上部に隙間ができない」と言うことですが、HTMLを見る限り逆にはなっても、そうはならないことが理解できると思います。

　HTMLの要素には、ブロック要素とインライン要素( ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 ) )があることはご存知でしょうが、<h1>や<p>はブロック要素で<span>はインライン要素です。
　スタイルを一切記述せずにHTMLをブラウザの持つデフォルトのスタイルシートでご覧ください。多くのブラウザは下記のようなスタイルを持っていることが多いです。
★HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )

　そのうえで、スタイルシートでプレゼンテーションを変更していきます。
※このとき、
* {
margin: 0;
padding: 0;
}
のような指定はすべきではありません。*は全称セレクタで詳細度こそ0ですが、ブラウザの持つすべての要素のmarginとpaddingをリセットしてしまいます。そのため、pやh1～h6、blockquoteや各リストやリスト項目のそれらも改めて設定しなければならなくなり、スタイルシートが煩雑になります。必要なものだけ指定しましょう。
　h1に対して、詳細度0,0,0,1で、再びmarginやpaddingを指定していますから、この*を使っての指定は意味ないはずですし・・

　示されたHTMLやCSSを見る限り、あなたがいわれる現象にはならないはずです。どこかでより高い優先順位か詳細度でマージンを指定しているとしか考えられません。
★CSSは{カスケーディングスタイルシート}の略です。カスケーディング機能がこのスタイルシートの【命】です。セレクタ・出所・最優先宣言・出現順番・継承・詳細度などを含む大変重要な仕組みです。marginとかfont-familyなどのプロパティより先に身につけるべき、極めて重要な仕組みです。
　5.セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
　6.値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

　なお、firefoxのアドオンにfireBug( https://addons.mozilla.jp/firefox/details/1843 )という解析ツールがあります。それをつかうと、どの要素にマージンがあるかたちどころにわかるでしょう。他の開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )と共に使われると良いでしょう。

お礼

多くの情報、また適切なご指摘ありがとうございます。
今一度、確認し直したいと思います。

回答No.1

kmee

SSIでもCGIでも、サーバーサイドで処理するものは、直接作ったHTMLとなんら違いはありません。

<!--#include virtual="/ssi/test.html" -->
　だったら、ここに直接
<h1>私のホームページ</h1>
<p>
<a href="a.html">HOME</a>
<a href="b.html">紹介</a>
<a href="c.html">日記</a>
<a href="d.html">LINK</a>
</p>
　と書くのと同じです(ブラウザにとっては)。

SSIとかは関係なしに、できあがったHTML+CSSが期待通りになっていないだけだと思われます。
各種チェッカーや開発ツールを使って確認しましょう。