【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

CSSの優先順位を自在に適応させる方法

CSSの優先順位を自在に適応させる方法

みなさまはじめまして。6月よりセールス部に配属されました、新入社員の泉(いずみ)と申します。初投稿ですがよろしくお願い致します。

さて、見やすいページであったり、操作性の良いページはユーザーにより良い体験をしてもらうことができますし、結果的にコンバージョンにつながる重要な要素です。

優れたUIを持ったページを作成するためにCSSで見せ方を考えて編集していくわけですが、同じHTML上で複数のCSSルールが存在すると、重複したルールが適応されないといったような問題が起こってしまうことがあります。そこで今回は「こっちのルールを適応したいのに…」「でも、このコードは消せない…」といった時に役立つCSSルールの優先順位を操作する方法をご紹介します。

CSSの規則、カスケードとは

CSSのルールは先に書かれたルールから順に適応されるという大原則が存在します。しかし、例外としてHTMLの同じ要素に適応されるセレクターのルールが出てきた場合、後から出てきたほうのルールが先に書かれたルールをプロパティ単位で上書きするようになっています。この上書きの規則を「カスケード」といいます。

カスケードルールを用いたcssを以下に例として表してみます。

詳細度の計算例〈例2〉

p{
    color:#000000;    /*適応されない*/
} 
p{
    color:#696969;    /*適応される*/
}

上記のように同じセレクターに適応されたルールは後から出てきたルールに上書きされるようになっています。

詳細度

優先順位にはもう一つの規則があります。汎用的に適応されるセレクタより特定の要素をピンポイントで修飾するセレクターのほうが優先度が高くなります。「より限定した範囲でルールを適応する」イメージです。これを【詳細度】といいます。

~セレクターの点数~

詳細度はセレクターの種類(クラスセレクター、タイプセレクターなど)によって点数が決まっており、複数のセレクターが指定されている場合はセレクター同士の点数を足し算し、点数が高い方を選んでいきます。以下に、それぞれのセレクターの点数をまとめてみます。

全称セレクター 0
タイプセレクター、疑似要素 1つにつき 1
クラスセレクター 10
IDセレクター1個につき 100
タグのstyle属性に書かれたCSSルール 1000

~詳細度の計算例~

次に前述の点数表を参考にして詳細度の計算例を以下にまとめます.

セレクター セレクターの種類 詳細度
* 全称セレクター 0 0
p タイプセレクター 1 1
li.last-child タイプセレクター+疑似要素 1+10 11
p .blue タイプセレスター+クラスセレクター 1+10 11
#1 IDセレクター 100 100
style=”” タグのスタイル属性 1000 1000

上記の点数表と計算例を参考にすると、
実際のCSSでは以下のように計算され、優先順位が決まります。

詳細度の計算例〈例2〉

.lab ul li{    /*クラスセレクター+タイプセレクター+タイプセレクター*/
margin:0 10px; /*      10      +       1       +       1       =12*/
color:#000000;
}
.lab ul li:last-child{ /*クラスセレクター+タイプセレクター+タイプセレクター+疑似要素*/
margin-left:0;         /*       10      +       1       +       1      +   10   =22*/
}

〈例2〉の計算では「.lab ul li:last-child」の方が詳細度の点数が上なので、.lab ul li:last-child部のみmargin-left:0が反映されることになります。
このようにして、詳細度の規則では点数化することで優先されるべきセレクターを決めているような形になっています。
しかし、詳細度の規則を度外視して優先させる方法が一つあります。

!important

!importantキーワードを使用すると、先ほど紹介しました詳細度、カスケードの優先順位を無視して最優先でスタイル宣言をすることができます。
!importantは小難しいことは置いておいて最優先でCSSを適応できて便利なのですが、容易に使いすぎると、!importantと!importantが重複して何が利いているのか分からなくなったりするので注意してください。!importantの使用方法ですが、!importantキーワードは適応したいスタイル宣言の一番後ろに記述します。

!importantの例〈例3〉

#lab{
background-color:#aaa !important;
color:#e10f0f;
}
#lab{
background-color: #f6f6f6;
font-weight:bold;
}

このように!importantを使用すると、先に記載されているのにも関わらず、!importantの規則に従って「background-color:#aaa ;」が優先され、下記のようにCSSが適応されます。

#lab{
background-color:#aaa ;
color:#e10f0f;
font-weight:bold;
}

!importantは苦肉の策

!importantは苦肉の策ですのであまりお勧めしません。できるだけカスケードと詳細度の規則の中で優先順位をつけられるように、規則を意識した整理されたCSSを作成していきたいですね。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+