CSS #02 セレクタ①

2017年8月17日 2017年9月12日

こんにちは！
UPSTARTSのSベンです！

今回から3回に分けて

CSSにおいて重要な「セレクタ」についてやっていきます。

CSSの書き方
セレクタとは？

CSSの書き方

CSSの基本の書き方としてはこのような形になります。

/* 一行に書く場合 */
セレクタ{ プロパティ:値; }

/* 複数行書く場合 */
セレクタ{
    プロパティ:値;
    プロパティ:値;
}

/* 一行に書く場合 */

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

/* 複数行書く場合 */

セレクタ{

プロパティ:値;

}

セレクタとは？

セレクタとはスタイルを適用する対象のことです。

セレクタを正しく指定しないと、

思った所にスタイルを適用する事ができなくなってしまうので、

よく覚えておいてください。

では実際にセレクタを使っていきましょう！

今回はこちらのhtmlにスタイルをあてていきます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSSレッスン</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>悪魔の実</h1>
        <p id="strongest">ロギア</p>
        <p class="strong">パラミシア</p>
        <p class="strong">ゾオン</p>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSSレッスン</title>

</head>

<body>

<p class="strong">パラミシア</p>

</body>

</html>

ユニバーサルセレクタ

ではまず「ユニバーサルセレクタ」から見ていきます。

これは全ての要素に対してというセレクタになります。

書き方は以下のようになります。

* {
    color: red;
}

* {

color: red;

}

要素名を指定したセレクタ

次に要素名を指定したセレクタです。

h1やpなどの要素を指定し、スタイルをあててあげる事ができます。

書き方は以下になります。

h1 {
    color: red;
}
p {
    color: blue;
}

h1 {

color: red;

}

p {

color: blue;

}

id名やclass名を指定したセレクタ

次にid名やclass名を指定したセレクタです。

これはhtmlのレッスンで軽く触れた内容になります。

idはid名の前に「#」、

classはclass名の前に「.」を付けます。

#strongest {
    color: red;
}
.strong {
    color: blue;
}

#strongest {

color: red;

}

.strong {

color: blue;

}

今回はセレクタ第一弾をやっていきました。

次回はセレクタの第二弾です。

ではまた次回！