第3回 基本的なセレクタの解説 - CSS Level 1 - ブロガー向けCSS入門

f:id:nasust:20161212143136j:plain


この記事は以下のブロガー対象としています。

  • ブログをカスタマイズしたい
  • 全くCSSの知識が無い

こんにちはnasustです。

セレクターとは、前回(第2回 CSSの基本的な書き方 - ブロガー向けCSS入門 - nasust blog)で、
スタイルを適用させるルールであると解説してしました。
今回は基本的なCSSセレクタについて解説します。

CSSは3回バージョンアップしています。 その度にセレクターの種類も増えていますので。

この記事では最初のCSS Level 1の範囲のセレクタを解説します。

CSS Level 1のセレクタの種類

CSS Level 1のセレクタは最も使用する基本的な物です。 以下の様に種類があります。

クラスセレクタ

クラスセレクタは最も使う頻度が高いです。
ブログのカスタマイズなどは主に、このセレクタを使用して行います。

例:CSSファイル

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        .font-color-red{
            color:red;
        }
    </style>
</head>
<body>
    <p>おはようございます</p>
    <p class="font-color-red">こんにちは</p>
</body>
</html>

クラスセレクタは、クラス名を追加した要素にスタイルを適用します。
名前を付けるだけなので、最も使いやすく使われています。

. + クラス名 という書式です。

例: .font-color

ブログをカスタマイズする際には、新たにクラスセレクタのスタイルを再定義することで、 自分のデザインを表現することができます。

例:ブログのカスタマイズでスタイルを再定義する

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        .font-color{
            color:red; ← ブログでは赤のフォントがデフォルトで指定してある
        }
        
        .font-color{
            color:blue; ← 自分のデザインでは青にする。
        }
    </style>
</head>
<body>
    <p>おはようございます</p>
    <p class="font-color">こんにちは</p>
</body>
</html>

このように同じクラス名でスタイルを再定義することで、ブログをカスタマイズできます。

ID セレクタ

クラスセレクタと同じ様な書式です。
タグのid属性に適応します。

# + id名 という書式です。

例: #contents

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        #contents{
            font-size:16px;
        }
        
        .font-color{
            color:red;
        }
    </style>
</head>
<body>
    <section id="contents">
        <p>おはようございます</p>
        <p class="font-color">こんにちは</p>
    </section>
</body>
</html>

sectionタグのidにcontentsが指定されています。この中のフォントのサイズが16pxになります。

ブログのカスタマイズの場合、クラスセレクタと同じように再定義して上書きできます

コンテキスト セレクタ

コンテキスト セレクタは要素セレクタとも言います。

タグ名に対してスタイルを適用させます。

例:

p { color:red }

このように要素を指定します。

例:html

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        p {
            color:red
        }
    </style>
</head>
<body>
    <section>
        <p>おはようございます</p>
        <p>こんにちは</p>
    </section>
</body>
</html>

pタグの文字が全て赤になります。

そしてこのコンテキストセレクタは適応させるパターンを指定することが出来ます。

コンテキストセレクタのパターン

例えば、section pと指定することができます。
これはsectionタグの中のpタグにスタイルを適用するというパターンです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        section p {
            color:red
        }
    </style>
</head>
<body>
    <section>
        <p>おはようございます</p>
        <p>こんにちは</p>
    </section>
    <p>さようなら</p>
</body>
</html>

この例では、”おはようございます”と"こんにちは"が赤色になります。
"さようなら"の色は変わりません。

また、パターンでクラス名を指定することも出来ます。

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        section p {
            color:red
        }
        section .font-color-blue{
            color:blue;
        }
    </style>
</head>
<body>
    <section>
        <p>おはようございます</p>
        <p>こんにちは</p>
    </section>
    <section>
        <p>さようなら</p>
        <p class="font-color-blue">おやすみ</p>
    </section>
    <p class="font-color-blue">睡眠中</p>
</body>
</html>

"さよなら"は赤ですが、"おやすみ"は青になります。
この例ですと、section pの赤色がsection .font-color-blueでスタイルが上書きされ青色になります。
"睡眠中"の色はパターンに一致しないので、黒のままです。

擬似クラス

htmlのaタグの状態を表すパターンでスタイルを適応させる事が出来ます。
擬似クラスは以下の通りです。

  • a:link ⋯ 訪れていないリンクの状態
  • a:visited ⋯ 訪れた後のリンクの状態
  • a:active ⋯ リンクをマウスをクリック(マウスダウン)した状態

cssの例

a:link{
    color:blue;
}

a:visited{
    color:red;
}

a:active{
    color:green;
}

上記の例ですと、訪問前のリンクの色が青色で、訪問後は赤くなります。
リンクにマクスをクリックした状態ですと緑色になります。

#contents a:link{
    color:blue;
}

このようにパターンで適用させる事もできます。

擬似要素

擬似要素とは、あるスタイルのパターンに一致したタグに擬似的な要素を適用させます。 擬似要素は以下の通りです。

  • ::first-line ⋯ 最初の行に一致する
  • ::first-letter ⋯ 最初の文字に一致する

これは言葉では説明しにくいので例で説明します。

例 :first-line

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        p::first-line{
            color:red;
            font-size:32px;
        }
    </style>
</head>
<body>
    <section>
        <p>我輩は猫である<br>
            我輩は犬である
        </p>
    </section>
</body>
</html>

表示例:


我輩は猫である
我輩は犬である


例 :first-letter

<!DOCTYPE html>
<html lang="ja">
<head>
   <style>
        p::first-letter{
            color:red;
            font-size:32px;
        }
    </style>
</head>
<body>
    <section>
        <p>我輩は猫である</p>
    </section>
</body>
</html>

表示例:


我輩は猫である
我輩は犬である


まとめ

CSS Level 1のセレクタは以下の様に種類があります。

シンプルなので覚え易いかと思います。
次回はCSS Level 1のプロパティについて解説します。


次回

第4回 フォント関係のプロパティ - CSS Level 1 - ブロガー向けCSS入門 - nasust blog

ブロガー向けWEBデザイン入門に戻る

広告を非表示にする