Q&A
コードはマークダウンのcode機能を利用してご提示ください。
「リンクがおかしい」かどうかはブラウザの開発ツールで確認できます。
コンソールに404などそのファイルに対してエラーが出ているかどうかを見ます。
確認結果を質問本文に追記してください
HTMLからリンクしたCSSが反映されないです。おそらくリンクの時点でどこかおかしいのだと思います。回答よろしくお願いします。
コード ```<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Missing Link of Web Design</title> <link rel="stylesheet" type="text/stylesheet" href="screen_style.css" /> <!-- <link rel="stylesheet" type="text/stylesheet" href="css/screen__layout__large.css" /> <link rel="stylesheet" type="text/stylesheet" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screen__layout__small.css" /> <link rel="stylesheet" type="text/stylesheet" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screen__layout__medium.css" /> --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="page"> <header> <a class="logo" href="#"></a> </header> <article> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </article> <div class="promo__container"> <div class="promo one"> <div class="content"> <h3>Promo Heading Here</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p><a class="cta" href="">Visit our blog</a></p> </div> </div> <div class="promo two"> <div class="content"> <h3>Promo Heading Here</h3> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p> <p><a class="cta" href="">Read the article</a></p> </div> </div> <div class="promo three"> <div class="content"> <h3>Promo Heading Here</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p> <p><a class="cta" href="">Learn more</a></p> </div> </div> </div> <nav> <a href="#">About Us</a> <a href="#">Services</a> <a href="#">Portfolio</a> <a href="#">Contact Us</a> </nav> <footer> © Your Company Name </footer> </div> </body> </html> ```CSSここに言語を入力 コード ```@charset "UTF-8"; /* Global Content Formatting and Styles */ body { color: brown; font-size: 50px; }
回答1件
0
ベストアンサー
HTMLファイルと、「screen_style.css」が同じ階層 (同じフォルダ) 内にありますか?
以下の記述は、そうでないとCSSファイルを読み込めないです。
[HTMLとCSSが同じ階層にある場合]
/index.html
/screen_style.css
<link rel="stylesheet" type="text/stylesheet" href="screen_style.css" />
いくつか例を挙げるので、合っているパターンがあれば使ってみてください。
[CSSがフォルダの中にある場合]
/index.html
/css/screen_style.css
<link rel="stylesheet" type="text/stylesheet" href="css/screen_style.css" />
[HTMLとCSSの両方が、別フォルダの中にある場合]
/service/index.html
/css/screen_style.css
<link rel="stylesheet" type="text/stylesheet" href="../css/screen_style.css" />
../で、1つ上の階層 (1つ上のフォルダ) という意味になります。
ファイルへのパスの問題ではなさそうな場合
上記諸々試してみて、それでも"CSSが反映されない"のであれば、以下を試してみてください。
- 「screen_style.css」ファイルとソースコード内の記述が同一か確認 (タイプミス、スペルミスがないか)
- 全角スペースがないか確認 (ソースコード内で文字列検索)
- ファイルの読み込み権限が、自分だけになっていないか確認
投稿2020/03/09 22:30
編集2020/03/10 00:41
総合スコア4528
あなたの回答
tips
プレビュー
