現在、ウェブ制作の勉強をしています。
しかし、
HTMLとCSSがつながりません。
どうしてでしょうか?
<HTMLコード>
<!DOCTYPE html> <html> <head> <title>test1</title> <link rel="stylesheet" href="test1.css"> </head> <body> <div class="title"> <h1>Cafe~clover~</h1> </div> <ul> <li>ホーム</li> <li>お知らせ</li> <li>お問い合わせ</li> </ul> <h2>おすすめのメニュー</h2> <h3>本日のパスタ</h3> <img src="https://i.pinimg.com/originals/ec/15/05/ec15052dbbc3cb3cc1561d3d6222c32f.jpg"> <p>旬の食材を生かして、当店一番の人気メニューです。</p> <p>ランチタイムだけでなく、カフェタイムにも注文いただけます。</p> <p>900円(税別)</p> <a href="#">ご予約はこちらから</a> </body> </html><CSSコード>
.title h1{
font-weight:bold;
color:#663300;
}
コードはマークダウンの機能を利用してご提示ください。
https://teratail.com/questions/238564
また、この手の問題は原因も対策もほぼ出尽くしています。
何かしら調べたり試したりされましたか?具体的に記載してください。
エディタは何をお使いですか? 実はファイル名が test1.css.txt とか…。
サブライムテキスト を使っています!
(2回目)コードはマークダウンの機能を利用してご提示ください。
https://teratail.com/questions/238564
CSSが適用されない場合は、以下の通りです。
1.リンク先が間違えている
特によくあるのがCSSファイル名のスペルミスです。もしスペルが間違えている場合は、修正することで解決できることがあります。またフォルダ内(例えば、フォルダ名がCSSの場合)にCSSがある場合、適用されません。その場合は、 <link rel="stylesheet" href="./css/test1.css">で解決することがあります。
2.ブラウザをキャッシュ
もしスペルが一致しているのに、CSSが適用されない場合、ブラウザのキャッシュが溜まっている可能性があります。縦3つの…から設定を開く→履歴のメニューから履歴を開く→閲覧履歴の削除を開く→履歴の削除のポップアップ画面が出るので、データを削除を選ぶ。(履歴を削除したくない場合やパスワードごとも削除したくない場合は、Chromeの場合、キャッシュされた画像とファイルとCookieとほかのサイトデータにチェックを入れる。(Googleアカウントへのログイン状態は削除されることはありません。Google以外のアカウントのログイン状態は削除される可能性があります。不安な場合は、キャッシュされた画像とファイルのみにチェックを入れてください。))→ブラウザを再起動する。(Chromeの場合)
これで解決できることがあります。
3.パソコンを再起動
それでも解決できない場合は、パソコンを再起動しましょう。これによりブラウザに発生したエラーが解決することがあります。以下の手順です。
Windowsの場合:Windowsのロゴ(スタート🪟)をクリック。→電源アイコンをクリック。→再起動をクリック。これで再起動がかかります。
Macの場合:左上のAppleのロゴ(🍎)をクリック。→再起動をクリック。→再起動をするかのダイヤログウィンドウが出てくるので、再起動をクリック。これで、再起動がかかります。
Linux(例:Ubuntu)の場合:右上の歯車(⚙)をクリック。→一番下のシャットダウンをクリック。→シャットダウンのダイヤログウィンドウが出てくるので、左の再起動クリック。これで再起動がかかります。
ChromeOSの場合:右下の時計をクリック。→電源をクリック。表示されたオプションから再起動をクリック。これで再起動がかかります。
4.別のブラウザを利用
もしブラウザがChromeの場合は、edgeやSafariなどのブラウザで試してください。ただし、ブラウザによっては、対応していない機能があるので、注意してください。
5.シークレットウィンドウ(ゲストモード)を利用
シークレットウィンドウでは、ブラウザやログイン情報を保存されることはありません。ブラウザを開く→3つの…をクリック→新しいシークレット ウィンドウを開くをクリックします。すると、シークレットウィンドウが開くはずです。(Chromeの場合)
これでCSSが適用されるはずです。
それでも問題が解決しない場合は、再度返信へお知らせください。