• signup.ph
    pをブラウザで開くと、CSSを読み込むことができませ...
  • guest 
    signup.phpをブラウザで開くと、CSSを読み込むことができません。

    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利用中です。
    回答 0

    guest 
    すみません。引き続き自分でいろいろと試し、cssファイルへのパスを
    /webservice_practice/style.css
    としたところ反映されました。
    signup.phpとstyle.cssはhtdocs内のwebservice_practiceフォルダの同一階層に存在しているのですが、
    href="style.css"では読み込まず、
    href="/webservice_practice/style.css"では読み込むのはなぜでしょうか?

    ウェブカツコーチ 
    1つ目の質問の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属性などにも適用できます。
    しっかりここで理解するようにしましょう。

    guest 
    ありがとうございます!
    コードだけに注視していましたが、ブラウザに入力したURLが違っていたとは気づきませんでした。
    相対パスと絶対パスについての詳しく、わかりやすい説明をありがとうございます。なんとなく認識していたつもりですが、今回いただいた返答でしっかりと理解できたと思います。
    ありがとうございました。