Q&A
HTMLは質問文にある2行だけですか? style.css の内容は? 期待される描画結果と実際の描画結果は?
前提・実現したいこと
CSSのシートを反映させたいです。
該当のソースコード
<title>写経用コード</title> <link rel="stylesheet" href="style.css">試したこと
キャッシュクリア
スペルや階層の確認
補足情報（FW/ツールのバージョンなど）
質問の仕方が悪く申し訳ありません。
このサイトのヘッダー部分をコーディングしようとしています。
自分の描画結果はCSSが反映していない状態です。
以下、全文掲載いたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-08"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>写経用コード</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <!------------------------- 11 * ヘッダー 12 ---------------------------> 13 14<header> 15 <div class="inner"> 16 <h1>株式会社Practice</h1> 17 <nav> 18 <ul> 19 <li>ABOUT</li> 20 <li>NEWS</li> 21 <li>WORKS</li> 22 <li>ACCESS</li> 23 <li>CONTACT</li> 24 </ul> 25 </nav> 26 </div> 27</header> 28</body> 29</html>
css
1@charset "utf-8"; 2 3/* ーーーーーーーーーーーーーー 4全体構造 5ーーーーーーーーーーーーーー */ 6 7html { 8 margin: 0; 9 padding: 0; 10} 11 12body { 13 margin: 0; 14 padding:0; 15 color: #4a4a4a; 16 line-height: 1.5; 17 background-color: #fff; 18} 19 20h1,h2,h3,h4 { 21 margin: 0; 22 padding: 0; 23 font-weight: bold; 24} 25 26h1 { 27 font-size: 24px; 28} 29 30h2 { 31 font-size: 28px; 32 text-align: center; 33} 34 35h3 { 36 font-size: 18px; 37 text-align: center; 38} 39 40p, a { 41margin: 0; 42padding: 0; 43font-size: 18px; 44color: #4a4a4a; 45} 46 47a { 48 text-decoration: none; 49} 50 51a:hover { 52 opacity: 0.7; 53} 54 55ul { 56 padding: 0; 57 margin: 0; 58} 59 60li { 61 list-style: none; 62} 63 64.inner { 65 padding: 70px 50px; 66 max-width: 980px; 67 margin: 0 auto; 68 text-align: center; 69} 70 71.line { 72 background-color: #4a4a4a; 73 width: 55px; 74 height: 1px; 75 margin: 30px auto 60px; 76} 77 78/* ------------------------- 79 * ヘッダー 80---------------------------- */ 81 82header { 83 height: 10vh; 84 background-color: #343a40; 85 color: #fff; 86} 87 88header .inner { 89 display: flex; 90 justify-content: space-between; 91 align-items: center; 92 padding: 0 20px; 93 height: 100%; 94 max-width: 980px; 95 margin: 0 auto; 96} 97 98header ul { 99 display: flex; 100} 101 102header li { 103 padding: 0 20px; 104}
どの環境で読み込みしてますか？
読み込みをやっているindex.html,style.cssの詳細を記載してください
CSSの方に間違いがある可能性も高いので、HTML、CSSのソースを全文掲載頂けると助かります。
（追記）いただいた情報を見る限り、HTMLの方は問題なさそうです。
追記ありがとうございます。ただ、CSSが全文ないため判断できませんし、画像を添付いただいてもこちらで再現するのは困難です。（画像を見ながら文字を手打ちしなければならないので）
CSSを「全文」、テキストで提示いただけますでしょうか？？
※CSSは、「どこか一か所でも」文法が間違っていると適用されません。
更に追記いただきありがとうございました。言葉足らずだったのですが、HTMLも全文いただけますか？（CSSの文法はあっていそうです）
あと、具体的にどの要素がどうなってほしいのか教えていただけると助かります。「CSSのシートが読み込まれていない」のではなく、「あなたが意図した表示になるようなCSSを書けていない」可能性が出てきました。
※ソースコードを書くときは、前後を「```」で囲っていただけると読みやすくなります。
回答1件
0
ベストアンサー
提示いただいたソースコードを、手元で再現してみました。
こちらでは正しく表示されているように見えます（画像をご参照ください）
原因は分かりませんが、
- ファイルは保存されているか
- ブラウザで表示しているファイルは正しいか
確認されてみてください。
（追記：Shift+F5で強制リロードしてみるのもよさそうです）
投稿2021/06/07 14:38
編集2021/06/07 14:43総合スコア587
ありがとうございました！できました！
ファイルが保存されていなかったようです。
自動保存の設定になっているので勝手に保存されていると思っていましたが、今朝VSコードを開いたら上書きするか別ファイルにするかのポップアップが表示され、上書きしたら反映されました。
初心者なので大変助かりました。改めてありがとうございます！
あなたの回答
tips
プレビュー
