【初心者向け】CSSセレクタとは？書き方・指定方法・よく使用するセレクタも解説

セレクタとは?

これだけだと少し分かりづらいと思いますので、詳しくみていきましょう。

CSSは、「セレクタ」「プロパティ」「プロパティ値」の3つで構成されます。

それぞれを記述することで「どの要素（セレクタ）の、何を（プロパティ）、どのように（プロパティ値）する」という命令文が成立します。

「セレクタ」は以下のような部分を示しています。

それでは例をみていきましょう。

上記の場合、「h1タグの文字色を赤色にする」というものになります。

よく使用するセレクタ

タイプセレクタ

タイプセレクタの例

タイプセレクタはHTMLタグを指定することで、装飾を施す範囲を指定します。

下記の例はh1要素の文字を赤色にしています。

HTML

<h1>見出し</h1>

<p>本文</p>

CSS

h1 {

 color: red;

}

ブラウザ

ユニバーサルセレクタ

ユニバーサルセレクタの例

ユニバーサルセレクタは「*（アスタリスク）」と記述することで、すべての要素に装飾が適用されます。

下記の例は「*」ですべての要素の文字を赤色にしています。

HTML

<h1>見出し</h1>

<p>本文</p>

CSS

* {

 color: red;

}

ブラウザ

クラスセレクタ

/* class="title"が指定されているh1要素に適用させる */

h1.title { ~ }

/* class="title"が指定されているすべての要素に適用させる */

*.title { ~ }

/* 「*」を省略した書き方 */

.title { ~ }

クラスセレクタの例

クラスセレクタは「.（ドット）クラス名」と記述することで、指定のクラスに装飾が適用されます。

下記の例はclass属性titleの文字を赤色にしています。

HTML

<h1 class="title">見出し</h1>

<p>本文</p>

CSS

.title {

 color: red;

}

ブラウザ

IDセレクタ

/* id="title"が指定されているh1要素に適用させる */

h1#title { ~ }

/* id="title"が指定されているすべての要素に適用させる */

*#title { ~ }

/* 「*」を省略した書き方 */

#title { ~ }

IDセレクタの例

IDセレクタは「#（シャープ）ID名」と記述することで、指定のIDに装飾が適用されます。

下記の例はid属性titleの文字を赤色にしています。

HTML

<h1 id="title">見出し</h1>

<p>本文</p>

CSS

#title {

 color: red;

}

ブラウザ

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

まとめ