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

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

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

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

Q&A

解決済

3回答

7004閲覧

IISのローカル環境でCSSが適用されない

Seiten_Minagawa

総合スコア58

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

VB.NET

Microsoft Visual Basic .NETのことで、Microsoft Visual Basic(VB6)の後継。 .NET環境向けのプログラムを開発することができます。 現在のVB.NETでは、.NET Frameworkを利用して開発を行うことが可能です。

0グッド

1クリップ

投稿2018/08/30 12:35

編集2018/08/30 13:50

前提・実現したいこと

ASP.NET、VB.NETを使ったWebアプリケーション。
CSSを使って、Labelなどを装飾したい。

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

IISを使用したローカル環境に限り、CSSが適用されない。(Firefox、Google Chromeで確認)
Microsoft Azureに発行し公開したもの、Visual Studioから起動した場合は、CSSが適用されている。

該当のソースコード

「style.css」は同一のディレクトリに存在している。

ASP.NET

1<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="(ファイル名).aspx.vb" Inherits="(ソリューション名).(ファイル名)" %> 2 3<!DOCTYPE html> 4 5<html xmlns="http://www.w3.org/1999/xhtml"> 6<head runat="server"> 7<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 8 <link rel="stylesheet" href="style.css" type="text/css" /> 9 <title></title> 10</head> 11<body> 12    <!--ここにLabelなどが書かれている--> 13</body> 14</html> 15

CSS

1body 2{ 3 background-color:black; 4 color:white; 5} 6 7.box 8{ 9 width:400px; 10 text-align:right; 11} 12 13.rightalign 14{ 15 text-align:right; 16} 17 18.player1 19{ 20 color:deepskyblue; 21} 22 23.player2 24{ 25 color:red; 26} 27 28.player3 29{ 30 color:lime; 31} 32 33.player4 34{ 35 color:yellow; 36} 37

試したこと

linkのhrefの「style.css」の前に、「./」を付けたりした(逆にエラーが発生し、動作しなくなった)。
フォルダの共有設定で、「Everyone」に読み込み権限を付与した。

補足情報(FW/ツールのバージョンなど)

OSはWindows10 Pro。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/08/30 14:20

ブラウザのキャッシュは?
Seiten_Minagawa

2018/08/30 14:24

ブラウザのキャッシュの削除を試してみましたが、効果はありませんでした。
Seiten_Minagawa

2018/08/30 14:26

また、CSSファイルのサイズは300バイト程度になっていますが、「ディスク上のサイズ」が0バイトになっていました。これは何か違うのでしょうか?
退会済みユーザー

退会済みユーザー

2018/08/30 14:30

ブラウザのキャッシュを消したあと Fiddler で見てください。
退会済みユーザー

退会済みユーザー

2018/08/30 14:32

あと、href="style.css" というのはダメです。考えましょう
退会済みユーザー

退会済みユーザー

2018/08/30 14:55

もう一つ「IISのローカル環境」とのことですが、アクセス権の問題かも。users に読み取り権限はありますか?
Seiten_Minagawa

2018/08/30 14:58

「Everyone」に読み取り権限を与えていますが、「users」とはまた違ったものなのでしょうか?
退会済みユーザー

退会済みユーザー

2018/08/30 15:02 編集

知りません。everyone とか考えてこともないので。前に言った Fiddler で見てみましたか? 要求・応答は正常ですか? 聞かれたことには答えてくれないと・・・
退会済みユーザー

退会済みユーザー

2018/08/30 15:05

href="style.css" というのはダメといいましたけど、そこ理解してますか?
Seiten_Minagawa

2018/08/30 15:09

Fiddlerで確認しましたがアクセスログと同様style.cssはResultが200でした。
Seiten_Minagawa

2018/08/30 15:10

ASP.NETを始めたばかり故、外部CSSファイルのパス指定をあまり理解していません。
Seiten_Minagawa

2018/08/30 15:14

Resultは200(リクエストが受理された)ですが、中身がないCSSファイルに化けている(?)ようです。
退会済みユーザー

退会済みユーザー

2018/08/30 15:15

