CSSが反映されない

前提

質問者は素人です。
専門用語の使い方が間違っている可能性があります。
何卒お許しください。

実現したいこと

htmlと同じ階層にCSSフォルダがあり、その中にuniq.cssが存在するのですがhtmlに反映されません。
パスの見直しても問題ないように思われ、原因が不明です。
何卒よろしくお願い致します。

階層

htmlの場所:/public_html/about/facility.html
uniq.cssの場所:/public_html/about/css/uniq.css

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<meta name="format-detection" content="telephone=no">
7<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
8<title></title>
9<meta name="description" content="">
10<meta name="keywords" content="">
11<link rel="shortcut icon" href="/cmn/cmn_img/favicon.ico">
12<link rel="stylesheet" href="/cmn/cmn_css/normalize.css" media="all">
13<link rel="stylesheet" href="/cmn/cmn_css/base.css" media="all">
14<link rel="stylesheet" href="/cmn/cmn_css/component.css" media="all">
15<link rel="stylesheet" href="/cmn/font-awesome/font-awesome.min.css" media="all">
16<link rel="stylesheet" href="/cmn/cmn_css/print.css" media="print">
17<link rel="stylesheet" href="/cmn/cmn_css/sp.css" media="all">
18<link rel="stylesheet" href="css/uniq.css" media="all">
19<!--[if lt IE 9]><script src="/cmn/cmn_js/html5shiv-printshiv.js"></script><![endif]-->
20<script src="/cmn/cmn_js/import.js"></script>
21<script src="/about/js/popup.js"></script>
22<!--UNIQ SCRIPT-->
23<!--/UNIQ SCRIPT-->
24<!--#include virtual="/cmn/include/googleanalytics.html" -->
25</head>
26<body>
27<div id="wrap">
28<!--#include virtual="/cmn/include/header.html" -->
29<!--▲▲/#HEADER ▲▲-->
30
31<!--#include virtual="/cmn/include/gnav.html" -->
32<!--▲▲/#GNAV ▲▲-->
33
34<div id="mv">
35<p class="cName"><span class="jp"></span><span class="en">about</span></p>
36</div>
37<!--▲▲/#MV ▲▲-->
38
39<div id="contents">
40<div id="main">
41<div id="mainInr">
42<h1 class="head01"></h1>
43<div class="basicFlt">
44<ul class="fltList clm3">
45<li><p class="pink bold center size18"></p> 
46<img class="popupBtn" src="images/facility01.jpg" alt="" onmouseover="this.src='images/facility01_1.png'" onmouseout="this.src='images/facility01.jpg'">
47  <div class="popup">
48      <video playsinline muted autoplay src="images/facility01.mp4" loop class="popup-content"></video>
49      <div class="btn-close">閉じる</div>
50  </div>  
51</li>
52</ul>
53</div>
54
55
56</div>
57<!--▲▲ /#MAINInr ▲▲--> 
58</div>
59<!--▲▲ /#MAIN ▲▲-->
60
61<!--#include virtual="/cmn/include/lmenu_category_about.html" --> 
62<!--▲▲ /#LMENU ▲▲--> 
63
64<br class="clear">
65</div>
66<!--▲▲/#CONTENTS ▲▲--> 
67
68<!--#include virtual="/cmn/include/footer.html" --> 
69<!--▲▲/#FOOTER ▲▲--> 
70
71<!--#include virtual="/cmn/include/spmenu.html" --> 
72<!--▲▲/#GNAVSP ▲▲--> 
73
74</div>
75<!--▲▲/#WRAP ▲▲--> 
76
77<!--#include virtual="/cmn/include/all.html" --> 
78<!--▲▲/#CONVERSION ▲▲-->
79
80</body>
81</html>

css
1@charset "UTF-8";
2/* CSS Document */
3
4#mv {
5    background: url(/about/images/mv.png) center top no-repeat !important;
6}
7
8
9
10.head01{
11	overflow: hidden;
12}
13
14.head01 p.year{
15	float: left;
16	margin-left:40%;
17	font-size: 1em !important;
18}
19
20.head01 p.day{
21	float: right;
22	margin-top: 20px;
23	font-size: 12px;
24}
25
26.popupBtn{
27	cursor: pointer;
28}
29
30.popup {
31	background-color: rgba(0,0,0,.7);
32	display: none;
33	position:fixed;
34	top: 0;
35	left: 0;
36	width: 100%;
37	height: 100%;
38}
39
40.popup-content{
41	width: 80%;
42	display: flex;
43	justify-content: center;
44	align-items: center;
45}
46
47.flex{
48	display: flex;
49	justify-content: center;
50	align-items: center;
51	flex-wrap: wrap;
52}
53
54.btn-close{
55	background: #000;
56	border-radius: 10px;
57	color: #E7656D;
58	padding: 10px;
59	margin: 10px;
60	width: 80%;
61	text-align: center;
62	cursor: pointer;
63	align-items: start;
64}
65
66
67
68
69@media only screen and (max-width: 750px) {
70.head01 p.year{
71	/* float: left; */
72	font-size: 1em !important;
73	margin-left:0px;
74}
75
76.head01 p.day{
77	float: right;
78	margin-top: 0px;
79}	
80	
81video {
82	max-width: 100%;
83}
84}
85
86

m.ts10806

2022/07/27 03:45

body{ background-color:red; } を入れた場合はどうなりますか？あと、cmnとは何でしょう？どういう環境で実装されているアプリケーションなのでしょうか。フォルダ構成も提示されたほうが良いと思います。

退会済みユーザー

2022/07/27 04:07 編集

url が間違っているとか、ブラウザのキャッシュの問題とか、CSS が間違っていて無効とかではないことは十二分に確認したのでしょうね？

行動規範の内容に同意します

回答2件

ベストアンサー

提示された構成と思われる画像にHTMLが表示されてないので何とも言えませんが、
他と同じようにフルパスで書いた方が良いでしょう。

/about/css/uniq.css
それでも反映されなければキャッシュクリア

強制するなら
/about/css/uniq.css?v=0001
※v=0001は適当につけたので、更新年月日とか何でも良いです。クエリストリングをつける。

また、先に書いたようにbodyに背景色をつけるなど明らかに視認できるような変化をつけて確認。

投稿2022/07/27 07:09

m.ts10806

総合スコア80850

t-o

2022/07/27 08:37

回答ありがとうございます。フルパスかつクリエを追加したところ反映されました。大変助かりました。

m.ts10806

2022/07/27 09:50

×クリエ〇クエリ QueryString　です。 https://e-words.jp/w/%E3%82%AF%E3%82%A8%E3%83%AA%E6%96%87%E5%AD%97%E5%88%97.html

行動規範の内容に同意します

階層が明記されていませんので、なんとも言えませんが

css
1<link rel="stylesheet" href="/css/uniq.css" media="all">

これで適用されると思うのですが、いかがでしょう。

投稿2022/07/27 03:53

kings_of_king12

総合スコア33

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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