CSSを用いて文字の色を赤くしたいのですが、反映されません。

前提・実現したいこと

CSSを使って文字の色を赤くしたいです。

プログラミング歴2日の超初心者です。
エディタはAtom ブラウザはChromeを使っております。

発生している問題・エラーメッセージ

<head>タグの中に<style>タグを用いて、h1の文字を赤くするように書いたのですが、反映されません。
コードが文字となってサイト上に反映されてしまいます。



エラーメッセージ

該当のソースコード

CSS
1ソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>太郎のポートフォリオ</title> <link rel="icon" href="favicon.ico"> <mete name="description" content=”太郎のポートフォリオサイトです。”＞ <style> h1 { color:red; } </style> </head> <body> <header> <nav> <ul> <li> <a href="index.html"> HOME </a> </li> <li> <a href="about.html"> ABOUT </a> </li> </ul> </nav> <img src="img/header.png" width="400" height="130" alt="ヘッダー画像" > </header> <section> <img src="img/taro.png" width="140" height="140" alt="太郎のアイコン" > <h1>山田太郎</h1> <p>UI/UXデザイナー見習いです</p> <section> <img src="img/work1.png" width="400" height="260" alt="勇者ゲーム" > <h1>勇者ゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="img/work2.png" width="400" height="260" alt="宝探しゲーム" > <h1>宝探しゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="img/work3.png" width="400" height="260" alt="神経衰弱" > <h1>神経衰弱</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> </section> <footer> <ul> <li> <a href="mailto:taguchi@gmail.com" target="_blank"> <img src="img/mail.png" width="20" height="20" alt="メール送信" > </a> </li> <li> <a href="https:dotinstall.com" target="_blank"> <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ" > </a> </li>

<li>
  <a herf="https:dotinstall.com" target="_blank">
  <img src="img/photos.png" width="20" height="20" alt="写真サイトへ" >
  </a>
</li>

</ul> <p>(C) Taro Yamada</p> </footer> </body> </html>

試したこと

ドットインストールという学習サイトを使って一つ一つ習っています。公開されてる見本のソースコードと見比べて、何時間も格闘してみましたが分からず質問させて頂いた次第です。
また、Atomで何らかのショートカットキーを間違えて押してしまったかもしれず、設定が変更になってしまったのではないかとも疑っております。

レベルの低い質問で申し訳ありません。どうかご指導よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2018/05/23 00:02

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

m.ts10806

2018/05/23 00:16

質問は質問者さんのみが編集できるので、次から気をつけてください。質問を読みやすくすることは素早い解決につながります。

araki1938

2018/05/23 01:27

ご指摘、ご回答ありがとうございます！　初心者の自分でも本当にわかりやすかったです。質問の編集について次から気をつけます。

kei344

2018/05/23 02:17

質問文のコードはそれぞれコードブロックで囲んでください。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

行動規範の内容に同意します

回答4件

ベストアンサー

とりあえずmetaがmeteになっているのと、同じmetaタグ内contentの"と、最後の>が全角になっているのを直せばH1が赤で表示されるとは思います。

html
1<mete name="description" content=”太郎のポートフォリオサイトです。”＞

↓

html
1<meta name="description" content="太郎のポートフォリオサイトです。">

あと気になった点

1つ目のsectionの閉じが一番最後のsectionの後になっていますが、意図したものであればかまわないかと。
ドットインストールのアドレスもhttps:dotinstall.comではなくhttps://dotinstall.com/かな。
「写真サイトへ」のリンクがhrefではなくherfになってます。

投稿2018/05/23 00:05

dit.

総合スコア3235

araki1938

2018/05/23 00:23

ありがとうございます！おかげ様で解決できました。大文字、小文字や誤入力等をまずなくせるように注意していきます。皆さん非常に丁寧で分かりやすいご回答ありがとうございます！もっと頑張っていきます。

dit.

2018/05/23 00:32

ドットインストールをためしに見てみたら、HTML入門の#05で、「全角文字に気を付けよう」という説明がありますね。やりがちなので気を付けましょう。最終章にあるソースも見てみました。sectionの閉じ場所は問題ないようですし、h1がページ内にいくつもあるのは学習課題どおりでしたね。 mts10806さんの指摘の通りちょっと気になる部分ではありますが…。質問文がうまくコードブロックで囲えてないので実際のコードがどのようになっているかわかりませんが、適切なインデントをつけるとかなり見やすくなります。