入門CSS 第4話

2015/10/15 テクノロジー

入門CSS 第4話

CSS 講座もいよいよラスト(?)になりました。

前回はdisplayやposition,擬似クラスなどCSSでよく使うがわかりにくい概念を解説しました。

今回はCSSの優先度とレスポンシブデザインのお話になります。

CSS の優先度

例えば、CSSフレームワークで話題の Bootstrap などを利用している時や、既に多くのCSSが実装されている場合、ちょっとした要素を修正したい、という場面に出くわすことがあります。そんな時にしっておきたいのが、CSSの優先度です。例えば以下のコードの色は何色になるでしょうか？

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
  <div class="box">
    <span class="title">タイトル1</span>
  </div>
</body>

<style>
body {
  color: black;
}
.box {
  color: gray;
}
.title {
  color: green;
}
.box .title {
  color: red;
}
</style>
</html>

答えは赤です。最も指定が近く、具体的に表現されたものが優先されます。そのため、.title だけ指定したとしても、他のCSSで.box .title までの指定があれば、それが上書きされてしまいます。これはCSSのコードが多くなるにつれて、問題は顕著になります。

そこの問題を解決してくれるのが、Developer Toolです。Firefox では Firebug, Chromeではデベロッパーツールなどが提供されています。

Chromeのデベロッパーツールの例を見てみましょう。先ほどのHTMLを開いて、右クリック、要素の検証を選択します。すると、以下のようなウィンドウが下、もしくは右側に登場します。

developer tool

そこの中央、Stylesの中を注目してください。.box .titleが一番優先度が高く、それからどんどん下に優先度が下がっていっています。そして、一番上にある.box .titleのcolorスタイルだけが適用されていることがわかります。

この概念は、Bootstrapを使ったり、レスポンシブデザインを知る上で大変重要な概念です。ぜひ覚えておきましょう。

なお、例えばcolor 以外の要素を .box .title 以外に指定すれば、もし.box .title にそのCSS要素の指定がなければそれが適用されます。

レスポンシブデザイン

先ほどのCSSの優先度のことが理解できれば、レスポンシブデザインは簡単です。

そもそもレスポンシブデザインは何かと言うと、スマホやタブレット、パソコンなどでページのサイズが変わっても自動的にスタイルが変わって適用されるようなデザインのことです。

CallConnectなどはもちろんレスポンシブデザインです。試しに、ブラウザの横幅を縮めたり伸ばしたりしてみてください。それに合わせてデザインも変わります。

このようなデザインを理解するには、メディアクエリを知る必要があります。そのための設定がいくつか必要です。

viewportを指定する

まずはhead要素にviewport指定します。headタグ内に以下を追加しましょう。おまじないのようなものです。

<meta name="viewport" content="width=device-width, initial-scale=1">

あとはCSSで、まずはスマホデザインから実装します。

その後、タブレットデザインに適用するCSSを先ほどの優先度の概念を利用して、上書きしていきます。 そのためには、CSSに以下の記述をします。

@media screen and (min-width:768px) {
  // タブレット用のCSSをここに書く。
}

これで、768px以上になった時のCSSを書くことができます。先ほどのCSSの上書きの概念を使い、同じ要素に対してタブレット用のCSSを書きます。@media で指定された方が優先されるため、全く同じ要素を@mediaの外に書いたものより優先度が高くなります。

同じように、PCのデザインを適用したければ、

@media screen and (min-width:1024) {
  // PC用のCSSをここに書く。
}

と書いて、さらにタブレットよりも上書きたい内容を記述します。

終わりに

今回はCSSの優先度と、それから応用のレスポンシブデザインについて学びました。

例えばBootstrap などを利用しても、それらのCSSの上にさらに自分でCSSを修正したい場合に、この上書きの概念を知っておけば問題解決への時間は早まります。

ぜひDeveloper Tool を活用し、快適なCSSコーディング生活を送りましょう！

ブログ