Q&A
お世話になっております。
プログラミングを勉強中の者です。
HTMLとCSSで自分で試しに作ってみたサイトをエックスサーバーにあげようとしたところ、HTMLだけが反映されており、CSSが反映されません。
行ったこと
・HTML内のコードの確認
・ウェブのキャッシュの削除
・サーバー側にキャッシュの削除
全て行ったのですが、CSSだけどうしても反映されません。
エックスサーバーにも問い合わせをしてみたのですが、コードに誤りがあるとの回答でした。
しかし、VScodeからウェブに読み込ませたときには、CSSはしっかり反映されています。
サイトのアドレス『http://masaya-portfolio.com/』です。
もしCSSに誤りがあれば、教えていただければ幸いです。
もう試す手段がなくなったため、質問させていただきます。
お手数をお掛けして申し訳ありませんが、宜しくお願い致します。
（※プログラミングを始めてまだ20日のため、コードの汚さはご容赦ください。）
文字数の制限があるため、コードの途中は省いております。
よろしくお願い致します。
HTML
1<!DOCYTYPE> 2 3<html lang="ja"> 4<head> 5<link rel="stylesheet" href="css/style.css"> 6<link rel="stylesheet" href="css/responsible.css" media="screen and (max-width: 450px)"> 7<meta charset="utf-8"> 8<meta name="viewport" content="width=device-width, initial-scale=1.0"> 9<title>Myportfolio</title> 10</head> 11<body> 12 13 <div class="container"> 14 15<!-- --------------Header----------------- --> 16 17 18 19 <header class="header"> 20 <div class="sp-menu"> 21 <input type="checkbox" id="nav-input" class="nav-invisible"> 22 <label id="nav-open" for="nav-input"><span></span></label> 23 <nav class="nav-contents"> 24 <ul> 25 <a href="#works"> 26 <li class="sp-menu-list"> 27 Works 28 </li> 29 </a> 30 <a href="about.html"> 31 <li class="sp-menu-list"> 32 About 33 </li> 34 </a> 35 <a href="#contact"></a> 36 <li class="sp-menu-list"> 37 Contact 38 </li> 39 </a> 40 </ul> 41 </nav> 42 </div> 43 44 45 <div class="h-1"> 46 <h1 class="h-h1"><a href="about.html#about" class="h-h1-top">MASAYA TANAKA</a></h1> 47 <nav class="h-nav"> 48 <ul> 49 <li><a href="#services">Services</a></li> 50 <li><a href="#works">Works</a></li> 51 <li><a href="about.html">About</a></li> 52 <li><a href="#contact">Contact</a></li> 53 </ul> 54 </nav> 55 </div> 56 </header> 57 58<!-- -----------------------Main---------------------- --> 59 60 61<!-- ------------------------Service-------------------------- --> 62 63 64 <main class="main"> 65 <section> 66 <h2 class="m-h2" id="services">SERVICES</h2> 67 <nav class="m-nav"> 68 <ul class="m-ul"> 69 70 71 <li class="m-li"> 72 <div class="m-option"> 73 <div class="description"> 74 <h3> 75 <a href="" class="m-a"> 76 ホームページ作成 77 </a> 78 </h3> 79 </div> 80 <div class="m-img"> 81 <img src="pen.jpg" class=m-img> 82 </div> 83 <p class="m-p-bottom"> 84 Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. 85 </div> 86 </li> 87 88 <li class="m-li"> 89 <div class="m-option"> 90 <div class="description"> 91 <h3> 92 <a href="" class="m-a"> 93 コーディング代行 94 </a> 95 </h3> 96 </div> 97 <div class="m-img"> 98 <img src="pen.jpg" class=m-img> 99 </div> 100 <p class="m-p-bottom"> 101 Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. 102 </div> 103 </li> 104 105 <li class="m-li"> 106 <div class="m-option"> 107 <div class="description"> 108 <h3> 109 <a href="" class="m-a"> 110 動画編集 111 </a> 112 </h3> 113 </div> 114 <div class="m-img"> 115 <img src="pen.jpg" class=m-img> 116 </div> 117 <p class="m-p-bottom"> 118 Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. Smaple. 119 </div> 120 </li> 121 122 123 </ul> 124 </nav> 125 </section> 126 127 128 </section> 129 130 131 132 133</body> 134</html>
css
1body{ 2 margin:0; 3 color: #555555; 4 font-family: 'Gulim','arial unicode ms','arial narrow',sans-serif; 5} 6 7/* ----------header--------- */ 8 9 10.header{ 11 background-image: url(../h-img.png); 12 background-size: cover; 13 height: 500px; 14 position: relative; 15} 16 17 18.h-1 h1 { 19 margin: 0; 20 text-shadow: 5px 6px 5px #aaa; 21 position: absolute; 22 top: 10%; 23 left: 5%; 24 font-size: 37px; 25} 26 27.h-h1 { 28 position: relative; 29 display: inline-block; 30 text-decoration: none; 31} 32.h-h1::after { 33 position: absolute; 34 bottom: -4px; 35 left: 0; 36 content: ''; 37 width: 100%; 38 height: 4px; 39 background: #555; 40 transform: scale(0, 1); 41 transform-origin: left top; 42 transition: transform .8s; 43} 44.h-h1:hover::after { 45 transform: scale(1, 1); 46} 47 48.h-nav ul{ 49 position: absolute; 50 right: 5%; 51 top: 10%; 52 margin: 0; 53 display: flex; 54 background-color: rgba( 255, 255, 255, 0.45 ); 55 text-align: center; 56 padding: 0; 57} 58 59.h-nav ul li{ 60 list-style: none; 61 padding: 15px 20px; 62 font-size: 20px; 63 font-weight: bold; 64 color:#555; 65} 66 67 68.h-h1 a{ 69 text-decoration: none; 70 padding-top: 10px; 71 color:#555; 72} 73 74.h-nav a{ 75 text-decoration: none; 76 padding-top: 10px; 77 color:#555; 78} 79 80 81.h-nav li a{ 82 position: relative; 83 display: inline-block; 84} 85 86.h-nav li a::after{ 87 position: absolute; 88 content: ''; 89 width: 100%; 90 height: 2px; 91 bottom: 2px; 92 left: 0; 93 visibility: hidden; 94 background: #555; 95 transition: .5s; 96 opacity: 0; 97} 98 99.h-nav li a:hover::after{ 100 visibility: visible; 101 bottom: -4px; 102 opacity: 1; 103} 104 105 106 107.h-img{ 108 max-width: 100%; 109 height: auto; 110 opacity: .5; 111} 112 113 114/* ----------index.main--------- */ 115 116.main{ 117 max-width: 85%; 118 margin: 100px auto 0px auto; 119 text-align: center; 120} 121 122.m-h2{ 123 font-size: 30px; 124 margin-bottom: 60px; 125 margin-top: 10px; 126 padding-top: 0; 127} 128 129.m-h2 { 130 display: flex; 131 align-items: center; 132 } 133 134 .m-h2:before, 135 .m-h2:after { 136 border-top: 2px solid; 137 content: ""; 138 flex-grow: 1; 139 } 140 141 .m-h2:before { 142 margin-right: 1rem; 143 } 144 145 .m-h2:after { 146 margin-left: 1rem; 147 } 148 149 150.m-nav{ 151 margin-top: 50px; 152 justify-content: space-between; 153} 154 155.m-ul{ 156 padding: 0; 157 display: flex; 158} 159 160.m-li{ 161 list-style: none; 162 163} 164 165.m-a{ 166 text-decoration: none; 167 color: #333; 168} 169 170.m-img{ 171 width: 65%; 172 height: auto; 173 border-radius: 50%; 174 text-align: center; 175 display: inline-block; 176} 177 178 179 180.m-option{ 181 display: inline-block; 182} 183 184.m-p-bottom{ 185 width: 80%; 186 margin: 30px auto; 187} 188 189 190 191.nav-invisible{ 192 display: none; 193} 194 195.sp-menu-list{ 196 visibility: hidden; 197} 198
回答2件
0
<link rel="stylesheet" href="css/style.css">
この部分、 http://example.com/css/style.css を読み込みにいってるんですが、確認してみるとこのファイルは存在せず、代わりにhttp://example.com/style.cssが存在しています。本番環境に置いたときにディレクトリ構造が間違ったものになってしまっているように見受けられます。
（ドメインは念のためexample.comに書き換えてます）
投稿2020/04/24 11:56
総合スコア2413
0
ベストアンサー
http://masaya-portfolio.com/css/style.cssだと404エラーになっています。
http://masaya-portfolio.com/style.cssは表示されています。
サーバの中で、「css」ディレクトリに「style.css」というファイルがアップロードされておらず、
HTMLファイルと同じ階層にアップロードされてしまっているようです。
↑がよくわからない場合、取り急ぎ
HTML側を以下のように書き換えるとサーバ上では表示できると思います。
HTML
1<link rel="stylesheet" href="style.css"> 2<link rel="stylesheet" href="responsible.css" media="screen and (max-width: 450px)">
投稿2020/04/24 12:02
編集2020/04/24 12:41
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。