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

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

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

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

CSS

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

Q&A

解決済

2回答

4035閲覧

【css】 color反映されない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

1グッド

1クリップ

投稿2019/08/18 06:07

編集2019/08/18 06:46

前提・実現したいこと

下記サイトの模写をしています。
(サイト:https://isara.life/)
見本
↑見本
模写
↑模写

※文字の色だけが反映されない状態です。

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

一部のcssが反映されない状態です。
そのcssは「text1」クラスと「kikan-text」クラスです。
colorだけ反映されないです。font-sizeやmargin等は反映されます。

該当のソースコード

html

1<div class="otoiawase-wrapper"> 2 <div class="container2"> 3 4 <div class="otoiawase-text"> 5 <h2 class="text1"><p>まずは20日間で、</p> 6 <p>月10万円稼げるスキルを手にいれよう。</p></h2> 7 <h3><span style="background-color:white" class="text2">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</span></h3> 8 </div> 9 10 <h3 class="otoiawase-btn">お問い合わせ&資料請求はこちら</h3> 11 12 <div class="kikan-text"> 13 14 15 <p>第4期生:2018年12月3日 ~ 2018年12月22日 *締め切りました</p> 16 <p>第5期生:2019年4月8日 ~ 2019年4月27日*締め切りました</p> 17 <p>第6期生:資料請求受付中です</p> 18 </div> 19 20<div class="btn-wrapper"> 21 22 <a href="#" class="btn tweet"> 23 <span class="fa fa-twitter"></span> 24 ツイート</a> 25 26 <a href="#" class="btn iine"> 27 <span class="fa fa-thumbs-up"></span> 28 いいね</a> 29 30 <a href="#" class="btn share">シェア</a> 31 </div> 32 33 </div> 34 </div> 35

css

1.otoiawase-wrapper{ 2 height: 600px; 3 background-color:#EBB94C; 4} 5 6.container2{ 7 width: 1100px; 8 margin: auto; 9 height: 600px; 10 text-align: center; 11 padding: 35px; 12} 13 14.text1{ 15 color: #ffffff; 16 font-size: 20px; 17 line-height: 35px; 18 margin-bottom: 20px; 19} 20 21.text2{ 22 background-color: white; 23 color: #C7244E; 24 font-size: 15px; 25 border-radius: 6px; 26 27 padding:5px 10px; 28} 29 30.otoiawase-btn{ 31 background-color: #DA6B63; 32 border-radius: 60px; 33 color: white; 34 font-size: 27px; 35 letter-spacing: 3px; 36 display: inline-block; 37 38 margin-top: 45px; 39 width: 945px; 40 padding: 35px 0px; 41} 42 43.kikan-text{ 44 line-height: 45px; 45 color: #ffffff; 46 font-size: 20px; 47 font-weight: bold; 48 49 margin-top: 65px; 50}

試したこと

考えられる要因
・cssのクラス名間違えている
→同じクラスで他のプロパティ反映されているので、違う

・cssとHTMLが紐づいていない
→検証ツールで紐ついていること確認できたので、違う

・全角スペースや「;」の記入漏れ
→確認しましたが記入漏れない
以上のように考え試しましたが、色が変わりません。

初歩的なところでつまずいてしまって、自分でも何が原因なのかわからないです。
お手数ですが、ご教授くださいませ。

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

bochan2👍を押しています

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/08/19 14:05

確かにそうかもしれないです。こちらは一部のhtmlしか載せてないので、全体を載せて見ます!ありがとうございます
querykuma

2019/08/20 11:47

全体のhtmlでも問題が再現しませんでした。他に原因があるようです。 > 補足情報(FW/ツールのバージョンなど) あなたの環境(ブラウザのバージョン、スマホかもしれないのでOSのバージョンなど)を可能なかぎり書いてください。 > →検証ツールで紐ついていること確認できたので、違う 検証ツールは何ですか? 初心者と言われていますが、テンプレートを埋めてから質問されてはいかがですか? 回答者から尋ねられないと答えないという態度はいただけません。 > 初心者なりに調べてもわからないことをこちらで質問しているのですが・・・ > 質問してすいませんでした 質問したことではなく逆ギレしたことを謝罪しましょう。 質問したことを謝罪するなら今後質問できなくなってしまいます。 アカウントを作り変えて質問するのは卑怯です。 ここはいかに調べるのに苦労したかを答えて、回答者の情に訴えるのがいいでしょう。 たとえば「1日調べてどうしてもわかりませんでした。お手数ですがアドバイスだけでもいただければ幸いです」と返しましょう。
guest

回答2

0

divタグが閉じられていないことが原因です。
この程度は初心者であっても自身で解決できなければダメです。

html

1<style> 2.otoiawase-wrapper{ 3 background-color:#EBB94C; 4} 5 6.container2{ 7 text-align: center; 8 padding: 35px; 9} 10 11.text1{ 12 color: #fff; 13 font-size: 20px; 14 line-height: 35px; 15 margin-bottom: 20px; 16} 17 18.text2{ 19 background-color: #fff; 20 color: #C7244E; 21 font-size: 15px; 22 border-radius: 6px; 23 padding:5px 10px; 24} 25 26.otoiawase-btn{ 27 background-color: #DA6B63; 28 border-radius: 60px; 29 color: #fff; 30 font-size: 27px; 31 letter-spacing: 3px; 32 display: inline-block; 33 margin-top: 45px; 34 width: 90%; 35 padding: 35px 0px; 36} 37 38.kikan-text{ 39 line-height: 45px; 40 color: #fff; 41 font-size: 20px; 42 font-weight: bold; 43 margin-top: 65px; 44} 45</style> 46<div class="otoiawase-wrapper"> 47 <div class="container2"> 48 <div class="otoiawase-text"> 49 <h2 class="text1"> 50 <p>まずは20日間で、</p> 51 <p>月10万円稼げるスキルを手にいれよう。</p> 52 </h2> 53 <h3> 54 <span style="background-color:white" class="text2">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</span> 55 </h3> 56 </div> 57 58 <h3 class="otoiawase-btn">お問い合わせ&資料請求はこちら</h3> 59 60 <div class="kikan-text"> 61 <p>第4期生:2018年12月3日 ~ 2018年12月22日 *締め切りました</p> 62 <p>第5期生:2019年4月8日 ~ 2019年4月27日*締め切りました</p> 63 <p>第6期生:資料請求受付中です</p> 64 </div> 65 </div> 66</div>

投稿2019/08/18 06:17

yasutomi

総合スコア2937

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

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

退会済みユーザー

退会済みユーザー

2019/08/18 06:33

ご丁寧にありがとうございました! 初心者なりに調べてもわからないことをこちらで質問しているのですが・・・ 質問してすいませんでした
yasutomi

2019/08/18 06:39

divの開始タグが4個、終了タグが2個と タグの数が合わず明らかにコードがおかしいので 初心者とかは関係なくakaringoさんの確認不足です。
退会済みユーザー

退会済みユーザー

2019/08/18 06:48

以後気をつけます。確認しました。 書いてあるコードを途中で切ってしまっていました。 ありがとうございました!
m.ts10806

2019/08/18 10:12

yasutomiさん 初心者だからそこに目が向かないと考えても良いのでは。「試したこと」はいずれも順当な確認手段です。むしろそれがあったからHTML構造に目が向けられたのでは? ちょっとキツすぎると思います(というか書かなくてもいい一言)。 どのようにしてタグの閉じ忘れに気づけたとかその辺りを具体的に書いてあげた方が今回の質問者にもあとから見る人のためにもなると思います。 akaringoさん 習慣とエディタによってHTMLの問題は解決可能です。あとから見つけるのは難しいですけど、 習慣はインデントをきちんとつけるようにするとか、閉じタグを先に書くようにするとか、ですね。 エディタは閉じタグを自動的に出してくれるもの、HTMLintなどの構文チェック機能が入ったものを使うと未然に防げたり後からミスに気づけたりします。
yasutomi

2019/08/18 10:25 編集

質問に必要な質問者の手元にあるコードが 正しく記載されていないのは初心者とかそういう次元の問題ではないです。
m.ts10806

2019/08/18 10:35

それはkei344さんがされているように「コードをすべて記載してください」など追記依頼すればいいだけの話と思います。何度も何度もおなじような指摘をされているのならともかく、開口一番「ダメです」では伝わるものも伝わらなくなると思います。 ※言い争いたいわけではないのであしからず
yasutomi

2019/08/18 11:11

私は回答時点では単に閉じタグ不足だと思って回答しているので それは無理な話です。
m.ts10806

2019/08/18 11:32

手元にあるコードが正しく記載されていない と 記載されたHTMLが構文が正しくない は別問題というのはお分かりかと思いますが、後者と思っての回答ですよね? それなら「そこに初心者は中々気づけない」で納得できませんか? 「初心者だから起きる確認不足」で納得できませんか? CSS反映されない現象について確認できそうなことは「試したこと」を見ればわかる通りですし、「ダメです」といきなり言い切る内容ではないと思います。 基準は個人の感覚はあるでしょうけど、質問者は「こういうところも確認したけどわからなかった」ときちんと書いてあるので、それ以外での目線を聞いているのは一目瞭然です。 それを開口一番「ダメです」は、さすがによろしくないという話をしています。 せめてその部分を「自分はこうやって見つけた」と差し替えるのはそこまで難しい話ですか? 回答それなりにされてきている方なので伝わりやすいアドバイスの仕方も可能と思っています。 何より「ダメです」と言ったところでこの問題が解決するわけでも質問者や今後この回答を見るかもしれない人のためになるわけでもありません。
bochan2

2019/08/20 01:46

私もmtsさんの意見に賛成です。 >私は回答時点では単に閉じタグ不足だと思って回答しているので とありますが、回答は回答後でも編集可能ですし、コメントも回答後に出来るので新しい要件への対応は可能なはずです。
m.ts10806

2019/08/20 01:48

bochan2さん 賛同を得たいためにした指摘ではありませんし、後半のコメントを知らない回答者ではないので、可能であれば黙っててください。
kyoya0819

2019/08/20 12:58

横から失礼します。 > 後半のコメントを知らない回答者ではないので、可能であれば黙っててください。 ここはm.ts10806さんとyasutomiさんのチャットスペースではありません。 本来誰でも自由に指摘等ができる場です。 そこに「黙って」の3文字は似つかわしくないのでは?(度を超えたものを除いて)
m.ts10806

2019/08/20 13:07

asuchi0819さん もちろん仰ることは理解しておりますし認識しております。経緯含めて詳しく説明しようとすると若干ややこしい内容なので難ですが、 端的に言うと、約2日反応がなかった時点で私の依頼は飲み込まれなかった(交渉決裂した)と思っています。 なので、柔らかく言うとすれば「既に済んでいるところをわざわざ外から掘り返さないで」となるかもしれませんが、このbochan2というユーザーはこの手の茶々入れが過ぎるところがあり「黙って」と強めになりました。 事情を知らない他者には配慮が欠けたことは申し訳ないと思っています。
guest

0

ベストアンサー

閉じタグ忘れ防止ツールをおすすめします

原因は他の方が提示しているようですので、防止策を書いておきます。

お使いのエディタ名+「閉じタグ」で検索すると出てきますし、
ブラウザの拡張機能でもチェックツールがあります。

https://chrome.google.com/webstore/detail/htmlエラーチェッカー/ohdllebchmmponnofchalfkegpjojcaf?hl=ja

長大なサイト、複数人で構築するサイトなどでは起こりうることなので
このようなツールの導入をおすすめします。

投稿2019/08/20 02:38

編集2019/08/20 02:40
mattari_panda

総合スコア429

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問