基本書式

スタイルシートの言語としてCSSを使う場合、基本的な書式は次の通りです。

セレクタ {プロパティ: 値}
-----例-----
h1{color:red;}
h2{color:blue;}

複数のセレクタに対し同じプロパティへ同じ値を設定するために。セレクタはまとめて記載することも可能です。

セレクタ,セレクタ {プロパティ: 値}
セレクタ,
セレクタ {プロパティ: 値}

-----例-----
h1,h2,h3{color:red;}
h1{font-size:20px;}
h2{font-size:15px;}
h3{font-size:10px;}

基本的なセレクタは大きくわけて4つに分けることができます。

  • 要素セレクタ

    htmlのタグで指定する

  • クラスセレクタ

    cssクラスを指定する。書式は".クラス名"

  • IDセレクタ

    htmlタグに指定したIDで指定する。書式は"#クラス名"

  • ユニバーサルセレクタ

    全ての要素を一括で指定する。書式は"*"

要素セレクタ
h1{color:red;}
クラスセレクタ
.title{color:blue;}
IDセレクタ
#Nav{color:Yellow;}
ユニバーサルセレクタ
*{margin:0;}

基準要素からの位置関係セレクタ

セレクタで指定した要素からの位置(兄弟子孫)関係で、要素を指定する方法です。

  • 子孫セレクタ

    基準からすべての子孫に適用させる。"セレクタ セレクタ"で指定する

  • 子セレクタ

    基準からすべての子のみ適用させる。"セレクタ>セレクタ"で指定する

  • 隣接兄弟セレクタ

    基準に隣接している要素に適用させる。"セレクタ+セレクタ"で指定する

  • 兄弟セレクタ(CSS3)

    基準より後にある要素に適用させる。"セレクタ~セレクタ"で指定する

サンプル

/*CSS*/
  .title {
    font-size:20px;
  }
  .style1 .title{
    color:red;
  }
  .style2>.title{
    color:blue;
  }
  .style3+p{
    color:green;
  }
  .style4~p{
    color:green;
  }

/*html*/
  <h3 class="title">関係セレクタの見本</h3>
  <div class="style1">
    <h3 class="title">子孫セレクタ</h3>
    <div>
      <h3 class="title">子孫要素</h3>
    </div>
  </div>
  <br />
  <div class="style2">
    <h3 class="title">子セレクタ</h3>
    <div>
      <h3 class="title">子孫要素</h3>
    </div>
  </div>
  <br />
  <div>
    <h3 class="style3">隣接兄弟セレクタ</h3>
    <p>1つ目の隣接兄弟セレクタ</p>
    <p>2つ目の隣接兄弟セレクタ</p>
  </div>
  <br />
  <div>
    <h3 class="style4">兄弟セレクタ</h3>
    <p>1つ目の隣接兄弟セレクタ</p>
    <p>2つ目の隣接兄弟セレクタ</p>
  </div>

以上のコードを入力すると下のような結果となります。

子孫セレクタで指定されている要素は孫要素もスタイルが適用されているのに対し、子セレクタで指定されている要素は孫要素にスタイルが適用されていません。

隣接兄弟セレクタでは、"style3"の直後の要素にスタイルが適用されていますが、それ以降の要素にはスタイルが適用されていません。対して兄弟セレクタは"style4"以降すべての要素にスタイルが適用されています。


疑似クラス・疑似要素

疑似クラス・疑似要素はたくさんあり、ここでは書ききれないので、私がよく使う代表的なものだけを紹介します。

セレクタにはHTMLにクラスや要素を指定しなくても、疑似的にあるように扱うことで、スタイルを適用させることができるセレクタもあります。これを疑似クラス・疑似要素といいます。この二つの違いはクラスをあるものとしてふるまうか、要素をあるものとしてふるまうかの違いとなります。

疑似クラス

  • E:link

    未訪問リンク

  • E:visited

    訪問済みリンク

  • E:hover

    ユーザーの操作でカーソルなどがリンクの上にある状態。(クリックされていない)

  • E:active

    ユーザーの操作でカーソルなどがリンクの上にある状態。(クリックされてから離されるまで)

  • E:first-child

    要素内で最初に現れる子要素

  • E:nth-of-type(n)

    n番目に現れる要素(CSS3)

  • E:nth-last-of-type(n)

    後ろからn番目に現れる要素(CSS3)

疑似要素

  • E:first-letter

    最初に現れる文字

  • E:first-line

    最初の行