マーカーネット株式会社

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

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

関連記事

【Vol.3】優れたキャッチコピーを見て、閃き力を上げよう!【ファッション編】

は~るがき~た、は~るがき~た♪ みなさまこんばんは。いかがお過ごしでしょうか? 桜の花が各地で満開を迎え、 日差しもあたたかくなり春を感じることが少しずつ増えていく毎日ですね。 春は出会いと別れの季 …

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

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

データベース(MySQL)の日付操作について

データベース(MySQL)で普段よく使いますが、 なかなか覚えられない、日付の操作のSQLについて書きます。 以下のようなニュースのテーブルが存在します。 CREATE TABLE IF NOT EX …

エラーページすら面白い!ユニークな404エラーデザイン

エラーページすら面白い!ユニークな404エラーデザイン

WEBサイトを閲覧しているとき、ページが存在しない404エラー画面に遭遇したことはありませんか? デフォルトの状態だと全面白い背景の上に黒文字で「Not Found」となっているだけですが、 とても凝 …

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。 素材がなくても、Phoshopを使えば普通の写真もステキな素材になります! ここで写 …