Q&A
コードすら試してないのに「反映されない」のは当然では。
この内容では「コード書いてないのに何か言ってる」状態です。
自身のコードを提示してください。
ただ、この手の問題は頻出です。質問作っている労力を過去質問の調査に充てた方が解決すると思いますけど。。
再現できる情報がないと何もアドバイスはできません。考え方を書いている過去質問の回答の紹介のみになります。自分で探したほうが早いという意味です
前提・実現したいこと
html,cssをつかってvscodeでホームページ制作中です。
ブラウザ（chrome）でプレビューを表示した時に
cssで入力したデザインが反映されるようにしたいです。
発生している問題・エラーメッセージ
HTMLでは<!DOCTYPE html>
<html> <head> <meta charaset="utf-8"> <title>KYS</title> <link rel="stylesheet" href="css/test.css"> </head> <body>このようにcssの表示を設定していて、
cssでは
body{
font-family: "Avenir Next";
}
li{
list-style: none;
}
.header{
background-color: sienna;
color: beige;
height: 90px;
}
のように入力しています。
（両方続きの内容も書いています。）
ですが chromeに表示した時に、
cssが反映されず
白黒の文字が表示されるだけです。
該当のソースコード
試したこと
HTML内でのcss設定コード？のようなものを調べ、
<link ref="stylesheet" href="test/css/test.css">このような文字列に変えてみましたが、変化はありませんでした。
補足情報（FW/ツールのバージョンなど）
mac book pro を使用しています
初心者って、何に対する初心者ですか？ teratailが不慣れであれば、若葉マークを質問につけることもできます。技術の習得レベルであれば初心者ってだけじゃさっぱりわかりません伝わりません。VisualStudioCodeとGoogle ChromeとMacとどうなにをしようとしているのか、丁寧に説明してください。
質問は編集できます。
「タイトルには要件を書きましょう」というのがガイドラインにあります。
https://teratail.com/help/question-tips#questionTips3-1
「初心者」は要件ではないですよね。
>ありがちな失敗としては、「助けてください」「初心者です」という表題をつけてしまうことです。
これでは質問ページを開いて本文を読むべきかどうかを判断する情報が何も含まれていません。
「初心者」を主張する場合は「初心者マーク」をつけましょう。
質問編集画面のタイトルの左側にあります。クリックすると活性化されます。
ご回答ありがとうございます。
説明不足です。申し訳ありません。
コードはこのように書いています。
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ABC</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
続く
CSS
body{
font-family: "Avenir Next";
}
li{
list-style: none;
}
.header{
background-color: sienna;
color: beige;
height: 90px;
}
続く
といったような形です。
アドバイス通り自分でも過去検索をしてみます。
もし解決法がわかりましたら、ご回答いただけると助かります。
ご回答いただいた部分を改善し、再投稿しました。
宜しければそちらもご回答いただけるとありがたいです。
↓こちらがURLです。
https://teratail.com/questions/240584
質問の再編集ができるのですけど（●｀ε´●）
となるのを防ぐため、私コメントで「質問は編集できます。」と書いたのですけど。こちらはそこにあるように「質問への追記・修正の依頼」をしているわけでして。
御二方さまざまな御指摘ありがとうございます。
編集しましたのでよろしければご回答お願いいたします。
ひとまず、コードはマークダウンのcode機能を利用してご提示ください。
（ここができてないと回答得られる確率落ちます）
https://teratail.com/questions/238564
あと、提示のHTMLでは現象再現できません（対象の要素がないから）
「続く」と省略するのではなく、「コピペで状況が再現できるコード」を提示してください。
回答1件
0
ベストアンサー
基本的にすべてのファイル・コードを共有したほうが良いと思いますよ。
問題と関係あるかないかを自分で判断しないほうがよいです。
関係ないだろうと思っていても、そこが重要なポイントであったりしますので。（自分も時々やってしまいます）
現状わかる範囲での確認するポイントとして思いつくのは以下2点です。
①hrefに書いた場所に対象のファイルがあるかどうか確認
<link ref="stylesheet" href="test/css/test.css">
htmlファイルから「見て」、hrefに書いた場所にtest.cssがあるか？
↓の画像のような場所にtest.cssがないと読み込まれません。
html css読み込み パスとかで調べると理解しやすいかもしれません。
↓参考サイト
【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！
②htmlファイル内にheaderクラスがあるか？
CSSに書いた、プロパティを適用する対象がなければ反映されません。
html
1<header class="header"></header>
とか、
html
1<div class="header"></div>
のようにheaderクラスをもつ要素を追加してみてください。
大変だと思いますが、めげずに頑張ってみてくださいね。
投稿2020/02/13 04:17
総合スコア122
試しにコードを一から書き直すとcssが反映されるようになりました。
丁寧に説明していただきましたのでベストアンサーとさせていただきます。
皆さん様々なご指摘ありがとうございました。
あなたの回答
tips
プレビュー
