pをブラウザで開くと、CSSを読み込むことができませ...
/webservice_practice/style.css
としたところ反映されました。
signup.phpとstyle.cssはhtdocs内のwebservice_practiceフォルダの同一階層に存在しているのですが、
href="style.css"では読み込まず、
href="/webservice_practice/style.css"では読み込むのはなぜでしょうか?
ブラウザに入力したURLに
http://localhost:8888/freemarket/signup.php/
と末尾にスラッシュをつけていたからではないでしょうか。
そのため、CSSのリクエストURLが、本来の
http://localhost:8888/freemarket/style.css
のではなく、
http://localhost:8888/freemarket/signup.php/style.css
と間違った場所になっていますね。
2つ目の質問に答える前に、1つ目の質問とも関連するのでhref=""の書き方を説明します。
この書き方は2つあって、相対パスと絶対パスと呼ばれるものです。
相対パスは、href="style1.css"やhref="css/style2.css"と先頭がファイル名やフォルダ名から始まる書式です。
ブラウザに入力したURLを起点として、hrefに書いたファイルへアクセスします。
例えば、
<link (省略) href="style1.css" >
<link (省略) href="css/style2.css" >
と書いたsignup.phpがあったとして、
ブラウザのURLに
http://localhost:8888/freemarket/signup.php
とアクセスします。その場合、signup.phpのあるディレクトリである
http://localhost:8888/freemarket/
を起点として、style1.cssやcssフォルダの中にあるstyle2.cssを探します。
一つ目の質問で例えると、
http://localhost:8888/freemarket/signup.php/
とURLを入力したため、
freemarket/signup.php/
という存在しない場所を起点にしてしまったために、style.cssが正しく読み込めなかったというわけです。
次に、絶対パスは、hrefの先頭が"https://~"や"/freemarket/style.css"とパスがhttpなどプロトコルやスラッシュから始まる書き方です。
ウェブサーバにアクセスできる一番上のフォルダを起点にして、そのパスに書いているファイルにアクセスします。
今回利用しているMAMPでは、htdocsがその起点になります。
2つ目の質問のようにhref="/webservice_practice/style.css"と書いた場合では、htdocsのフォルダの直下にあるwebservice_praciceフォルダ内のstyle.cssへとアクセスします。
そのため、2つ目の質問の回答になりますが、絶対パスで書いた通りにstyle.cssを配下にもつservice_practiceのフォルダをhtdocsの下に置いていたから、スタイルが正しく読み込めたということです。
言い換えると、service_practiceフォルダを移動してしまうと、htdocsフォルダから見たstyle.cssの場所は変わるので、hrefに書いている絶対パスを変更しないままだとスタイルは効かなくなってしまうということです。
絶対パスを利用しているときにやりがちなので気をつけてください。
ちなみに、絶対パス・相対パスの書き方は、jsファイルを読み込む<script>タグのsrc属性などにも適用できます。
しっかりここで理解するようにしましょう。
コードだけに注視していましたが、ブラウザに入力したURLが違っていたとは気づきませんでした。
相対パスと絶対パスについての詳しく、わかりやすい説明をありがとうございます。なんとなく認識していたつもりですが、今回いただいた返答でしっかりと理解できたと思います。
ありがとうございました。
部活の学習一覧
Lesson 01
「WEBサービスと必要な機能」
Lesson 02
「画面を設計しよう!」
Lesson 03
「テーブルを設計しよう!part1」
Lesson 04
「テーブルを設計しよう!part2」
Lesson 05
「テーブルを設計しよう!part3」
Lesson 06
「DB作成」
Lesson 07
「画面を作ろう!」
Lesson 08
「画面を作ろう!part2」
Lesson 09
「ユーザー登録機能を作ろう!」
Lesson 10
「ユーザー登録機能を作ろう!part2」
コーヒーブレイク
「投資の小話」
Lesson 11
「ログイン機能を作ろう!」
Lesson 12
「ログアウト機能を作ろう!」
Lesson 13
「退会機能を作ろう!」
Lesson 14
「プロフィール編集機能を作ろう!」
コーヒーブレイク
「書いて書いて書きまくれ!」
Lesson 15
「パスワード変更機能を作ろう!」
Lesson 16
「パスワードリマインダー機能を作ろう!」
Lesson 17
「商品登録機能を作ろう!」
Lesson 18
「商品登録機能を作ろう!part2」
Lesson 19
「商品登録機能を作ろう!part3」
Lesson 20
「商品一覧表示機能を作ろう!」
Lesson 21
「商品詳細画面を作ろう!」
Lesson 22
「商品検索機能を作ろう!」
Lesson 23
「連絡掲示板機能を作ろう!」
Lesson 24
「お気に入り機能を作ろう!」
Lesson 25
「マイページ機能を作ろう!」
コーヒーブレイク
「はたらくプログラミング 第5話」
ご意見箱
HTMLの<head>内に
<link rel="stylesheet" href="style.css" type="text/css">
と記述していますが(lesson9の捕捉よりダウンロードしたファイルのままです)、
ブラウザでHTMLのみを読み込んだ画面が表示されます。
ディベロッパーツールを確認すると、
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8888/freemarket/signup.php/style.css".
上記のエラーが表示されています。
NetworkタブのNameでstyle.cssを選択してHeadersのResponse Headersを見ると、
Content-type: text/html; charset=UTF-8
となっています。
text/htmlで返されていることが原因でcssを読み込めないのだと思いますが、その原因がわかりません。
style.cssの内容をコピーし、signup.phpの<head>内に<style>タブを作ってペーストすると、ブラウザでしっかりと表示されます。
検索して解決策を探しましたが、自力で解決することができないのでアドバイスをお願いします。
MAC、Chrome、Brackets利用中です。