(1) IDとクラス

IDとクラスとは

IDとクラスは、HTMLタグの中に記述できる属性の１つで、すべてのタグに指定することができます。HTMLでIDやクラスを指定しておき、IDやクラスをセレクタとしてCSSで装飾を指定することができます。

IDは１ページに１回だけ使用でき、クラスは何度でも使用できます。

クラス(class)を使った書き方

クラスを使うときは、HTMLファイルで任意のタグにclass属性をつけます。

        <タグ名 class="クラス名">コンテンツ</タグ名>
      

CSSにはピリオド(.)のあとにクラス名を書き、適用させたいスタイルを記述します。

        .クラス名{property: 値;}
      

ID(id)を使った書き方

IDを使うときは、HTMLファイルで任意のタグにid属性をつけます。

        <タグ名 id="ID名">コンテンツ</タグ名>
      

CSSにはハッシュ(#)のあとにID名を書き、適用させたいスタイルを記述します。

        #ID名{property: 値;}
      

タグの種類を指定してIDやクラス使った書き方

IDやクラスは、使用しているタグに関係なく、IDやクラスが指定されているところはすべて同じデザインが適用されます。タグの種類を指定してIDやクラスを使いたいときは、「タグ名#ID名」や「タグ名.クラス名」のように指定します。

例えば、次のようなHTMLタグがあります。

        <h2 class="red"></h2>
        <p class="red"></p>
      

これに次のようなCSSを適用すると、red。

        .red{color: red;}
      

一方、次のようにp.redとすると、pタグのうちredクラスをもつもののみにredクラスが適用されます。

        p.red{color: red;}
      

実習ファイルのCSSに次のコードを追加し、前後の変化を確認しましょう。

        p.paragraph1{
          color: red;
        }
      

次に、次のコードを追加して前後の変化を確認しましょう。

        p.paragraph2{
          color: blue;
        }
      

続けて、次のコードを追加して前後の変化を確認しましょう。

        p.paragraph3{
          color: green;
        }

        p.paragraph4{
          color: yellow;
        }
      

同じpタグでも、classごとにCSSが指定されたことを確認できましたね。

文字色が変わらない場合

文字色が変わらない場合は、次のことを見直してみてください（いずれも授業中に散見されたことです）。

• 全角スペースが入っていた
• 波カッコが全角だった
• paragraphや色名などのスペルミス
• paragraph1, paragraph2, paragraph3の 1, 2, 3の番号が入っていなかった

複数のクラスを指定する

１つのタグに対して複数のクラスを指定するときには、class属性の値に半角スペースで区切って記述します。

次の例では、h2タグに対してredクラスとboldクラスを指定します。

        <h2 class="red bold"></h2>
        <p class="red"></p>
      

(2) spanタグ

spanタグとは

spanタグは、特に意味をもたない文字をグループ化し、装飾に使用します。似たようなものにstrongタグやemタグがありますが、これらは文の一部を強調するために用いられます。こういった強調という意味をもたせたくないが、装飾だけしたいというときに使用します。

spanタグの使い方

spanタグは、基本的にはクラスやIDを指定して使用します。

次の例では、文中の２ヶ所のspanタグに、それぞれredクラスやboldクラスで指定したスタイルを適用します。

        spanタグは、<span class="red"> 特に意味をもたない </span> 文字をグループ化し、<span class="red
        bold"> 装飾 </span> に使用します。
      

        .red{color: red;}
        .bold{font-weight: bold;}