スキル

CSSセレクタとは?基本的な種類について詳しく解説

このページでは、CSSファイルの作り方や基本的なセレクタの種類について徹底解説していきます。WEBサイトの制作を行いたい方や、自身のブログデザインをカスタマイズしたい方へ向けた記事です。

当記事をご覧になることで、CSSを記述する際に必要となる「セレクタ」についての理解を深めることができます。WEBデザインについて興味のある方には参考になる内容なので、是非最後までお読みください。

CSSって何?

まずは、CSSの概要について解説していきます。

CSSとスタイルシート

CSSとは、WEBサイトのスタイルを指定する言語のことです。ページのスタイルを指定する技術全般を「スタイルシート」を呼びます。HTMLで構築されるWEBサイトにスタイルを適用する場合、一般的にスタイルシート言語の1つであるCSSが用いられます。

HTMLがWEBサイトにおける各要素の意味や構造を定義するのに対し、CSSではそれらに関する装飾を指定します。 例えば、WEBサイトの色やサイズ、レイアウトなどの表示スタイルや、 音声で読み上げられる時の再生スタイルなどを指定する役割です。

WEBページ作成にスタイルシートが必要な理由

スタイルシートが必要な理由は、HTMLだけでWEBサイトのデザインを制御してしまうと文章の情報構造がでたらめになってしまうからです。文章の情報構造が複雑になってしまうと、コンピュータや検索エンジンに理解されづらいサイト(ページ)になります。

また、HTMLの表示は閲覧する環境によって異なるため、あるブラウザでは綺麗に表示されても、他のブラウザでは表示が崩れることがあります。こうした事態を避けるためにも、WEBページ作成にはスタイルシートが必要なのです。

スタイル指定と文章構造は分離する

HTML4.01やXHTML1.0の仕様では、HTMLで文書構造を定義し、スタイルはスタイルシートで指定することが推奨されています。HTML4.01やXHTML1.0は、<center>や<font>などの装飾目的の要素や属性を使用することはできますが、 バージョンアップ後のHTML5では廃止される予定です。

CSSを使うメリットとは?

CSSを使うメリットは、主に以下の4つになります。

  1. HTML文書の構造が把握しやすくなる
  2. HTML文書を記述する際、デザインに関するデータを全ページに記述する必要がなくなる
  3. デザインを統一することができる。
  4. サイト全体のデザイン変更を、スタイルシート編集だけで行うことができる

CSSファイルの作り方を解説

次に、CSSファイルの作り方を紹介していきます。ファイル名に「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれるようになります。

CSSの書き方はシンプル

CSSは、HTMLタグの「何を、どうするのか」について記述しています。

CSSを適応したいタグのことを「セレクタ」と呼び、変更したい項目を「プロパティ」と呼びます。そのプロパティを決めるものが「値」です。

プロパティと値は{ }で囲んで記述します。また、「:」や「;」を書き間違えないように注意してください。この2点だけ押さえておけば、CSSの書き方はそれほど難しくはありません。

プロパティを複数指定する場合

1つのセレクタに対して、プロパティは複数指定することが可能です。例えば、フォントサイズを30px・文字の色を赤にする場合は以下のようになります。

h1{font-size: 30px, color: red;}

また、CSSは空白部分を無視するため、{ }内の設定を見やすく並べるのが一般的です

h1{

font-size: 30px,

color: red;

}

ブロバティの種類について

プロパティには、背景色の指定や文字幅の調整など、目的別に様々な種類があります。よく使用されるプロパティを下記の表にまとめました。

上記のプロパティを覚えておくだけでも、作業効率は圧倒的に上がるはずです。

CSSのセレクタについて解説

先ほども触れた通り、CSSの基本文法は「セレクタ」「プロパティ」「値」の3つからなります。

セレクタは、「CSSによるデザイン指定をどこに対して適用するか」を決めるものです。

セレクタに関する予備知識

セレクタについての理解を深めるためには、「親要素」と「子要素」について知る必要があります。

まず、要素とは開始タグから終了タグまでのまとまりことを指します。例えば、<p>文章</p>は1つの要素ですね。このまとまりの中に入る別の要素が「子要素」です。そして、その「子要素」を挟んでいるものが「親要素」になります。

上記の画像の場合は、pタグが子要素、divタグが親要素です。

基本的なセレクタの種類を紹介

「CSSセレクタ」には幅広い種類があり、様々な指定方法があります。ここでは、基本的なCSSセレクタについて紹介していきます。

要素を指定する

HTMLタグを指定することで、装飾する範囲を指定します。

HTML

<p>pタグの内容</p>

<span>spanタグの内容</span>

CSS

p {

color: #7C0103;

}

HTMLとCSSの記述をすると、セレクタで指定しているpタグにのみ装飾が適用されます。

*(すべての要素を指定する)

「*(アスタリスク)」を述すれば、すべての要素に装飾が適用されます。

HTML

<p>pタグの内容</p>

<span>spanタグの内容</span>

CSS

* {

color: #7C0103;

}

先ほどと同じHTMLの記述ですが、「*(アスタリスク)」を記述することによって全ての要素に装飾が適用されるようになります。

