マーカーネット株式会社

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

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

関連記事

【超便利】作業効率化ができるタブ表示拡張機能

突然ですが皆様、画面がごちゃごちゃになったこと、ありませんか?   Macをお使いの方は、“タブでまとめればいいじゃん!”と思うかもしれませんが、 windowsユーザーはそうはいきませんよ …

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

ホームページ制作にかかわる肩書別完成するまでのプロセスまとめ

WEBデザイナー、WEBディレクター、WEBプログラマー、WEBプロデューサー、プランナー、ライター、営業さん、ときおりカメラマンANDクライアント。とまぁたったひとつのホームページが出来上がるまでに …

ワードプレス導入時に入れておくと便利なプラグイン(セキュリティ編)

ワードプレス導入時に入れておくと便利なプラグイン(セキュリティ編)

ワードプレスはオープンソースのため、そのソースコードが公開されております。 誰でも無償で、誰でも改変して商用利用も可能であるというメリットもございますが、 デメリットとして悪意のある者から不正侵入を許 …

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …

知らなかった!じゃ済まされない。フラットデザインの落とし穴

こんばんわ!WEBデザイナー歴10年目に突入間近のHです! 以前、2015年に流行るWEBデザインのトレンドを3つ、ご紹介させて頂きました。 ①フラットデザインの更なる普及 ②クリックを出来るだけ減ら …