🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

1回答

1140閲覧

htmlcss初心者です。色を指定しても反映されません。

fukaw

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/03/25 07:11

編集2021/03/25 07:36

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

html&css初心者です。以下のコードをhtmlで書きました。cssで文字の色などを変えていたのですが、1.「.mein」でh1の色などを変えても、反映されないです。2.「.container」で色を変えたところh1は替わったが、pは変わりませんでした。それは何故ですか。

エラーメッセージ

該当のソースコード

ソースコード ```<div class="top-wrapper"> <div class="container">          <div class="mein"> <h1>〇〇</h1> <h1>××</h1> </div> <div class="mein-p"> <p>△△</p> </div> </div> </div> (1) .mein{ color:#191970; } (2) .container{ color:#191970; } ### 試したこと クラスmein,mein-pは必要ないと思い、消したところ無事できました。ただ、上記の記述のどこが間違っていたのかがわかりません。 ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。 cssの一部を追加しました。(1)でやると、h1の色が変わりません。(1)で書いたものを消して(2)にするとh1の色は変わりましたが、pは変わりませんでした。 キャッシュについては、何も知らなかったので調べてみます。ただ、フォントサイズなど他の部分では反映されているので問題ではないかと思っています。 英単語に関しては、ただただ間違えました。

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

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

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

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

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

maisumakun

2021/03/25 07:14

> cssで文字の色などを変えていたのですが どのようなCSSを書きましたか?
退会済みユーザー

退会済みユーザー

2021/03/25 07:15

css ファイルの内容を変更した後、ブラウザのキャッシュを削除してないなんてことはないですよね?
m.ts10806

2021/03/25 07:15

コードはマークダウンのcode機能にてご提示ください。 cssも提示してください。 ファイル同士の位置関係がわかる情報も提示してください
m.ts10806

2021/03/25 07:15

あと、プログラムとしては問題ないですが英単語としては問題があります。 mein →main
K_3578

2021/03/25 07:28

>ブラウザのキャッシュを削除してない 最近質問でよく見るのでありえそうです。 @質問者さん とりあえずCtrl+F5とでもしてみては如何でしょうか。
退会済みユーザー

退会済みユーザー

2021/03/25 07:38 編集

とりあえずCSSが欲しいところだけども、 1.mein→main※指摘済みみたいですね 2.h1タグを2個連続で使用しない方が良い > クラスmein,mein-pは必要ないと思い、消したところ無事できました。 クラスを消したらできたって書いてあるので、セレクタをタイポで指定していたとか?
K_3578

2021/03/25 07:40

<code>ブロックが分からなさそうなので例示 ```HTML←ここに言語名を入れます htmlのソースコード(ここを消して丸々貼り付けてください。) ``` (1行空ける) ```CSS cssのソースコード ``` という感じです。編集し直してみてください。
fukaw

2021/03/25 07:42

タイポと言うのは誤植で合ってますかね?おそらく文の構造やスペルミスはなかったと思います。
退会済みユーザー

退会済みユーザー

2021/03/25 07:46

@fukaw様 ご確認ありがとうございます!追加されたCSSを先ほど確認しました。 タイプミス、誤植どちらでも。クラスとセレクタの不一致という意味で捉えていただけると助かります。
miyabi_takatsuk

2021/03/25 10:03

CSSは、本当にこれで全てでしょうか? こういった現象の原因は、 CSSの詳細度が原因の可能性が高いですので、 なるたけ、全ての記述を記載してください。 (ようは他のCSSが邪魔してる可能性が高いってこと)
K_3578

2021/03/29 05:57

で、どうやって解決したかも言わんのか。
guest

回答1

0

ベストアンサー

添付画像はh1ではなくてh3ですが、親要素に指定した場合、大抵は文字色が引き継がれます。
※pタグにも引き継がれます。
なので、別のCSSで指定されていないかを検証ツールを使って確認して頂けますでしょうか?
※ChromeですとF12を押すと下記画像のようなものが出てきます。
イメージ説明

投稿2021/03/25 07:42

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問