質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • HTML

    9584questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6208questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Atom (テキストエディタ)

    556questions

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

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 362

araki1938

score 3

 前提・実現したいこと

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

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

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

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



エラーメッセージ

 該当のソースコード

ソースコード


<!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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/23 09:02

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

    キャンセル

  • mts10806

    2018/05/23 09:16

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

    キャンセル

  • araki1938

    2018/05/23 10:27

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

    キャンセル

  • kei344

    2018/05/23 11:17

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

    キャンセル

回答 4

checkベストアンサー

+4

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

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


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

あと気になった点

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 09:23

    ありがとうございます!おかげ様で解決できました。
    大文字、小文字や誤入力等をまずなくせるように注意していきます。

    皆さん非常に丁寧で分かりやすいご回答ありがとうございます!もっと頑張っていきます。

    キャンセル

  • 2018/05/23 09:32

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

    質問文がうまくコードブロックで囲えてないので実際のコードがどのようになっているかわかりませんが、適切なインデントをつけるとかなり見やすくなります。

    キャンセル

  • 2018/05/23 11:16 編集

    > 大文字、小文字や誤入力等をまずなくせるように注意していきます。

    100%無くすのは無理なので、「誤入力を見つけられるように」を目標にした方が良いです。
    「99.99999% 誤入力無し」でもエラーになりますので。

    「誤入力を100%見つける」は十分可能です。

    キャンセル

+3

「”」が全角になっている箇所が幾つもあります。
そこをひとつひとつ半角にしていってください。
※プログラムで使う記述は基本全て半角にしないと認識されません。

Atom使ったことないので分かりませんが、html構文解析がついているエディタではおそらく下記のように警告(タグが赤色)がでているのではないでしょうか?
イメージ説明

私が使っているのはBracketsというエディタです。

他にもhtmlタグとして記述が合っていない部分が散見されます。
教科書のコードを見比べるのではなく、それぞれのタグの仕様を調べてそれと合致しているか確認しましょう。
でないと、問題解決能力が上がりません。

追記:
気になったところがあります。
h1タグが多すぎます。
確かに理論上設置は可能ですが、意味合いとしては「大見出し」です。
参考:見出しを付ける

h1タグが使われるのはほとんどの場合が「サイト名」 または「ページタイトル」など
おおよそ1画面に1つしか出ないようなものに使われます。
今回の場合はh2タグが適当ではないでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

ここに全角文字が使われているのが原因です。どこかは見直してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 09:16

    書いてしばらく置いていたら解決済でしたね。すいません。

    キャンセル

+1

<style type="text/css">
a {color:red;}
</style>

これでどうですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/23 09:13 編集

    質問者さんが赤色にしたいのはh1タグですよ。

    キャンセル

  • 2018/05/23 09:15

    すみません、普通に間違えていましたm(__)m

    キャンセル

同じタグがついた質問を見る

  • HTML

    9584questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6208questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Atom (テキストエディタ)

    556questions