Q&A
できました！ありがとうございます！！！！
前提・実現したいこと
ドットインストールの「はじめてのCSSを書いてみよう」のレッスンで勉強をしています。
h1の「あみゅ」を赤色に変更する際にバグが発生しました。
発生している問題・エラーメッセージ
赤色に変更されず、ページに h1 { color: red ; } --> と表示されてしまう。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>あみゅのポートフォリオサイト</title> 6 <link rel="icon" href="img/mugenn.ico"> 7 <meta name="description" content="あみゅのポートフォリオサイトです。"＞ 8 <!-- <style> 9 h1 { 10 color: red ; 11 } 12 </style> --> 13 <link rel="stylesheet" href="/css/styles.css"> 14</head> 15<body> 16 <header> 17 <nav> 18 <ul> 19 <li> 20 <a href="index.html"> 21 HOME 22 </a> 23 </li> 24 <li> 25 <a href="about.html"> 26 ABOUT 27 </a> 28 </li> 29 </ul> 30 </nav> 31 <img src="img/hedda-.png" width="400" height="130" alt="ヘッダー画像"> 32 </header> 33 34 <section> 35 <img src="img/dhizuni.JPG" width="140" height="140" alt="あみゅのアイコン"> 36 <h1>あみゅ</h1> 37 <p>大学4年生 プログラマー初心者です</p> 38 39 <section> 40 <img src="img/work1.png" width="400" height="260" alt="勇者ゲーム"> 41 <h1>勇者ゲーム</h1> 42 <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> 43 </section> 44 <section> 45 <img src="img/work2.png" width="400" height="260" alt="宝探しゲーム"> 46 <h1>宝探しゲーム</h1> 47 <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> 48 </section> 49 <section> 50 <img src="img/work3.png" width="400" height="260" alt="神経衰弱ゲーム"> 51 <h1>神経衰弱ゲーム</h1> 52 <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> 53 </section> 54 </section> 55 56 57 <footer> 58 <ul> 59 <li> 60 <a href="mailto:taguchi@gmail.com" target="_blank"> 61 <img src="img/me-ru.png" width="20" height="20" alt="メール送信"> 62 </a> 63 </li> 64 <li> 65 <a href="https://dotinstall.com" target="_blank"> 66 <img src="img/fukidasi.png" width="20" height="20" alt="ブログサイトへ"> 67 <a> 68 </li> 69 <li> 70 <a href="https://dotinstall.com target="_blank""> 71 <img src="img/kamera.png" width="20" height="20" alt="写真サイトへ"> 72 </a> 73 </li> 74 75 </ul> 76 </footer> 77 <p>(c) Amyugramu</p> 78</body> 79</html> 80
試したこと
colorの後に半角スペースを入れたり入れなかったりした。
補足情報（FW/ツールのバージョンなど）
styleタグはコメントにして、CSSのシートに移す予定です。
回答3件
0
既に質問内容の解決策は出ているので他、気になった点です。
もうhtmlのコメントアウト<!-- -->って不要じゃないかな
html
1 <!-- <style> 2 h1 { 3 color: red ; 4 } 5 </style> -->
他にも構文エラーがあります。
※構文チェックもしてくれるエディタを採用すると上記のように教えてくれます
html
1 <a href="https://dotinstall.com" target="_blank"> 2 <img src="img/fukidasi.png" width="20" height="20" alt="ブログサイトへ"> 3 <a> ←閉じタグになってない
html
1<a href="https://dotinstall.com target="_blank""> ←ダブルクォーテーションの位置がおかしい（hrefが閉じてない、targetの後ろに1個余計）
投稿2019/05/09 05:11
総合スコア80850
0
ベストアンサー
html
1<meta name="description" content="あみゅのポートフォリオサイトです。"＞ 2 ^これが全角です。
投稿2019/05/09 04:50
総合スコア36074
amyugramuさん
この回答を対応するだけだと「CSSが画面上に出なくなる」だけで「h1の文字色を赤に」はなりませんので、ogura0114さんの回答と併せる必要があります。
なるほどですね。ご丁寧にありがとうございます！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/09 05:35
2019/05/09 05:38
2019/05/09 05:58
2019/05/09 06:21
2019/05/09 07:29
2019/05/09 07:31
2019/05/09 07:35
2019/05/09 07:39