> Fiddlerで確認しましたがアクセスログと同様style.cssはResultが200でした。 ←中身は見ましたか? 期待通りでしたか? F12 開発者ツールでどのようにスタイルが適用されているか見てみましたか?
退会済みユーザー

退会済みユーザー

2018/08/30 15:22

> 中身がないCSSファイルに化けている(?)ようです。 ←化けるなんてことはないはず。そもそもが中身がないのでは? そこを、質問する前に、ちゃんと調べてくれないと・・・
Seiten_Minagawa

2018/08/30 15:25

IPアドレスから見ると(192.168.x.x/(フォルダ)/style.css)中身がないCSSファイルになりますが、エクスプローラでアクセス(wwwroot/(フォルダ名)/style.css)して別のエディタ(メモ帳、Crescent Eveなど)で見ると正常に中身が書き込まれています。
退会済みユーザー

退会済みユーザー

2018/08/30 15:30

もう一回だけ言います。href="style.css" というのはダメといいましたけど、そこ理解してますか?
Seiten_Minagawa

2018/08/30 15:32

申し訳ないですがあまり理解していません。リンク先を読んで考えうるパスのパターンを試しましたが、うまくいきません。
Seiten_Minagawa

2018/08/30 15:34

例えば、「../style.css」「/(フォルダ)/style.css」「~/(フォルダ)/style.css」です。
liveasnotes

2018/08/30 15:38

適当にやってもダメです.パスの指定はWeb系でなくてもほぼ避けて通れない部分です.cf.「絶対パス、相対パス、ルートパスの違いってなに?メリット・デメリットは?」(https://fastcoding.jp/blog/all/frontend/path/)
退会済みユーザー

退会済みユーザー

2018/08/30 15:47

今頃話が戻って何ですか「IISを使用したローカル環境に限り」と「Microsoft Azureに発行し公開した」と違いますよね? どういうこと?
退会済みユーザー

退会済みユーザー

2018/08/30 15:49

> CSSファイルのサイズは300バイト程度になっていますが、「ディスク上のサイズ」が0バイトになっていました。 ←これは何を見たのですか?
Seiten_Minagawa

2018/08/30 16:06 編集

以前に外部CSSファイルを使ったASP.NETで制作したWebアプリをMicrosoft Azureに向けて発行したものは質問で挙げたaspxのソースのパス指定でもCSSが反映されたのですが、IISを使ったローカル環境だとこのパス指定ではCSSが反映されない模様です。
Seiten_Minagawa

2018/08/30 16:04

ディスク上のサイズはファイルのプロパティ(右クリックメニューで出せるもの)で確認しました。
guest

回答3

0

ベストアンサー

IISの「静的なコンテンツ」は有効になっていますか?

Windows の機能の有効化または無効化 > インターネット インフォメーション サービス > World Wide Web サービス > HTTP 共通機能 > 静的なコンテンツ

投稿2018/08/30 21:38

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Seiten_Minagawa

2018/08/31 01:04 編集

この回答で解決したので取り急ぎベストアンサーを決定しましたが、後程皆さんへコメントさせていただきます。
退会済みユーザー

退会済みユーザー

2018/08/31 01:44

IIS の「静的なコンテンツ]を有効にする前でも 200 応答だった、ただしコンテンツ(css ファイルの中身本体)は無かったということでしょうか?
hope_mucci

2018/08/31 02:49

実際確認してみました。静的コンテンツを無効にするとhtmlもcssも200OK、content-length:0で返ってきました。なにこの挙動… ともあれ、解決できてよかったです。ただ、普通このチェックはいじりませんよねぇ…
Seiten_Minagawa

2018/08/31 03:03

「静的なコンテンツ」をオフにしていても200応答でしたが、コンテンツがない状態でした。 そもそもIISを有効化する際に設定を間違えていた模様です。 回答してくださった皆様、お騒がせして申し訳ございませんでした。
退会済みユーザー

退会済みユーザー

2018/08/31 03:17

hope_mucci さん、Seiten_Minagawa さん> 連絡をありがとうございました。IIS ではそういうことになるというのは知りませんでした。おかげさまで一つ利口になりました。 HTTP 200 が意味するのは "リソースがフェッチされメッセージのボディ部で返送された" ということだと思っていたのですが・・・ https://developer.mozilla.org/ja/docs/Web/HTTP/Status/200
guest

