dポイントプレゼントキャンペーン実施中!

趣味でhtml/cssたまにjsを勉強しています
現在シンプルなホームページを制作しています

そのページは、
前ページ共通のヘッダー・トップメニュー・サイドバー・フッターがあり、
トップメニューは複数個あり、それぞれ
トップページ(index.html)、
サブページ1(sub_1.html)、
サブページ2(sub_2.html)、
サブページ3(sub_3.html)、
(※実際はいろいろと名前を付けています)
にリンクが張ってあります
また、共通部分はそれぞれ外部ファイル(header.htmlなど)に切り分け、
javascriptで各ページから読み込んでいます

現在このようにページ毎に1つのhtmlファイルを用意しているわけですが
上に述べた共通部分を切り分けても、
<head>
<title>...</title>
<meta...>
<link...>
<script>...</script>
</head>
<body>
<header></header>
<div id="main">
...
</div>
<footer></footer>
</html>
のような骨組みは未だ各htmlのページに記述しています
Railsだとたしかlayoutファイルといったものにまとめらてと思うのですが
これらの骨組み(とくに長いhead内の記述)を一箇所にまとめたいと思っています
(そういえばmetaタグも外部ファイル化していいのでしょうか?)

現在、いっそのことindex.htmlのページだけにして
javascriptでコンテンツを切り替える形にしようかなとも思っています
ただ、できることならURLを
www.example.com
www.example.com/sub_1.index
www.example.com/sub_2.index
のような形にしたいので迷っています

サーバー環境は
Ruby,Python,Peril,PHP,SQLいずれも無し
コマンド除くSSI可、.htaccess設定可
のレンタルサーバを借りてます

質問
・metaタグ内も外部ファイル化していいんですか?
・この環境で骨組みを一箇所にまとめる方法はありますか?
→ .htaccessとやらを使えばルーティングできる?

いずれの質問でも
どなたか詳しい方ぜひ知恵をお貸しください
よろしくお願いします

A 回答 (1件)

まず、ディレクトリ構造ですが・・


hoge.com
|-- index.html
|-- images/   このディレクトリより下位で使用する
|  |-- logo
|  |-- photo
|  |-- icons
|  |-- figure
|-- CSS/     このディレクトリより下位で使用する
|-- SSI/     このディレクトリより下位で使用する
|-- category1/
|  |-- index.html
|  |-- images/
|  |-- CSS/
|  |-- SSI/
|-- category2/
|  |-- index.html
|  |-- images/
|  |-- CSS/
|  |-- SSI/
|-- information/
   |-- index.html
   |-- form.html  Contact Us
   |-- privace.html
   |-- links.html

SSIを使用すると、各ページに共通で記述されるブロックは一つのファイルで共用できます。
同じ階層でない場合は、
<!--#include virtual="/SSI/footer_doctypeInfo.htm" -->
と、virtual を使用します。

SSIはサーバーの機能ですから、
<header></header>
など<body>ないのものばかりでなく
<head></head>内の記述も、Server Side Includes で読み込めます。
例えば、
わたしは
<!--#include virtual="/SSI/head_defaultCSS.htm" -->

なお、
→ .htaccessとやらを使えばルーティングできる?
は、
AddHandler server-parsed html
を書いておくと、htmlファイルを、SSIファイルとして認識します。

「ルーティング」とは言いません。インクルードさせるでよい。

★PHPやPerl、AWKなどCommon Gateway Interface( CGI )が使えるなら、index.htmlをCGIにして、すべてを動的に出力することも可能です。というか、大規模なサイトは、この方法が主力です。
    • good
    • 0

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