こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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


SMARTYを使ってます。テンプレートファイルにHTMLを記述しています。
環境は、WINDOWS VISTAにApacheを入れて動かしています。
このテンプレートファイル(reg.tpl)の中でのCSSファイルの読み込みやCLASSの指定では次のように書いてます。

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

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

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


<DIV id="l1" CLASS="userid"> →ここでCSSファイルで設定したものを指定
<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 …のようにファイル名のみの記述をするとうまく読み込めます。

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

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

投稿日時 - 2010-05-23 00:29:08

QNo.5914546

すぐに回答ほしいです

質問者が選んだベストアンサー

> <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ファイルから見た位置の事であって、テンプレートファイルから見た位置の事ではない、という事です。

投稿日時 - 2010-05-23 05:17:50

お礼

ご回答ありがとうございました。
tplファイルに値を渡すphpファイルと同じフォルダにCSSを移動してもできませんでしたが、
最初に実行するindex.phpと同じフォルダ(ドキュメントルート)にCSSファイルを移動したら正常に
読み込めました。不思議です。本当にありがとうございました。

投稿日時 - 2010-05-23 14:34:36

ANo.1

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問