テンプレートファイルでＣＳＳファイルを読み込む指定をしましたが、うまく

解決済

質問者：yanagihk
質問日時：2010/05/23 00:29
回答数：1件

テンプレートファイルでＣＳＳファイルを読み込む指定をしましたが、うまく読みこめていないようで、
ＣＳＳファイルで指定した項目を意図した位置に表示することができません。

ＳＭＡＲＴＹを使ってます。テンプレートファイルにHTMLを記述しています。
環境は、ＷＩＮＤＯＷＳ　ＶＩＳＴＡにApacheを入れて動かしています。
このテンプレートファイル（reg.tpl）の中でのＣＳＳファイルの読み込みやCLASSの指定では次のように書いてます。

(1)reg.tplの内容です。
<HTML>
<HEAD>
<TITLE>{$title}</TITLE>
{$form.javascript}

<link rel="stylesheet" href="layout.css" type="text/css" /> 　→ここでＣＳＳファイルの読み込み指定

</HEAD>
<BODY bgcolor="#FFFFFF">
<CENTER>
<HR size="1" noshade>
<B>{$title}</B>
<HR size="1" noshade>

<DIV id="l1" CLASS="userid">　→ここでＣＳＳファイルで設定したものを指定
<FONT size="2">{$form.user_id.label}：</FONT>
{if $form.user_id.error }
<font size="2">{$form.user_id.error}</font><BR>
{/if}
{$form.user_id.html}
</DIV>
～中略

(2)layout.cssの内容です。
.userid {
position : absolute;
top: 545px;
left: 150px;

width: 5%;
border:0px solid #FFB6C1;
}

(3)ファイルの設置場所は次の通りです。

┳templates━reg.tpl
＿＿＿＿＿＿┗layout.css

(4)layout.cssをサーバーにアップロードして、上記(1)のreg.tplの<link …の指定部分を次のように絶対パスに変更すると
layout.cssが正常に読み込めます。（userid項目がcssファイルに指定した位置に表示されます）

<link rel="stylesheet" href="http://www.****.com/layout.css" type="text/css" />

(5)<link …で(1)のように指定した場合、layout.cssとreg.tplが同じフォルダにあれば実行しても
cssファイルが読み込めると認識していたのですが読み込めません。

index.htmlファイルとcssファイルを同じフォルダにおいて、index.htmlの中に(1)の<link …のようにファイル名のみの記述をするとうまく読み込めます。

テンプレートファイルの中で使う項目にＣＳＳファイルを利用して自由なレイアウトを実現したいのですが、絶対パスでＣＳＳファイルを指定する方法以外にないのでしょうか？

分かる方、ご教授下さい。

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： abril
回答日時：2010/05/23 05:17

> <link rel="stylesheet" href="layout.css" type="text/css" />

> <link rel="stylesheet" href="http://www.****.com/layout.css" type="text/css" />
> index.htmlファイルとcssファイルを同じフォルダにおいて、index.htmlの中に(1) の<link …のようにファイル名のみの記述をするとうまく読み込めます。

これらの事実がそのまま答えを示してくれていますね。
reg.tplはあくまでテンプレートファイルであり、CSSが実際に反映されるのはreg.tplからPHPによって生成されるHTMLファイルに対して、です。だからこの場合、(1)の相対パスによる記述が正しい位置関係になる為には、layout.cssの置き場所は、reg.tplと同じ階層ではないく、結果として生成されるHTMLファイルと同じでなければなりません。

つまり、（hoge.htmlが生成結果のHTMLファイルだとした場合）仮に下記の様な階層構造だったとしたら、

┳templates━reg.tpl
＿＿＿＿＿＿┗layout.css
┗hoge.html

となっていしまい、HTMLファイルから見たlayout.cssは同じ階層にはいませんので(1)の相対パスの記述は正しくない事になってしまいます。(1)の相対パスの記述が正しくなる為には、

┳templates━reg.tpl
┗hoge.html
┗layout.css

こうならなければなりません。

CSSファイルや画像ファイルの相対パスというのは、あくまで（PHPから生成された結果としての）HTMLファイルから見た位置の事であって、テンプレートファイルから見た位置の事ではない、という事です。