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

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

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

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

Q&A

解決済

1回答

1325閲覧

span要素のbackgroundが適用されない

SugiuraY

総合スコア317

CSS

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

0グッド

0クリップ

投稿2019/03/26 12:53

編集2019/03/26 13:14

以下のコードを作成したのですが、
.here{
background:#fff000;
}
が適用されません。
span要素(インライン要素)では適用できないような話は聞いたことはないのですが
理由がわからずにお問い合わせさせていただきました。
!importantを付しても適用されないのですが、もし原因がわかる方がいらっしゃれば
ご教示いただければ幸いです。
divタグに変更すると適用はされるのですが、不思議です。
よろしくお願い申し上げます。

php

1 2<li class="posts_li"> 3 <h3 class="postHead"> 4 <span class="cof_li"><?php h($result[$i]['cof']) ?></span> 5 <span class="fee_li"><?php h($result[$i]['fee'])?></span> 6 </h3> 7 <span class="postInner"> 8 <span class="here"><?php echo $result[$i]['explanation']?></span> 9 </span> 10</li>

イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

動くサンプル:https://jsfiddle.net/xvjez143/


適用されます。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

投稿2019/03/26 12:58

kei344

総合スコア69364

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

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

SugiuraY

2019/03/26 13:16

コメントありがとうございます。 自分の作成しているコードでは動作せず、諸々検証してみたのですが、spanの中に入っている要素が問題だったようです。 上記のようにimgを追加したのですが、対象のspanタグの中身がかような条件のもとでは、適用されないようでした。 不明瞭な問い合わせで申し訳御座いません、、
kei344

2019/03/26 14:12

spanの中にp要素を入れるとか、やめましょう。HTMLの文法に沿って組み直しましょう。
kei344

2019/03/26 14:13

で、画像で無くコピー(検証)できるテキストで追記しましょう。
SugiuraY

2019/03/26 20:41

コメントありがとうございます。 HTML上、入れ子にできるできないのルールに従わない場合には、CSSが適用されないことがあるのですね。 また、かような文法が原因とは思わなかったため、(もしかしたら空白や改行に原因があり、正確にテキストに転記ができない)直接developer toolの内容を修正せずに、ご覧頂くのが間違いないと思ったのですが、今後はテキストによる記載または、併記するように致します。 アドバイス、ありがとうございました!
kei344

2019/03/27 03:12

> 文法が原因 それが原因かはわかりません。別のCSSの影響の可能性もあります。(むしろそっちのほうが可能性が高い気がします) > 直接developer toolの内容を HTMLの構造については、出力されたHTML(ブラウザで「ページのソースを表示」)のほうが正確ですよ。ブラウザはHTMLの構造が崩れていても無理やり描画してくれるので、デベロッパーツールで構造の問題に気づけないこともあります。
SugiuraY

2019/03/29 13:27

ありがとうございます。 また、今更ですが、オンラインでHTMLチェッカー的なものも多く存在することがわかったので、こちらも活用してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問