CSSセレクター

前セクションで作成したpart5ディレクトリを使用します。

cssディレクトリ内にstyles.cssを作成し、index.htmlに適応させます。

index.html◎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
  </body>
</html>

どのタグにcssを適応させるかを決める部分をセレクターと言いますが、セレクターはいくつか種類があります。

id

idを指定して適応する方法です。

id(identification)属性を付与したpタグを追加しましょう。

id属性は、特定のタグに固有の識別子を設定するもので、任意の文字列を設定することができます。設定された識別子は、ページ内で複数回使うことができません。

index.html◎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
    <p id="interesting">とても楽しい</p>
  </body>
</html>

idを指定する場合は、先頭に#（シャープ)を記述します。

styles.css◎

p {
    color: red;
}

#interesting {
    color: yellow;
}

class

こちらもすでに紹介しましたが、class属性を指定して適応する方法です。

class属性はid属性と違い、設定された値を複数回使うことができます。

そのため、複数のタグに同じcssを当てることができます。

class属性を付与したpタグを追加します。

index.html◎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
    <p id="interesting">とても楽しい</p>
    <p class="difficult">でもちょっと難しい</p>
  </body>
</html>

classを指定する場合は、先頭に.(ドット)を記述します。

styles.css◎

p {
    color: red;
}

#interesting {
    color: yellow;
}

.difficult {
    color: blue;
}

id属性とclass属性の使い分けに関して、基本的にcssを当てる際はclass属性を使いましょう。

id属性を使うと、一箇所でしか使用できないので、一意の場所のみに適応したcssだと分かりやすい反面、cssの優先度的にidで指定した方が、class指定したものより優先され、大規模プロジェクトでは思わぬバグを生み出すことがあるため、classに統一するのが良いかと思います。

属性

属性を指定して適応する方法です。

aタグを追加します。

index.html◎

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/stylesst.css" />
    <title>Document</title>
  </head>
  <body>
    <p>cssの勉強</p>
    <p id="interesting">とても楽しい</p>
    <p class="difficult">でもちょっと難しい</p>
    <a href="https://example.com" target="_blank">リンク</a>
  </body>
</html>

属性を指定する場合は、タグを記述後、[](スクエアブラケット)で、属性と値を括ります。

styles.css◎

p {
    color: red;
}

#interesting {
    color: yellow;
}

.difficult {
    color: blue;
}

a[target="_blank"] {
  color: orange;
}

こちらは普段はあまり使わないですが、入力フォームのチェックボックス等、特定の場面で使うことがあります。

PreviousノーマライズCSS Next結合子

Last updated 2 years ago

hashtagタグ

hashtagid

hashtagclass

hashtag属性

タグ

id

class

属性