Q&A
＞・ディレクトリ構成
ご提示ください
＞Djangoを利用
質問にタグを追加してください。
フレームワークなのであれば現在のタグだけだとアドバイスを得られにくいです。
前提・実現したいこと
ブラウザ上でhtmlファイルを表示する処理をしていますが、cssファイルに記載されている部分が反映されません。
発生している問題・エラーメッセージ
デベロッパーツールのコンソール上に表示されています。
ERR_ABORTED 404 (Not Found)
該当のソースコード
htmlファイル
<!doctype html> <html lang="ja"> <head> <title>Hello, world!</title> <!-- Required meta tags --> <meta charset="utf-8"> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/base.css"> </head> <body> <div class="header"> <div class="header-list"> <ul> <li>グループ一覧</li> <li>グループ作成</li> <li>ユーザーログイン</li> </ul> </div> </div> </header> {% block content %} {% endblock %} </body> </html>
base.css
li { float: left; }
確認したこと・試したこと
・ディレクトリ構成とcssファイルのコードが正しいこと、ファイル名が正しいことを確認しました。
・文字コードが「utf-8」であることを確認しました。
・デベロッパーツールでSourcesを確認し、cssファイルが読み込めていることを確認しましたが、ツール上ではcssファイルに記載がありませんでした。
・デベロッパーツールのSourcesにbase.cssの内容を記載したところ、反映されました。
・htmlファイルをダブルクリックしたところ、base.cssが反映された表示となりました。
補足情報（FW/ツールのバージョンなど）
Djangoを利用しています。
CSS ファイルのレスポンスヘッダの Content-Type をご提示いただけますか？
また、Django の静的ファイルの設定もご提示ください。（STATICFILES_DIRSなど）
m.ts10806様
ご指摘ありがとうございました。
解決済みですが、検索者がわかりやすいよう、Djangoタグを追加し、ディレクトリ構成を解決方法に記載しました。初心者なのでご指摘ありがたいです。
Lhankor_Mhy様
ご質問ありがとうございました。
貴方の質問をヒントにドキュメントを確認し修正できました。
ご解決されて何よりです。
回答2件
0
自己解決
Lhankor_Mhy様の質問文から、staticフォルダの作成が必要なことが分かったので、下記のように修正したら想定通りの動作をしました。
■ファルダ構成
修正前
application/templates/aplication/htmlファイル
└css/base.css
修正後
application/templates/aplication/htmlファイル
└static/aplication/base.css
■htmlファイル
修正前
<link rel="stylesheet" type="text/css" href="css/base.css">
修正後
{% load static %} <link rel="stylesheet" type="text/css" href="{% static 'aplication/base.css' %}">
ご質問やご回答をくださった方、誠にありがとうございました。
投稿2019/10/07 15:19
編集2019/11/20 15:06総合スコア7
0
CSSのパス指定をhttpから始まるURLに変更してみてください。
投稿2019/10/07 03:45
総合スコア69596
あなたの回答
tips
プレビュー
