Q&A
> うまくHTMLとCSSの紐付けができません。
具体的にどのような不具合が発生しているか教えていただけませんか？
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
atomを利用してとあるLPサイトの模写を行なっています。
発生している問題・エラーメッセージ
うまくHTMLとCSSの紐付けができません。
該当のソースコード
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>flower</title> </head> <body>stylesheetの名前は合っています。
HTMLとCSSは同じフォルダ内に入っています。
試したこと
youtubeやgoogleなどで調べてみましたが、その通りにしても反映されません。
補足情報（FW/ツールのバージョンなど）
<body>の中身は書いていないのですか？
atomでプレビューを行なっても、CSSが反映されていない状態です。
bodyの中身も一通り書いています！載せたら長くなると思い載せていないのですが、お答えくださるのに必要でしたら追加で載せさせて頂きます。
省略されるよりマシです。
長さが気になるようなら現象が再現する最小限のコードを改めて作ることです（「質問するときのヒント」参照）
いずれにしてもこの系統は質問としては頻出ですし、そんな多様な原因はありません。
<body>
<div class="main">
<div class="container">
<div class="top-wrapper">
<h1>かわいいが届くお花便</h1>
<p>*北海道、沖縄、離島エリアは現在対象外です</p>
</div>
</div>
<div class="container">
<div class="point-wrapper">
<div class="contents">
<h3>届くのは
</br>あなた好みのお花だけ</h3>
<p>FLOWERのお花は季節やトレンドに</br>合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回</br>好きなものが選べます。</p>
</div>
<div class="contents">
<h3>お花はポストに投函</br>忙しくても大丈夫</h3>
<p>お花は専用BOXに入れてポストに直</br>接お届け。不在で受け取れなくても</br>安心して使えます。</p>
</div>
<div class="contents">
<h3>FLOWERなら</br>いつも可愛く飾れる</h3>
<p>専用の花器を使うと、届いたお花を</br>さっと生けるだけでかわいい空間の</br>出来上がり。
お花のある暮らしがも</br>っと楽しくなります。</p>
</div>
</div>
</div>
.main {
width:1780px;
height:2000px;
}
.top-wrapper {
color: white;
text-align: center;
}
.top-wrapper h1 {
font-weight:18px;
color: green;
}
.point-wrapper {
height:777px;
}
.contents h3 {
font-weight: 220px;
color: white;
}
.contents p {
font-weight: 15px;
}
です。
改めて自分で短いコードを作ってみると読み込みはできました。
ですが、なぜこれが読み込めないのかが不思議で。。、
質問は編集できます。追記してください。
また、コードはマークダウンのcode機能を利用してご提示ください。
あと、atomでファイルを編集しているのですが、CSSを変えてもすぐに反映されません。少し時間がかかるものでしょうか？
話がかみ合ってませんが、コードの追記は質問本文にしてください。
コメント欄に投稿してもデフォルト非表示なので目につきにくいですし、
マークダウンが使えないので読みづらいのです。
キャッシュの問題です。
Windows Chrome系なら
Ctrl + Shift + R
かしこまりました。
ありがとうございます。
なんとか解決致しました。ご回答ありがとうございます。
まだ「受付中」になっています。
https://teratail.com/help/question-tips#questionTips4
回答1件
0
ベストアンサー
うまくHTMLとCSSの紐付けができません。
これはCSSが読み込まれていないのか、読み込んだあとにCSSの内容が反映されないのかどちらでしょうか？
何となくですがケアレスミスな気がします。
サンプルですがこちらをそれぞれ test.html と style.css で同じフォルダに保存して
test.htmlをATOM経由で開いても駄目でしょうか？
HTML
1<html> 2<head> 3 <title>TEST</title> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="style.css"> 6</head> 7<body> 8 <div id="test">TEST</div> 9</body> 10</html>
CSS
1#test { 2 color: red; 3}
追記
自分の環境で共有されているHTMLとCSSを反映したり少し設定変えてみました。
最新版のATOMを入れてそこのパッケージ→HTML Previewer機能で表示しています。
反映速度はそんなに遅くないような・・？
投稿2020/05/03 06:49
編集2020/05/03 07:20
総合スコア349
ご回答ありがとうございます。
送って下さったものを読み込んだところ、きちんと反映されていました。
CSSの紐付けするタイミングが悪かったということでしょうか？？
CSSのタイミングとは考えづらいかなと思っています・・。
ちなみにもう一度問題のある方のHTMLを読み込んだらどうなりますか？
これでCSSが反映されないのであればCSSとHTML側に問題があるのかなと思います。
ありがとうございます。
新しく作ってみたものを読み込んだらできました。ご回答ありがとうございました。
あなたの回答
tips
プレビュー
