質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

11608閲覧

.htaccessでURLを書き換えるとcssを読み込まなくなる

Praline

総合スコア46

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/08/02 15:14

###前提・実現したいこと
ページの拡張子を隠すために、.htaccessを使用しURLを書き換えたいです。
下記例では、/test/の部分を/test.phpに書き換えアクセスします。

###発生している問題・エラーメッセージ

下記.htaccessを用意したところ、ページにはアクセスできているため、書き換えは正常に行えていると思うのですが、cssが読み込めずページのレイアウトが崩れている状態です。

RewriteEngine on RewriteCond %{REQUEST_URI} !\.css$ RewriteRule ^test/(.*) test.php [QSA,L]

なおフォルダ構成は以下の通りとなっております。

└index.php
' test.php
' .htaccess
' css
' └style.css

cssは相対パスで指定しています。

html

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

おそらくcssを読みに行くパスも、htaccessで書き換えが発生しているのかと予想しているのですが、cssを除く書き方をしても解決せずわからない状態です…

お手数ですがご助言のほどよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

cssのパスやcssの内部に記述されている画像などのパスは相対パスになっていませんか?

/test/
というパスはいうなれば
/test/index.php
というディレクトリ階層と同じ状態です。

これが
/test.php
になったので階層が一つ上になってしまいました。

./css/style.css
というパス指定をしているのであれば
前者は
/test/css/style.cssになり
後者は
/css/style.cssになっていまいます。

追記
現時点で階層が変わると相対パスで指定しているcssは効かなくなるということを理解するのが難しいようであれば相対パスを使わずに絶対パスで記述しましょう。

修正前

<link type="text/css" rel="stylesheet" href="css/style.css"/> ↓修正後 <link type="text/css" rel="stylesheet" href="/css/style.css"/>

投稿2017/08/02 15:19

編集2017/08/02 16:19
Tak1016

総合スコア1408

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Praline

2017/08/02 15:41

はい、index.phpとtest.phpは同じ階層にあり、cssファイルは、cssというディレクトリ内のstyle.cssを指定しています。 cssの指定は相対パスになっており、階層自体は問題ないと思っております… というのも、index.php、test.phpいずれも同じcssファイルを参照しているのですが、index.phpは正常に表示され、test.phpはレイアウトが崩れる、という状態です。
Tak1016

2017/08/02 15:45

/test/index.php から見た css/style.css のフルパスは /test/css/style.cssです。 /test.phpから見た css/style.cssのフルパスは /css/style.cssです。 /test/css/style.css ① /css/style.css ② パスが変わりますよね? このためにcssが読み込まれないのです。
Praline

2017/08/02 16:02

すみません、自分の説明を補足させていただきます。 .htaccessを省いた状態でhoge.com/test.phpにアクセスすると、レイアウト崩れは発生しません。 次に.htaccessを設定し、hoge.com/test/にアクセスすると、ページは表示されるものの、レイアウトが崩れます。 上記記載しておりますが、cssはいずれも"css/style.css"と、相対パスで指定しております。
Tak1016

2017/08/02 16:04

/test/ の 最後の/ があるから階層が一段下がってるんですよ
Tak1016

2017/08/02 16:07

/test.php の場合のcss/style.css は /css/style.cssの意味です。 /test/ の場合のstyle.cssは /test/css/style.cssの意味です。 /test/css/style.cssは存在しないのでcssが当たっていないのです。
Tak1016

2017/08/02 16:11

階層が変わると相対パス表記のURLの絶対パスが変わるということを現時点で理解できないのであれば cssを絶対パス表記に変えてみてください。 修正前 <link type="text/css" rel="stylesheet" href="css/style.css"/> ↓修正後 <link type="text/css" rel="stylesheet" href="/css/style.css"/>
Praline

2017/08/02 16:23

すみません、ようやく意味がわかりました…! 自分が書いた.htaccessでhoge.com/test/にアクセスした場合、 書き換えが発生するので、アクセスするページはhoge.com/test.phpですが、 cssは(書き換えを無視させているので)、hoge.com/test/からみたcss/style.cssの位置となり、 hoge.com/test/css/style.cssを見に行くということですね… 実際、cssの参照位置を"../css/style.css"に変更することでレイアウトが反映されることを確認しました。 てっきり書き換え済みのページから見た相対位置だという認識だったので、 URLをベースにした位置になるということは知りませんでした。 丁寧に説明していただきありがとうございます!
Tak1016

2017/08/02 16:25

cssを解釈するのはサーバーではなくブラウザです。 ブラウザはURLが書き換えられたのかどうかなんて知りません。 純粋に今のURLの階層からパスを判断します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問