Q&A
（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
あと、HTMLは全体を提示してください。また、使用しているエディタとブラウザ、確認した手順もなるべく丁寧に説明されたほうが回答しやすいです。
前提・実現したいこと
styleタグでカラーを変更したいです
プログラムを昨日から勉強し始めた者です、styleタグでカラーを変更する方法を動画で見たのですが反映されずそのままh1 { color: red; }と出ます。何が間違っているのでしょうか。
発生している問題・エラーメッセージ
反映されません。
該当のソースコード
html
ソースコード
ドットインストールというサイトを見ながらしました と
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
どのような環境で書いていますか？
ブラウザはクロームでエディタはvisual studio codeです。手順はhtmlの初心者編を終わらせたあとCSSの初心者編を開いていちばん最初に出た物でした。
質問を編集して、HTMLファイルをすべて提示してください。
「<code>」ボタンを押すと表示される2つの「```」の行の間にHTMLファイルの中身を貼り付け(「コード」の文字が残っていたら削除し)、上の「```」の直後にある「ここに言語を入力」を削除して代わりに「HTML」と書いてください。
もし、HTMLファイルにそれだけしか記載してないなら、そらそうなるかと・・・。
それが、HTMLファイル内の記載全部でしょうか？
ファイル全体を書いていただけますか？
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テストサイト</title>
<link rel="icon" href="favicon.ico"
<meta name="description" content=""
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<header>
<img src="img/otokonohito.jpg" width="120" height="120" alt="テストです">
<h1>テスト</h1>
<p>テスト</p>
<ul>
<li>
<a href="https://twitter.com/xnaru0416" target="_blank" >
<img src="img/logo.png" width="30" height="30" alt="twitter"
</a>
</li>
<li>
<a href="https://yt3.ggpht.com/a/AATXAJys4YvtZMgHxLkJkT_xAKj2v0uE3FO8LDprRw=s900-c-k-c0xffffffff-no-rj-mo" target="_blank">
<img src="img/photos.png" width="20" height="20" alt="写真"
</a>
</li>
</ul>
</header>
<section>
<h1>TEST</h1>
<section>
<img src="img/work2.png" width="400" height="260" alt="test画像">
<h1>テスト</h1>
<p>あああああ</p>
</section>
<section>
<img src="img/potato.jpg" width="400" height="260" alt="test">
<h1>test</h1>
<p>いいいいい</p>
</section>
<section>
<img src="img/work1.png" width="400" height="260" alt="テスト画像">
<h1>test</h1>
<p>うううう</p>
</section>
</section>
<footer>
<p>(N)aaa.com</p>
</footer>
</body>
<html>
質問者さん、それをここではなく質問本文に記載ください。
質問本文は編集できます。
ひとまず、解決できてよかったです。
今回のように、プログラムにおいては、自分では大丈夫と思っている箇所が意外にも原因だった、ということが多々あります。
なので、ここは関係ないべと自己判断せず、今後もなるたけソースコードは全文記載することをお勧めします。
わかりました、ありがとうございます。
これからまた同じ間違えを起こさないようにプログラムの勉強します！
回答5件
0
タグの末尾の>の付け忘れが大量にあり、そのせいでスタイルが適用されていません。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>テストサイト</title> 6 <link rel="icon" href="favicon.ico"> <!-- ここを閉じ忘れ --> 7 <meta name="description" content=""> <!-- ここを閉じ忘れ --> 8 <style> 9 h1 { 10 color: red; 11 } 12 </style> 13 </head> 14 <body> 15 <header> 16 <img src="img/otokonohito.jpg" width="120" height="120" alt="テストです"> 17 <h1>テスト</h1> 18 <p>テスト</p> 19 <ul> 20 <li> 21 <a href="https://twitter.com/xnaru0416" target="_blank" > 22 <img src="img/logo.png" width="30" height="30" alt="twitter"> <!-- ここを閉じ忘れ --> 23 </a> 24 </li> 25 <li> 26 <a href="https://yt3.ggpht.com/a/AATXAJys4YvtZMgHxLkJkT_xAKj2v0uE3FO8LDprRw=s900-c-k-c0xffffffff-no-rj-mo" target="_blank"> 27 <img src="img/photos.png" width="20" height="20" alt="写真"> <!-- ここを閉じ忘れ --> 28 </a> 29 </li> 30 </ul> 31 </header> 32 33 <section> 34 <h1>TEST</h1> 35 <section> 36 <img src="img/work2.png" width="400" height="260" alt="test画像"> 37 <h1>テスト</h1> 38 <p>あああああ</p> 39 </section> 40 41 <section> 42 <img src="img/potato.jpg" width="400" height="260" alt="test"> 43 <h1>test</h1> 44 <p>いいいいい</p> 45 </section> 46 47 <section> 48 <img src="img/work1.png" width="400" height="260" alt="テスト画像"> 49 <h1>test</h1> 50 <p>うううう</p> 51 </section> 52 </section> 53 54 <footer> 55 <p>(N)aaa.com</p> 56 </footer> 57 </body> 58</html> <!-- ここに/が抜けている -->
投稿2020/06/22 03:32
総合スコア11990
0
Python
1<link rel="icon" href="favicon.ico" 2 ↑閉じてない 3<meta name="description" content="" 4 ↑閉じてない 5```ので、 6```Python 7<link rel="icon" href="favicon.ico"> 8<meta name="description" content="">
投稿2020/06/22 03:23
編集2020/06/22 03:24
総合スコア2720
linkの方見逃してた・・・。
0
html
1<!-- > が抜けているから --> 2<meta name="description" content=""
直してもダメならコメントください。
投稿2020/06/22 03:25
総合スコア9528
0
ベストアンサー
html
1<meta name="description" content="" 2<style>
直上の<metaが閉じられていないため、<style>がタグとして認識されていないものと思われます。
投稿2020/06/22 03:23
総合スコア145208
解決しました！ありがとうございます。
xnaru0416さん >
ForestSeoさんの回答通り、<link>要素の方も直しておきましょう。
Daregadaさんの回答通り、</html>閉じタグも直しておきましょう。
あなたの回答
tips
プレビュー
