個別記事のページです

2014年10月22日(水)
このエントリーをはてなブックマークに追加

CSSが一部利かないを解消する方法

前回、CSSが利かない時に見直すポイントという記事を投稿しましたが、
今回は更にステップアップした、CSSを設定する時の注意点をご紹介します。


例えば下の図のようにテキストを入力して、
○行目のテキストだけは赤色にして、他のテキストは青色にしたい...とするとします。

まずはhtmlでリストを用意。

サンプルのhtmlを用意

今回は1行目と2行目を赤色にして、それ以外は青色にする事にします。

htmlは以下のように作成。

サンプルのhtmlの中身

CSSは以下のように作成。

サンプルのCSSの中身

ブラウザで確認してみると...何故か全て青いテキストに!

何故かCSSが適用されていない

class名の指定も合っている筈...という事で、ブラウザに搭載されている機能「要素を検証」でCSSをチェック。

ブラウザの要素の検証機能

すると、<li>の中に入れたclass「css2」が無視され、
divに指定したidで指定したスタイルが強制的に適用されていました。


CSSのルール上、classよりもidでの指定が優先されたり、
子要素のid・classより親要素のid・classでの指定が優先されるなど複雑なルールが存在しています。


div要素にあったidでの指定を取り消して、赤色と青色それぞれにclassを付けてCSSを設定すれば解決できますが、
これだと今後テキストが追加された時にいちいちclassを指定しなければいけないので手間がかかります。

作成に手間のかかるhtmlの例

そこでhtmlを書き換えず、CSSも最初の記述の原型を留めたままでCSSの指定を必ず読ませる便利な技があります。


以下のCSSをご覧ください。

!importantを指定したCSS

class「css2」の色指定に「!important」と追加しました。それ以外は最初に作成したCSSから変わっていません。


「!important」はCSSのルールを無視して再優先で読み込ませる、ある意味掟破りの単語です。


ブラウザで「!important」追加後のページを見てみると、css2を指定した文字がちゃんと赤くなりました。

思い通りにCSSが利いた状態のhtml

むやみに!importantを使うのも避けたいですが、
div要素やsection要素が増えすぎて子要素にかけたCSSが利かない...という問題が発生したら、
この方法で解決するのも1つの手ですね。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