基本セレクタ

基本はタイプセレクタ、classセレクタ、IDセレクタ。

属性セレクタ

属性セレクタを使えば、
特定の属性が指定されている要素や、 特定の属性に特定の属性値が指定されている要素など、
属性が指定されている要素に対してスタイルを適用出来る。

擬似クラス

擬似クラスは、要素が特定の状況の時にスタイルを適用するセレクタで、
例えば、その要素にマウスが乗った時や、マウスがクリックされた時などがある。
他にも、先頭の子要素として配置された時など特定の場所に配置された時だけスタイルを適用するものある。

式

式は、「○個目から△個おき」を示すもので、基本的には、「an+b」という形式で表す。
「n」は 0 から 1 ずつ増える整数。「a」と「b」の部分に整数を当てはめて、「a × n + b」の式を作る。
例えば、「2n+1」という式の場合、「n」は最初 0 なので、「2 × 0 + 1」で「1」となり、
次は、「n」が1になるので、「2 × 1 + 1」で「3」となり、その次は、「n」が「2」になるので、
「2 × 2 + 1」で「5」となり、奇数個目(1個目から2個おき)を表す式となる。
また、「an」の部分を省略して、特定の個数目の要素にだけを表すことも可能。
なお、奇数と偶数に関しては、「odd」(奇数)、「even」(偶数)というキーワードも使える。

疑似要素

疑似要素は、要素内の情報を追加したり、
先頭の行などの範囲にスタイルを適用する。

※. IE8以下に対応する場合は、「:」を1つにする必要がある。

結合子

結合子は、セレクタを組み合わせる事で、複数の要素にスタイルを適用したり、
適用する要素を絞り込むことができる。

様々なセレクタを使ってみよう。

1. 「css-lessons」 › 「chapter04」 › 「selectors」フォルダ内の「index.html」をテキストエディタで開く
2. HTMLの内容を確認

<h1>セレクタの練習</h1>

<section id="box1">
  <h2>ボックス1</h2>
  <p>
    ここはp要素でマークアップされており、<br>
    親のsection要素にid属性「<em>box1</em>」が指定されています。<br>
    <a href="#">これはアンカーテキストです。</a>
  </p>
</section>
<!-- /#box -->

<section id="box2">
  <h2>ボックス2</h2>
  <p>
    ここはp要素でマークアップされており、<br>
    親のsection要素にid属性「<em>box2</em>」が指定されています。<br>
    <a href="#">これはアンカーテキストです。</a>
  </p>
</section>
<!-- /#box2 -->

3. 「css-lessons」 › 「chapter04」 › 「selectors」フォルダ内の「style.css」をテキストエディタで開く
4. 「様々なセレクタを使って」スタイルを変更

/* ===========================
  基本セレクタ
=========================== */
/* 全称セレクタ */
* {
  font-size: 100%;
}

/* ===========================
  擬似クラス
=========================== */
/* 未訪問の時 */
a:link {
  color: blue;
}

/* 訪問済みの時 */
a:visited {
  color: green;
}

/* マウスが乗った時 */
a:hover {
  color: red;
}

/* クリックしている時 */
a:active {
  text-decoration: none;
}

/* ===========================
  結合子
=========================== */
/* グループセレクタ */
h1, h2 {
  font-family: serif;
}

/* 子孫セレクタ */
#box1 p {
 color: #666;
}

5. 上書き保存
6. 「css-lessons」 › 「chapter04」› 「selectors」フォルダ内の「index.html」をダブルクリック。
7. 様々なセレクタが適用されているかを確認

詳細度の計算

セレクタを構成する種類ごとに数を数え、それによって作られた3桁の数が大きい方が優先度が高くなる。

※.この3桁の数字の各桁は、たとえ該当するセレクタが10個以上あっても、繰り上がらないものとして考えます。
つまり、仮にクラスセレクタが10個以上あっても、IDセレクタが1つある方が詳細度は高くなります。

widthプロパティを使ってみよう。

1. 「css-lessons」 › 「chapter04」 › 「box」フォルダ内の「index.html」をテキストエディタで開く
2. HTMLの内容を確認

<header>
  <h1>ボックス関連のプロパティ</h1>
</header>
<main>
  <div class="container">
    <section class="section">
      <h2>セクション1</h2>
      <p>
        ここはp要素でマークアップされており、<br>
        親のsection要素のclass属性に「<em>section</em>」が指定されています。
      </p>
    </section>

    <section class="section">
      <h2>セクション2</h2>
      <p>
        ここはp要素でマークアップされており、<br>
        親のsection要素のclass属性に「<em>section</em>」が指定されています。
      </p>
    </section>
  </div>
  <!-- /.container-->