.class(クラス名を指定する)

「.クラス名」を記述すれば、指定のクラスにのみ装飾が適用されます。

HTML

<p>pタグの内容</p>

<p class=example>クラス名exampleにおけるpタグの内容</p>

<span>spanタグの内容</span><br>

<span class=example>クラス名exampleにおけるspanタグの内容</span>

CSS

.example {

color: #7C0103;

}

クラス名を指定すると、そのクラス名が付加されている全ての要素に装飾が適用されます。

その上で、指定した要素にのみ適用させたい場合は以下のように記述します。

CSS

p.example {

color: #7C0103;

}

上記の場合、exampleクラスが付加されているpタグ要素にのみ装飾が適用されるようになります。

#id(ID名を指定する)

「#ID名」を記述すれば、指定のIDに装飾が適用されます。

HTML

<p>pタグの内容</p>

<p id=example>ID名exampleにおけるpタグの内容</p>

<span>spanタグの内容</span><br>

<span id=example2>ID名exampleにおけるspanタグの内容</span>

CSS

p#example {

color: #7C0103;

}

こちらも要素に続けて指定することで、そのID名が付加された要素に装飾が適用されます。

A B(子孫セレクタを指定する)

「セレクタ」+「半角スペース」+「セレクタ」と記述すれば、指定の親要素内の全ての子要素に装飾が適用されます。

HTML

<p>pタグの内容</p>

<p><span>pタグの子要素におけるspanタグの内容</span></p>

<span>spanタグの内容</span>

CSS

p span {

color: #7C0103;

}

 pタグに囲われているspanタグにのみ装飾が適用されることになります。

さらに、クラス名を指定することもできます。

HTML

<p>pタグの内容</p>

<p><span>pタグの子要素におけるspanタグの内容</span></p>

<p><span class=example>pタグ子要素のクラス名exampleにおけるspanタグの内容</span></p>

<span>spanタグの内容</span>

CSS

p span.example {

color: #7C0103;

}

上記の場合は、「pタグで囲われている」「exampleのクラス名が指定されている」という条件が満たされているspanタグ要素に装飾が適用されます。

また、装飾の範囲は孫要素にも適用されます。

HTML

<div>divタグの内容</div>

<div>

<span>divタグ子要素におけるspanタグの内容</span>

<div><p><span>divタグ孫要素におけるspanタグの内容</span></p></div>

</div>

<span>spanタグの内容</span>

CSS

div span {

color: #7C0103;

}

こうすることで、divタグ内に属する全てのspanタグに装飾が適用されるようになります。

A > B(子セレクタを指定する)

「セレクタ」+「>」+「セレクタ」と記述すれば、指定の親要素内の一階層下の子要素に装飾が適用されます。

HTML

<div>divタグの内容</div>

<div>

<span>divタグ子要素におけるspanタグの内容</span>

<div><p><span>divタグ孫要素におけるspanタグの内容</span></p></div>

</div>

<span>spanタグの内容</span>

CSS

div > span {

color: #7C0103;

}

先ほどと同じHTMLの記述ですが、divタグの一階層下にあるspanタグにだけ装飾が適用されるようになります。

A + B(隣接セレクタを指定する)

「セレクタ」+「+」+「セレクタ」と記述すれば、指定の要素に隣接した要素に装飾が適用されます。

HTML

<p>pタグの内容</p>

<div>divタグの内容</div>

<p>divタグに隣接したpタグの内容</p>

<p>pタグに隣接したpタグの内容</p>

CSS

div + p {

color: #7C0103;

}

こうすることで、divタグの直後にあるpタグに装飾が適用されるようになります。

A ~ B(要素の後ろにある同じ階層のセレクタを指定する)

「セレクタ」+「~」+「セレクタ」と記述すれば、指定の要素の後にある同じ階層の要素に装飾が適用されます。

HTML

<p>divタグより前にあるpタグの内容</p>

<div>divタグの内容</div>

<p>divタグより後ろにあるpタグの内容</p>

<p>divタグより後ろにあるpタグの内容</p>

<div><p>divタグの子要素のpタグの内容</p></div>

<p>divタグより後ろにあるpタグの内容</p>

CSS

div ~ p {

color: #7C0103;

}

こうすることで、階層が同じであれば、divタグの後ろにあるすべてのpタグに装飾が適用されます。

A , B(複数のセレクタの指定)

「セレクタ」+「,(カンマ)」+「セレクタ」と記述することで、複数の要素に同じ装飾が適用されます。

HTML

<div>divタグの内容</div>

<p>pタグの内容</p>

<span>spanタグの内容</span>

CSS

div , span {

color: #7C0103;

}

こうすることで、divタグとspanタグに同じ装飾が適用されます。

まとめ

このページでは、CSSファイルの作り方や基本的なセレクタの種類について詳しく解説してきました。CSSセレクタの指定方法を多く知っていれば、それだけCSS設計における作業効率が上がります。より効率的なCSS設計を目指していきたい方は、このページで解説した内容を是非参考にしてみてください。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。