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

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

新規登録して質問してみよう
ただいま回答率
85.48%
HTML

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

CSS

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

Q&A

解決済

3回答

237閲覧

初学者です。cssを用いた色の変更ができません。

mohun

総合スコア12

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/03/08 06:27

styleタグを用いた文字色、書体の変更

ドットインストールでプログラミングの学習をしています。
htmlについての学習は一通り終わり、cssの学習に入ったのですが、styleタグを用いた色の変更が成功しません。

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

本来なら「山田太郎」が赤くなるはずなのですが、色の変更が反映されず、書いたコードがテキストとして反映されてしまいます。

該当のソースコード

html

1 <head> 2 <meta chrset="utf-8"> 3 <title>太郎のポートフォリオサイト</title> 4 <link rel="icon" href="my portfolio/favicon.ico"> 5 <meta name="description" coment="太郎のポートフォリオサイトです。" 6 <style> 7 h1 { 8 color: red; 9 } 10 </style> 11 </head> 12 13 <body> 14 <header> 15 <nav> 16 <ul> 17 <li> 18 <a href="index.html">HOME</a> 19 </li> 20 <li> 21 <a href="about.html">ABOUT</a> 22 </li> 23 </ul> 24 </nav> 25 <img src="my portfolio/header.png" width="400" hight="130" alt="ヘッダー画像"> 26 </header> 27 28 <section> 29 <img src="my portfolio/taro.png" width="140" hight="140" alt="太郎のアイコン"> 30 <h1>山田太郎</h1> 31 <p>UIデザイナー見習いです</p> 32

試したこと

ドットインストール内でお手本として公開されているソースコードをコピペしてみたのですが、やはり反映されませんでした。
キャッシュの消去とハード再読み込みも試したのですが変わりません。

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

chrome、ATOM使用です。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

メタタグが閉じられていませんが、それが原因ではないですか?

あと、スタイルタグにタイプを指定して下さい。

投稿2019/03/08 06:32

n_takapyon

総合スコア443

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mohun

2019/03/08 06:35

解決しました! ご指摘ありがとうございます。
mohun

2019/03/08 07:41

<style>のtype指定をしないとあんまり使われてないtypeが指定されてしまい、コーティング等上手くいかないことが多い、ということでしょうか…? 出典の提示までしていただきありがとうございます。 勉強になります。
n_takapyon

2019/03/12 01:13

>maisumakun >>><style>のtypeは、HTML5ではデフォルト値が「text/css」になっています。MDNには、「現代のウェブ文書では、これを含める理由はほとんどありません。」とすら書かれていました。 ご指摘ありがとうございました。 開発環境や、現場のルール等、諸事情が無ければ指定不要という認識に改めます。
guest

0

ベストアンサー

html

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

html

1 <meta name="description" coment="太郎のポートフォリオサイトです。" /> // <- 閉じてない

投稿2019/03/08 06:30

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mohun

2019/03/08 06:33

そっちか! 閉じたら解決しました。本当にありがとうございました。
guest

0

<meta name="description" coment="太郎のポートフォリオサイトです。"> <style>の前にある<meta>タグをちゃんと閉じましょう

投稿2019/03/08 06:35

toshi_n

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mohun

2019/03/08 09:56

問題点そこでした! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問