</main>
<footer>
  <p>ここはフッターです。</p>
</footer>

3. 「css-lessons」 › 「chapter04」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
4. class名「container」の横幅を変更するCSSを記述

body {
  background-color: #eee;
}

h1, h2 {
  font-size: 1em;
}

p {
  font-size: .875em;
}

header {
  background-color: #333;
  color: #fff;
}

footer {
  background-color: #333;
  color: #ccc;
}

.container {
  width: 90%;
}

.section {
  background-color: #fff;
}

5. 上書き保存
6. 「css-lessons」 › 「chapter04」› 「box」フォルダ内の「index.html」をダブルクリック。
7. 横幅が変更されたかを確認

heightプロパティを使ってみよう。

1. 「css-lessons」 › 「chapter04」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
2. 「header要素」に高さと行間を指定
   （高さと同じ大きさの行間を指定すると天地の中央揃えが出来る。ただし文字が2行になる場合は不可。）

body {
  background-color: #eee;
}

h1, h2 {
  font-size: 1em;
}

p {
  font-size: .875em;
}

header {
  background-color: #333;
  color: #fff;
  height: 48px;
  line-height: 48px;
}

footer {
  background-color: #333;
  color: #ccc;
}

.container {
  width: 90%;
}

.section {
  background-color: #fff;
}

3. 上書き保存
4. 「css-lessons」 › 「chapter04」› 「box」フォルダ内の「index.html」をダブルクリック。
5. 高さが変更されたかを確認

値の数による適用場所の違い

• 値が「1」つの場合は、「上下左右」全てに適用 ・・・ 例: margin: 10px;
• 値が「2」つの場合は、「上下」、「左右」の順で適用 ・・・ 例: margin: 10px 20px;
• 値が「3」つの場合は、「上」、「左右」、「下」の順で適用 ・・・ 例: margin: 10px 20px 5px;
• 値が「4」つの場合は、「上」、「右」、「下」、「左」の順で適用 ・・・ 例: margin: 10px 20px 5px 15px;

marginプロパティを使ってみよう。

1. 「css-lessons」 › 「chapter04」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
2. ブラウザのCSSによって指定されたマージンをリセット」し、各ブロック間の間隔を開け、
   class名「container」をセンタリングする

body {
  background-color: #eee;
  margin: 0;
}

h1, h2 {
  font-size: 1em;
  margin: 0;
}

p {
  font-size: .875em;
  margin: 0;
}

header {
  background-color: #333;
  color: #fff;
  height: 48px;
  line-height: 48px;
  margin-bottom: 16px;
}

footer {
  background-color: #333;
  color: #ccc;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.section {
  background-color: #fff;
  margin-top: 16px;
  margin-bottom: 16px;
}

3. 上書き保存
4. 「css-lessons」 › 「chapter04」› 「box」フォルダ内の「index.html」をダブルクリック。
5. 間隔が変更されたかを確認

値の数による適用場所の違い

• 値が「1」つの場合は、「上下左右」全てに適用 ・・・ 例: padding: 10px;
• 値が「2」つの場合は、「上下」、「左右」の順で適用 ・・・ 例: padding: 10px 20px;
• 値が「3」つの場合は、「上」、「左右」、「下」の順で適用 ・・・ 例: padding: 10px 20px 5px;
• 値が「4」つの場合は、「上」、「右」、「下」、「左」の順で適用 ・・・ 例: padding: 10px 20px 5px 15px;

paddingプロパティを使ってみよう。

1. 「css-lessons」 › 「chapter04」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
2. 各ブロックに余白を設定

body {
  background-color: #eee;
  margin: 0;
}

h1, h2 {
  font-size: 1em;
  margin: 0;
}

p {
  font-size: .875em;
  margin: 0;
}

