【ゼロからはじめるプログラミング】CSS学習＃8

ゼロからはじめるプログラミング講座の第十二回です。今回でCSSの解説は終わりの予定です。次の言語へ向けての雑談回はあります。

今回は今まで解説してこなかったテクニックなどを紹介します。

同じプロパティは省略しよう。
HTMLに直接スタイルを書いてみよう。
プロパティdisplayを使ってみよう。

同じプロパティは省略しよう。

複数のセレクタで同じプロパティと同じ値を使うことがあります。例えば色だけが違うBOXがあったとします。全てのセレクタに同じ値のコードを書くとすると、コード量が多くなってしまいます。そこで値が同じ部分をまとめる方法を紹介します。

#box1{
  width: 50px;
  height: 50px;
  border: 1px solid;
  background: red;
}
#box2{
  width: 50px;
  height: 50px;
  border: 1px solid;
  background: blue;
}
#box3{
  width: 50px;
  height: 50px;
  border: 1px solid;
  background: green;
}

BOX1

BOX2

BOX3

background以外はプロパティと値が同じです。こういう場合にまとめて複数のセレクタに値を設定する方法があります。セレクタとセレクタを「,」カンマで区切るだけです。

#box1, #box2, #box3{
  width: 50px;
  height: 50px;
  border: 1px solid;
}
#box1{
  background: red;
}
#box2{
  background: blue;
}
#box3{
  background: green;
}

これでコード量が減ります。さらにクラスを使うことでよりスマートになります。

<div id="box1" class="box left">BOX1</div>
<div id="box2" class="box left">BOX1</div>
<div id="box3" class="box clear">BOX1</div>

.box{
  width: 50px;
  height: 50px;
  border: 1px solid;
}
#box1{
  background: red;
}
#box2{
  background: blue;
}
#box3{
  background: green;
}
.left{
  float: left;
}
.clear{
  clear: both;
}

BOX1

BOX2

BOX3

まず見て欲しいのがclass=”box left”の部分です。今まで説明してきませんでしたがidは固有で1つしか設定できないのに対して、classはいくつでも設定することができます。

複数のクラスを設定する場合は「スペース」を使って間を空けます。

.box{}には箱の形を、#idで色や特別なプロパティを受け付けるようにします。

そして.left{}と.clear{}には1つだけプロパティと値を設定しています。

このようにあらかじめ頻繁に使うようなプロパティを付けたクラスを作っておくことでHTMLのコードの管理がしやすくなります。

また複数のクラスを付けられた要素を単一のセレクタとして扱う場合はクラスをつなげて書きます。スペースを入れると複数セレクタと見なされます。

<div class="box left right up">BOX1</div>
<div class="box left right down">BOX2</div>
<div class="box left right side">BOX3</div>

これを単一セレクタを使って指定してみます。違いを注意深く見てください。

.box.left.right{
  width: 50px;
  height: 50px;
}
.box.left.right.up{
  background: red;
}
.right.down{
  background: blue;
}
.box.right{
  border: 1px solid;
}
.box .side{
  background: green;
}

BOX1

BOX2

BOX3

BOX3だけは背景色が設定されていませんね。クラスの間にスペースが入っているので入れ子の複数セレクタを指定する形になっています。

逆に入れ子の親も指定する場合はスペースを空けましょう。

<ul>
  <li class="red blue">リスト</li>
</ul>

ul .red.blue{ }

HTMLに直接スタイルを書いてみよう。

スタイルシートは<link>で外部から読み込むと初めに説明してずっとそのようにして扱ってきましたが、HTMLに直接書くこともできます。書き方は2つあります。

<head></head>内に書く方法
各タグ内にstyle属性を使って書く方法

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .box{ background: red; }
    #box1{ background: blue; }
  </style>
    <meta charset="utf-8" />
    <title>CSS</title>
</head>
<body>
  <div id="box1" class="box">BOX</div>
  <div style="background: red; border: 1px solid;">BOX</div>
</body>
</html>

<head>内に書く場合は<style type=”text/css”></style>の間にいつものようにセレクタとプロパティと値を書きましょう。

タグに直接書く場合はstyle=””属性の中にプロパティと値だけを書きましょう。複数のプロパティを使う場合はスペースで区切りましょう。