CSS入門2（class属性のセレクタについて）

Table of Contents

特定のタグのスタイルを変える

前回はCSSでタグのスタイルを変える方法を紹介しました。タグ名をセレクタに指定した場合、その指定したタグすべてのスタイルが変更されましたね。

今回は、スタイルを変えたいタグをピンポイントで指定する方法について解説します。まだ使っていないCSSのプロパティも紹介していきます。

スタイルを適用するタグにつけるclass属性

すべてのHTMLタグには class (クラス) という属性を追加することができます。class属性の値には、好きな文字列を使うことができます
。

例えば、以下のHTMLソース内の2つ目のpタグに、testという値を持つclass属性を追加してみます。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>家野ペイジのホームページ</title>
    </head>

    <style>
      h1 {
        color: red;
      }

      body {
        background-color: lightgray;
      }
    </style>

    <body>

      <h1>私のホームページへようこそ！</h1>

      <h2>このページについて</h2>

      <p>家野ペイジが、好きなことを発信するページです。私の自己紹介をご覧ください。</p>

      <p class="test">私の趣味のページを作成中です。</p>

    </body>
    </html>

26行目のpタグにclass属性を付けました。しかし、これだけでは何も変化はありません。

class属性は、属性の値をCSSのセレクタとして使用することで力を発揮します。それでは、class属性の値「test」をセレクタとしてCSSを書いてみましょう。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>家野ペイジのホームページ</title>
    </head>

    <style>
      h1 {
        color: red;
      }

      body {
        background-color: lightgray;
      }

      .test {
        font-size: 150%;
      }
    </style>

    <body>

      <h1>私のホームページへようこそ！</h1>

      <h2>このページについて</h2>

      <p>家野ペイジが、好きなことを発信するページです。私の自己紹介をご覧ください。</p>

      <p class="test">私の趣味のページを作成中です。</p>

    </body>
    </html>

17〜19行目に、CSSを追加しました。注意していただきたいのは、class属性の値をセレクタとする場合、頭に.(ドット)をつけなければいけないことです。

サンプルページです。testというクラスをつけた段落の文字サイズが1.5倍になりました。

font-size

今回使ったCSSのプロパティ font-size について紹介します。

その名の通り、フォント（文字）のサイズを変えるプロパティです。

サイズの指定方法は複数ありますが、今回は通常のサイズに比べてどれくらいの大きさかをパーセンテージ（%）で指定しました。50%とすれば半分になり、200%とすれば2倍になります。

良く使う他の指定方法として、px（ピクセル）を使う方法があります。詳しくは後ほど説明いたします。

複数のclass属性を組み合わせる

１つのタグに対して、複数のclass属性を付けることができます。具体例として、文字を赤くする効果を持つクラスredと、文字を画面中央に寄せるクラスcenterを同時に指定してみます。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>家野ペイジのホームページ</title>
    </head>

    <style>

      body {
        background-color: lightgray;
      }

      .red {
        color: red;
      }

      .center {
        text-align: center;
      }
    </style>

    <body>

      <h1 class="red center">私のホームページへようこそ！</h1>

      <h2>このページについて</h2>

      <p>家野ペイジが、好きなことを発信するページです。私の自己紹介をご覧ください。</p>

      <p>私の趣味のページを作成中です。</p>

    </body>
    </html>

複数のクラスをタグにつける場合は、半角スペースで区切ります。サンプルページはこちらです。

タイトルが赤くなり、位置が画面中央に移動しました。

文字の位置を変えるプロパティ text-align

文字の寄せを変えたときは、text-alignというプロパティを使います。alignは整列させるという意味です。

text-alignの値として指定できるものは以下の表の通りです。

指定	位置
left	左寄せ
center	中央寄せ
right	右寄せ

おさらい

class属性ついて今回学んだことをおさらいをしましょう。

特定のタグにスタイルを適用したいときにclass属性が使えます。
class属性には好きな値を設定することができます。
ひとつのタグに複数のclass属性を指定できます。

次回は、CSSを使って本格的に自己紹介ページのレイアウトを変更していきたいと思います。