header {
  background-color: #333;
  color: #fff;
  height: 48px;
  line-height: 48px;
  margin-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

footer {
  background-color: #333;
  color: #ccc;
  padding: 8px 16px;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.section {
  background-color: #fff;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 16px;
}

3. 上書き保存
4. 「css-lessons」 › 「chapter04」› 「box」フォルダ内の「index.html」をダブルクリック。
5. 余白が変更されたかを確認

値の数による適用場所の違い

• 値が「1」つの場合は、「上下左右」全てに適用 ・・・ 例: border-style: solid;
• 値が「2」つの場合は、「上下」、「左右」の順で適用 ・・・ 例: border-style: solid dotted;
• 値が「3」つの場合は、「上」、「左右」、「下」の順で適用 ・・・ 例: border-style: solid dotted dashed;
• 値が「4」つの場合は、「上」、「右」、「下」、「左」の順で適用 ・・・ 例: border-style: solid dotted dashed dashed;

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボーダースタイル</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css">
    p {
      padding: 16px;
    }

    .none {
      border-style: none;
    }

    .hidden {
      border-style: hidden;
    }

    .solid {
      border-style: solid;
    }

    .double {
      border-style: double;
    }

    .dotted {
      border-style: dotted;
    }

    .dashed {
      border-style: dashed;
    }

    .groove {
      border-style: groove;
    }

    .ridge {
      border-style: ridge;
    }

    .inset {
      border-style: inset;
    }

    .outset {
      border-style: outset;
    }
  </style>
</head>
<body>
  <h1>ボーダースタイル</h1>
  <p class="none">none</p>
  <p class="hidden">hidden</p>
  <p class="solid">solid</p>
  <p class="double">double</p>
  <p class="dotted">dotted</p>
  <p class="dashed">dashed</p>
  <p class="groove">groove</p>
  <p class="ridge">ridge</p>
  <p class="inset">inset</p>
  <p class="outset">outset</p>
</body>
</html>

値の数による適用場所の違い

• 値が「1」つの場合は、「上下左右」全てに適用 ・・・ 例: border-width: 10px;
• 値が「2」つの場合は、「上下」、「左右」の順で適用 ・・・ 例: border-width: 10px 20px;
• 値が「3」つの場合は、「上」、「左右」、「下」の順で適用 ・・・ 例: border-width: 10px 20px 5px;
• 値が「4」つの場合は、「上」、「右」、「下」、「左」の順で適用 ・・・ 例: border-width: 10px 20px 5px 15px;

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボーダーの幅</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css">
    p {
      padding: 16px;
      border-style: solid;
    }

    .border1 {
      border-width: 1px;
    }

    .border2 {
      border-width: thick thin;
    }
  </style>
</head>
<body>
  <h1>ボーダーの幅</h1>
  <p class="border1">border1</p>
  <p class="border2">border2</p>
</body>
</html>

値の数による適用場所の違い

• 値が「1」つの場合は、「上下左右」全てに適用 ・・・ 例: border-color: #ccc;
• 値が「2」つの場合は、「上下」、「左右」の順で適用 ・・・ 例: border-color: #ccc #000;
• 値が「3」つの場合は、「上」、「左右」、「下」の順で適用 ・・・ 例: border-color: #ccc #000 red;
• 値が「4」つの場合は、「上」、「右」、「下」、「左」の順で適用 ・・・ 例: border-color: #ccc #000 red blue;

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボーダーの色</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css">
    p {
      padding: 16px;
      border-style: solid;
    }

    .border1 {
      border-color: #ddd;
    }

    .border2 {
      border-color: #000 #666 #ccc #eee;
    }
  </style>
</head>
<body>
  <h1>ボーダーの色</h1>
  <p class="border1">border1</p>
  <p class="border2">border2</p>
</body>
</html>

値の数による適用場所の違い

• border の場合は、「上下左右」全てに適用 ・・・ 例: border: 1px solid #ddd;
• border-top の場合は、「上」に適用 ・・・ 例: border-top: 1px solid #ddd;
• border-right の場合は、「右」に適用 ・・・ 例: border-right: 1px solid #ddd;
• border-bottom の場合は、「下」に適用 ・・・ 例: border-bottom: 1px solid #ddd;
• border-left の場合は、「左」に適用 ・・・ 例: border-left: 1px solid #ddd;

borderプロパティを使ってみよう。

1. 「css-lessons」 › 「chapter04」 › 「box」フォルダ内の「style.css」をテキストエディタで開く
2. class名「section」や、class名「section」内のh2要素に境界線を設定する

body {
  background-color: #eee;
  margin: 0;
}

h1,h2 {
  font-size: 1em;
  margin: 0;

}
p {
  font-size: .875em;
  margin: 0;
}

header {
  background-color: #333;
  color: #fff;
  height: 48px;
  line-height: 48px;
  margin-bottom: 16px;
  padding-left: 16px;
  padding-right: 16px;
}

footer {
  background-color: #333;
  color: #ccc;
  padding: 8px 16px;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.section {
  background-color: #fff;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #ddd;
}

.section h2 {
  border-left: 4px solid #333;
  border-bottom: 1px solid #ddd;
  padding-left: 8px;
  padding-bottom: 4px;
  margin-bottom: 16px;
}

3. 上書き保存
4. 「css-lessons」 › 「chapter04」› 「box」フォルダ内の「index.html」をダブルクリック。
5. 境界線が設定されたかを確認