CSS_さまざまなCSSセレクタの指定方法

05さまざまなCSSセレクタの指定方法

5-1 子孫セレクタ

子孫セレクタは、HTML要素の入れ子構造を利用して特定の要素を正確に選択することができます。

例えば、特定のクラスに属する要素の中にある特定の要素にだけスタイルを適用する場合などに便利です。

子孫セレクタの書き方は以下の通りです。

親要素 子要素 {
  /* スタイルのプロパティと値 */
}

ここでの「親要素」「子要素」については、要素やクラス名、ID名を設定することができます。

具体的なコードで見ていきましょう。

<div class="container">
  <h2>タイトル</h2>
  <p>これは子孫セレクタの例です。</p>
</div>

この場合、<h2>要素と<p>要素は.containerクラスを持つ<div>要素の子孫です。

子孫セレクタを使用してCSSを記述すると以下のようになります。

.container h2 {
  color: blue;
}
.container p {
  font-size: 30px;
}

こちらにより、<h2>は文字が青色になり、<p>要素は文字サイズが30pxになります。

5-2 疑似クラス

疑似クラスは、特定の要素が特定の状態にある場合にのみスタイルを適用するために使用されます。

要素がマウスオーバーされたときや、リンクされたとき、あるいは特定の位置にあるときなど、状態に応じてスタイルを変更したい場合に非常に便利です。

一般的な疑似クラスの例をご紹介します。

それではそれぞれのコード例を見てみましょう。

/* リンクをマウスオーバーしたときのスタイル */
a:hover {
  color: red;
  cursor: pointer;
}
/* ボタンをクリックしたときのスタイル */
button:active {
  background-color: green;
  color: white;
}
/* フォームの入力欄にフォーカスがあたったときのスタイル */
input:focus {
  border: 2px solid blue;
}
/* リストの奇数番目の要素にスタイルを適用 */
li:nth-child(odd) {
  background-color: #f1f1f1;
}
/* リストの偶数番目の要素にスタイルを適用 */
li:nth-child(even) {
  background-color: #e1e1e1;
}

5-3 長さの指定

長さの単位には、さまざまな種類がありますが、大きく「絶対値」と「相対値」の２つに分類することができます。

絶対値

他要素の単位や大きさに影響を受けない値のことで、pxが該当します。以下のように指定すると、他要素の単位や大きさに関わらず、必ずフォントの大きさは20pxになります。

.text {
  font-size: 20px;
}

相対値

他要素の単位や大きさに影響を受け、数値が決まる値のことです。%、em、remなどが該当します。以下のように指定すると、元となる要素の50%、つまり親要素の半分の大きさになります。

.text {
  font-size: 50%;
}

それぞれの単位を詳しく見てみましょう。

px (ピクセル)

画面サイズや他要素の単位、大きさに関わらず、指定した要素そのままのサイズになります。

.text {
  font-size: 20px;
}

% (パーセント)

指定する要素の親要素によって値が変わります。親要素にサイズ指定がされていなければ、「画面幅」が基準となります。

例えば、親要素が200pxで指定したい要素に50%と指定すれば、その大きさは100pxになります。

.text {
  font-size: 50%;
}

em (エム)

フォントや指定している文字の大きさによって値が変わります。1emはfont-size値を基準とした相対的な値となり、下記のコードを例とした場合は、1emが10pxとなるため、2.5emと記載することで、指定したフォントサイズ10pxの2.5倍で出力されます。

親要素でフォントサイズが指定されていない場合は、bodyのデフォルトフォントサイズ(16px)が基準になります。

.base_font {
  font-size: 10px;
}
.font {
  font-size: 2.5em;
}

rem (レム)

ルート要素のフォントサイズが基準となり値が変わります。

ルート要素とは、htmlセレクタを指します。

下記のコードを例とした場合は、1remが20pxとなるため、font1は40pxになります。

em指定の場合は、親要素に影響を受けますが、remの場合はルート要素が基準となるため、

font1-childは10pxになります。

html {
  font-size: 20px;
}
.font1 {
  font-size: 2rem;
}
.font1-child {
  font-size: 0.5rem;
}

5-4 色の指定

色を表す記述には、いくつかの種類があります。それぞれ記述方法や特徴などが少しずつ異なるので細かく見ていきましょう。

カラーネーム

色の名前を単語で指定する記述方法です。例えば、赤ならred、青なら blueと記述します。

書き方

.box {
    background-color: blue; /* 背景色指定 */
}

表示

明示的に指定できるため、コード上で何色なのかわかりやすいです。しかし、ブラウザによっては正しく認識されないカラーネームも存在するので、使用する場合は正しく表示されているか確認するようにしましょう。

カラーコード

それぞれの色に付与されているコードである「カラーコード」で指定する記述方法です。

#（シャープ）の後ろに、英数字を記述し、指定します。

何色なのかわかりづらいという難点はありますが、どのブラウザでも認識されます。

書き方

.box {
    background-color: #bfff7f; /* 背景色指定 */
}

表示

RGB

光の三原色を使用した指定方法です。Red（赤）、Green（緑）、Blue（青）の頭文字をとって、RGBと呼ばれています。

基本書式は以下の通りです。

セレクタ {
　　background-color: rgb(赤の数値,緑の数値,青の数値);
}

それぞれの数値は0~255で表され、数値のバランスで色を決定します。

書き方

.box {
    background-color: rgb(255, 191, 127);   /* 背景色指定 */
}

表示

RGBA

RGBに透明度（alpha）が追加され、色を透過して指定することができる方法です。

基本書式は以下の通りです。

セレクタ{
　　background-color: rgba(赤の数値,緑の数値,青の数値,透明度);
}

赤、緑、青の数値についてはRGBと全く同様です。透明度は、0.0~1.0の間で指定し、0.0が透過度0%（無色透明）の状態で、1.0が透過度100%（透過せず色がある）の状態となります。

透明度が指定できると、要素の重なりなどで表現の幅を広げることができます。

書き方

.box {
    background-color: rgba(63, 81, 181, 0.5);   /* 背景色指定（透過度50％） */
}

表示

上のコードを実行した場合には、左側のような表示になります。

色の違いを分かりやすくするため、透過度が100%の場合を右側に用意しました。

5-5 要素の固定法

画面の決まった位置に要素を固定させたいときに使用するposition: fixed;について紹介します。

スクロールしても位置が変化しないヘッダーやトップに戻るボタンを表示したいときに使用すると便利です。

基本書式は以下の通りです。

セレクタ {
  position: fixed;
  top: 値;
  right: 値;
  bottom: 値;
  left: 値;
}

position: fixed;が適用された要素は、基準位置が親要素ではなく、「ウィンドウ全体」です。そのため、top: 0;と指定すれば画面の最上部、left: 0;と指定すれば画面の1番左に表示されます。

それでは、具体的なコードを見てみましょう。

書き方

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: fixed;
  top: 50px; /* 画面上から50px */
  left: 50px; /* 画面左から50px */
}

top, leftに値を設定したため、下記の画像のように要素が配置されます。

表示