マーカーネット株式会社

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

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

関連記事

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

【2014年総まとめ】今年一番多く使ったWEBフォント

【2014年総まとめ】今年一番多く使ったWEBフォント

こんばんわ~WEBデザイナーのHです。 本日はこの1年間、実際のWEBデザイン制作を通して、一番多く使ったWEBフォント、トップ3をご紹介します。 中には有料のものもありますが、社内で共有することを優 …

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

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

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

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …

クオリティの高い“フリー写真素材サイト”まとめ編!

皆さん! こんばんは!! 株式会社マーカーネットでwebデザインを修行をしている新人デザイナーKです。 今回、私が皆さんにご紹介したいのはweb制作は欠かせない「素材」についてです。正確には、クオリテ …