[CSS]セレクタの指定方法

[CSS]セレクタの指定方法

セレクタの指定方法は様々あって、非常に複雑な構成にすることも可能です。よく使う基本的な書き方について説明いたします。

セレクタの指定方法は、大きく分けて4通りあります。

  • アスタリスクで指定
  • HTMLのタグで指定
  • クラスで指定
  • IDで指定

実際に以下のようなHTMLがあると仮定して説明していきます。

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="style.css" />
 <title>セレクタの指定方法</title>
</head>

<body>

<h1>セレクタとは</h1>
<p>CSSで要素を指定する記述のことです。</p>
<div class="hoge">本記事では<span id="foo">セレクタ</span>について記述します。</div>

</body>
</html>

アスタリスクで指定

すべての要素に対して同じスタイルを適用する時は、セレクタにアスタリスク(*)を使います。

* {
 color:red;
}

このようにアスタリスクをセレクタに書くと、すべての要素が同じスタイルになります。

HTMLのタグで指定

セレクタの指定には、HTMLのタグをそのまま使うことができます。

h1{
 color:blue;
}

p{
 color:red;
}

div{
 font-size:8px;
}

このようにタグをセレクタとして指定することで、h1要素が青色、p要素が赤色、div要素のフォントサイズが8pxになります。

クラスで指定

クラスに対してスタイルを適用する場合、頭にピリオド(.)をつけたクラス名をセレクタに指定します。

.hoge{
 background-color:yellow;
}

このように記述することで、クラス”hoge”の背景色が黄色になります。

IDで指定

指定されているIDに対してスタイルを変更したい場合、頭にシャープ(#)をつけたID名をセレクタに指定します。

#foo{
 font-style:italic;
 font-size:20px;
}

このように記述すると、fooのスタイルを”斜体”で”文字の大きさを20px”に変更することができます。

他にももっと複雑な指定方法もありますが、まずはこれらの方法を押さえておけば、なんとなくセレクタの指定方法がイメージできると思います。他の複雑な指定方法も覚えてくると効率が良くなりますが、最初から複雑な指定をすると混乱してくるので、地道に色んなスタイルを試して覚えていくのがいいでしょう。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です