マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEB制作

脱初心者!CSSのちょっとしたテクニック!CSSが効かない問題を回避!

投稿日:2014年6月19日 更新日:

「CSSを設定したのに効かない!?」っていうことありますよね。
その場合、一概には言えませんが、もしかしたらCSSの書き方が原因かもしれません。
下記を参考に、CSSを書き直せば直る可能性もぐっと高まります!

CSSの優先度はデフォルトでは上から読み込まれるため、後から書いているスタイルが優先されます。

——————————————–
p.hoge { color: green; }
p.hoge { color: red; }
p.hoge { color: blue; }

この文字は青になります。

——————————————–

上記の場合は最後にblueを指定している為、pの文字の色は青になります。

——————————————–
.hoge2 { color: green; }
p.hoge2 { color: red; }
.hoge2 { color: blue; }

この文字は赤になります。

——————————————–

上記は最後にblueを指定していますが、その前にタグpという個別性を指定している為、優先度が高くなり文字の色は赤くなります。

裏ワザとして「!important」を使用してCSSの優先度を変更する方法もあります。

——————————————–
.hoge3 { color: green !important; }
p.hoge3 { color: red; }
.hoge3 { color: blue; }

この文字は緑になります。

——————————————–

上記は「!important」を指定して一番初めに書いたgreenを最優先に指定しています。
そのため、他の指定を無視して文字の色は緑になっています。

CSSの構築で詰まる方も少なくないかと思いますので、「CSSを設定したのに効かない!?」と感じた場合はこの記事を思い出して頂ければと思います。

-CSS, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る機会がここ最近かなり増えて来ました。 かくいうこのブログもレスポンシブ対応しています。 レスポンシブサイトを作る時には デザイン面等でも気を付ける事は幾つかありますが、 今回は …

VScodeのおすすめ設定と拡張機能

使用しているエディター こんにちは。2年目コーダーXです。コーデイングをされる方、何のエディターをお使いですか? 私は、コーデイングを始めてからずっと「Sublime Text」を使用してきたのですが …

中国語圏のSEO事情を知る!多言語サイト向けSEO対策の基礎知識

中国語圏のSEO事情を知る!多言語サイト向けSEO対策の基礎知識

ここ最近、サイト多言語化の依頼が増えておりますが、 そもそも多言語サイト向けのSEO対策はどうすればいいのかと思ってる方のために、 今回は中国語圏のSEO事情について少し説明させていただきたいと思いま …

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ http://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook

背景に動画を取り入れたWEBデザイン

背景に動画を取り入れたWEBデザイン

動画を取り入れたWEBサイト。 大分主流となってきて、見かける頻度も一段と増えました。 動画 = 重い という概念もどこへやら。。 最近のWEB動画はとても軽い。 背景として動画を入れ、飽きさせること …