0

headstyleで直接CSSを書き込んでも反映されませんか?

html

1<head> 2 <style> 3 body{ 4 background-color:black; 5 color:white; 6 } 7 </style> 8</head>

もしキャッシュの問題であれば,クエリ文字列(「?~~」)の追加でも,キャッシュをキャンセルできます(ブラウザが別ファイルだと勘違いしてくれるらしいです)

html

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

短期間で定期的にCSSをいじりそうなときはこれを思い出してください(今回は関係ないようですが)


直接書き込むとCSSは反映されます

直接書いたCSSが効くということは,CSSそのものの記述自体の問題でないことは検証できたと思います

それでも記載内容が間違っているとすれば,<link />の「/>」ではないでしょうか
linkタグは閉じタグ不要.
cf.HTML5におけるhtmlタグの開始・終了タグの基本的な書き方と閉じタグのいらない要素とは

また,xmlns="http://www.w3.org/1999/xhtml"はHTML5では不要らしいので,これもエラーの原因(ブラウザによるHTMLの解釈ミス?)になっているかもしれません
cf.<初心者向け>知っておきたいHTML5の基本【文書構造編】

投稿2018/08/30 15:18

編集2018/08/30 15:36
liveasnotes

総合スコア1284

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

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

Seiten_Minagawa

2018/08/30 15:21

直接書き込むとCSSは反映されますが、同じような指定をするページが何ページがあるために、この方法ではスマートではない気がするのです…… linkを使って、style.cssを読み込んでCSSを反映させたいです。
Seiten_Minagawa

2018/08/30 15:40

追記ありがとうございます。 Visual Studioの設定で「XHTML5」というものになっているらしく、閉じタグを外すと警告が出ます。 設定で「HTML5(Xが付かない)」に変更することは可能だと思いますが……
liveasnotes

2018/08/30 15:42

>設定で「HTML5(Xが付かない)」に変更することは可能 じゃあそうしましょう^^
Seiten_Minagawa

2018/08/30 16:01

HTMLソースをHTML5に即したものに変更しましたが、外部のCSSは読み込めませんでした……。 SurferOnWwwさんのご指摘通り、パスの指定に問題があるのかもしれません。
Seiten_Minagawa

2018/08/31 09:48

denchiさんへの回答にコメントした通りですが、そもそもIISの設定を間違えていたためにCSSが反映されなかった模様です。 お騒がせして申し訳ございませんでした。
guest

0

まずはIISのアクセスログを確認してみてください。
style.cssへのアクセスのステータスコードが何になっていますか?
200だったら記載内容の問題、404ならファイル配置やファイル名の問題と考えられます。
304だったらスーパーリロードを試してください。

チェックポイントとしては、

  • IISへ配置したstyle.cssの中身を確認
  • ファイル名を確認。正確にstyle.cssかどうか?

過去の質問で、拡張表示をオフにしていたため拡張子を二重につけてしまって気づかなかった人がいました。(style.css.cssみたいな)

投稿2018/08/30 13:11

hope_mucci

総合スコア4447

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

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

Seiten_Minagawa

2018/08/30 13:54 編集

ログを確認したところ200でした。 BOM付きのUTF-8になっていたのでそれが原因と思いBOMなしのUTF-8にしたのですが、問題は解決されませんでした。 CSSに直接アクセスしても何も出てきません。(URLの部分にview-sourceでCSSのパスを直接入力しても、何も書かれていない。別のエディタで見ると中身は書かれている) CSSに問題がある可能性があるので、CSSも掲載します。
hope_mucci

2018/08/30 22:03

補足読みました。とりあえずstyle.cssとは別のファイル名にした同じ内容のcssファイルをIIS外からコピーして(IIS配置のstyle.cssをコピーしない。これが大事)linkタグを修正してもう一度表示させてみましょう。これで表示がOKならstyle.cssファイルが破損している、表示できなかったらIISのMIMETYPE設定など、IIS側がおかしいのかもしれません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問