classとidをつかいCSSを装飾しよう&CSSを別ファイルに書き出してみよう


classとidをつかいCSSを装飾しよう&CSSを別ファイルに書き出してみよう

こんにちは。DevRelライターの木下です。普段はエンジニア特化型Q&Aサイト「teratail」のDevRelを担当しています。非エンジニア目線で書くWebプログラミング超入門記事、今回で連載4回目となりました。

さて、これまでの連載ではHTMLで自己紹介ページをつくり、それをCSSで装飾する方法について解説してきました。今回はclassやidというものを使い、CSSの装飾を指示しやすくしたり、これまでprofile.html内に書いていたCSSを別のファイルに書き出したりしてみます!

今回のゴール

4-4.png

こちらが今回のゴールです。前回と見た目があまり変わっていませんが、classやidというCSSがかなり使いやすくなる重要な要素を追加しています。ここから少しずつ複雑になっていきますが、それと比例するように楽しくなっていきますよ〜!

前回のコードとブラウザでの表示サンプル

3-3.png

毎度恒例ですが、前回のコードとブラウザでの表示を確認しましょう。上の画像が前回までで作ったサイトです。

こちらのソースコード「profile.html」です。ファイルとアイコン画像はデスクトップに置いてます。

<meta charset="utf-8">
<style>
    h1 {
        text-align:center;
        color:white;
        background-color:black;
    }

    h2 {
        text-align: center;
    }

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

<h1>Who am I !?</h1>

<p>
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

<h2>コメント</h2>
<p>
全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
<p>

<h2>base_data</h2>
<p>
誕生日: 1988.10.10<br>
性別: 男<br>
趣味: スノボ(グラトリ専門),バスケ<br>
特技: ビートボックス,フリースタイルバスケットボール<br>
</p>

<h2>work</h2>
<p>
今の仕事: teratailの広報<br>
できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</p>

classとidを使う

では、さっそくですが、「class」や「id」について説明をしていきます。先にザックリと言ってしまうと、「idやclassを使う」=「タグに自分で名前を付ける」というイメージです。

前回の<style>タグの中身を見てみましょう。<style>タグ内にCSSを書きましたね。

h1 {
    text-align:center;
    color:white;
    background-color:black;
}

h2 {
    text-align: center;
}

p {
    text-align: center;
}

これまで例えば<h1>タグに命令を出したいときは、 h1 { [命令の種類]:[命令の内容]; ... }<h2>タグに命令を出したいときはh2 { [命令の種類]:[命令の内容]; ... } といった形でCSSを書いてきました。ですが実はこれ、複数の同じタグへ異なった指示を出せないなど、あまり良くない書き方なんです。(他にも理由はありますが、基本的にはあまりよくないものだと思っておいてください)

今回ですと<h2>タグが複数あるなかで、1個目の<h2>タグにはAという指示を出したくて、2個目の<h2>タグにはBという指示を出したい、ということができません。

どうやって解決するかというと、それぞれのタグに自分で名前を付けて、その名前に対して指示を出すという方法です。その名前を「class名」「id名」というのですが、言葉で説明するよりも「習うより慣れろ」なので、さっそくやってみようと思います。(一応結論を先に言っておくと、id名は1つのタグだけに付けるもので、class名は複数のタグに付けられるものです)

id名の付けかた

まずはid名を付けてみます。

<h1>タグに、「main_title」というid名を付けます。

<h1 id="main_title">Who am I !?</h1>

<h1>タグの中にid=”main_title”と書き加えればOKです。これで「main_title」というid名が付けられました。

ではこの「main_title」と名付けたタグに、CSSで指示を出してみましょう。下記のようになります。

#main_title {
    text-align:center;
    color:white;
    background-color:black;
}

h1と書いていたところをid名の「main_title」に変えるだけですが、id名の先頭に「#」を付けるのを忘れないでください。「#」は後ほどで出てくる「class名」と区別するために必要なんです。

ということでコードの全体像を下記のように書き換えましょう。

<meta charset="utf-8">

<style>
    /* ここをh1→#main_titleに書き換える */
    #main_title {
        text-align:center;
        color:white;
        background-color:black;
    }

    h2 {
        text-align: center;
    }

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

<h1 id="main_title">Who am I !?</h1> <!-- ここにid名を書き加える -->

<p>
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

<h2>コメント</h2>
<p>
全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</p>

<h2>base_data</h2>
<p>
誕生日: 1988.10.10<br>
性別: 男<br>
趣味: スノボ(グラトリ専門),バスケ<br>
特技: ビートボックス,フリースタイルバスケットボール<br>
</p>

<h2>work</h2>
<p>
今の仕事: teratailの広報<br>
できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</p>

書き換えたらリロードしてみましょう。リロードは、MacですとCtrl+R、WindowsですとF5キーでもできます。見た目は変わりません。

4-1.png

ちなみにソースコード内に「/*ここをh1→#main_titleに書き換える*/」という謎の記号がしれっと登場していますが、これはCSSのコメントアウトです。ブラウザに「無視してください」と指示するコードですので、メモ書きを残したいときは「/*」と「*/」で囲めば問題ないです。HTMLの「<!--」と「-->」にあたります。

class名の付けかた

次はclass名を付けてみましょう。

<h1>タグの中に「sub_title」というclass名を付けます。

<h2 class="sub_title">コメント</h2>

<h2>タグに、「sub_title」と書き加えればOKです。これで<h2>タグに「sub_title」というclass名が付けられました。

ではこの「sub_title」と名付けたタグにCSSで指示を出してみましょう。CSSの指示の出し方も先ほどとほぼ同様です。<h2>タグへの命令(下記)を、

h2 {
    text-align: center;
}

以下のように書き換えてみてください。

.sub_title {
    text-align: center;
}

基本的には、h2と書いていたところをclass名の「sub_title」に書き変えるだけですが、今度は先頭に「.」(ドット)と入力します。id名の時は「#」、class名のときは「.」、この2つの使い分けは覚えてください。

コードの全体像は、以下のようになります。

<meta charset="utf-8">

<style>
    #main_title {
        text-align:center;
        color:white;
        background-color:black;
    }

    /* ここをh2→.sub_titleに書き換える */
    .sub_title {
        text-align: center;
    }

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

<h1 id="main_title">Who am I !?</h1>

<p>
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

<h2 class="sub_title">コメント</h2> <!-- ここにclass名を書き加える -->
<p>
全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</p>

<h2>base_data</h2>
<p>
誕生日: 1988.10.10<br>
性別: 男<br>
趣味: スノボ(グラトリ専門),バスケ<br>
特技: ビートボックス,フリースタイルバスケットボール<br>
</p>

<h2>work</h2>
<p>
今の仕事: teratailの広報<br>
できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</p>

書き換えたらリロードしてみましょう。今度は以下のような変化があったかと思います。

4-2.png

「コメント」は中央寄りのままですが、さっきまで中央寄りだった「base_data」や「work」が左寄り(デフォルトの状態)になっています。

さきほどまで<h2>タグ全部に中央寄り(text-slign:center)と指示していたところに、今は「sub_title」というclass名を付けられたタグにのみ中央寄りの指示が出ている状態になっています。

あとでまた全部中央寄せに整えますが、その前にidとclassの違いについて触れておこうと思います。

id名とclass名の違いとは?

idとclassの違いは、CSSの指示を書くときに「#」を使うか「.」を使うかくらいの違いしかなさそうですよね。ですが、実はほかにも明確な違いがあるんです。

  • 1つのid名に対して、そのid名を持つタグは1つまで(同じid名をもつタグを複数つくれない)
  • 1つのclass名に対して、そのclass名を持つタグは複数つくれる

つまり、下記のように同じid名を複数のタグに付けるのはダメです。

<!-- これはダメな例 -->
<h2 id="sub_title">コメント</h2>
<h2 id="sub_title">base_data</h2>
<h2 id="sub_title">work</h2>

class名なら複数のタグに同じclass名を付けてもOKです。下記は良い例です。

<!-- これは良い例 -->
<h2 class="sub_title">コメント</h2>
<h2 class="sub_title">base_data</h2>
<h2 class="sub_title">work</h2>

ということで、「id名は1つのタグにだけ付ける、class名は複数のタグに付けてOK」と覚えてください。これ重要です! (CSSだけですと同じid名を何個使ってもちゃんと表示されますが、JavaScriptではそれをおこなえません。今のうちに使い分けられるようにしましょう)

では、idとclassの違いを理解したところで、先ほど左寄りになってしまった「base_data」や「work」を中央寄せに戻しましょう。<h2>base_data</h2><h2>work</h2>にclass名「sub_title」を付けます。先ほどと同様、タグ内にclass=”sub_title”を書き加えてください。

<h2 class="sub_title">base_data</h2>
<h2 class="sub_title">work</h2>

 
そしてせっかくなので、CSSにも少し付け足しましょう。class名がsub_titleと名付けられたタグは背景をLightGrey、文字色をwhiteにしましょう。

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
}

コード全体は下記のようになります。

<meta charset="utf-8">

<style>
    #main_title {
        text-align:center;
        color:white;
        background-color:black;
    }

    /* ここに背景色と文字色の指示を追加 */
    .sub_title {
        text-align: center;
        background-color: LightGrey;
        color: white;
    }

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

<h1 id="main_title">Who am I !?</h1>

<p>
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

<h2 class="sub_title">コメント</h2>
<p>
全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</p>

<h2 class="sub_title">base_data</h2> <!-- ここにclass名を書き加える -->
<p>
誕生日: 1988.10.10<br>
性別: 男<br>
趣味: スノボ(グラトリ専門),バスケ<br>
特技: ビートボックス,フリースタイルバスケットボール<br>
</p>

<h2 class="sub_title">work</h2> <!-- ここにclass名を書き加える -->
<p>
今の仕事: teratailの広報<br>
できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</p>

表示は下記のようになったはずです。

4-3.png

class=”sub_title”が付けられたタグが、中央寄せ・背景がLightGrey・文字色がwhiteになっていますね。

同様に<p>タグへの指示も、クラス名による指示に書き換えておきましょう。全ての<p>タグには「sub_detail」というクラス名を付けることにします。ブラウザでの表示はそのままになるようにしましょう。もうやり方は分かりますね?

……自分で書いてみて分からなかったら、下記をチラ見しながら書き方を覚えていってください。「チラ見しながら書いて覚える」は大事です。

<meta charset="utf-8">

<style>
    #main_title {
        text-align:center;
        color:white;
        background-color:black;
    }

    .sub_title {
        text-align: center;
        background-color: LightGrey;
        color: white;
    }

    /* ここをp→.sub_detailに書き換える */
    .sub_detail {
        text-align: center;
    }
</style>

<h1 id="main_title">Who am I !?</h1>

<p class="sub_detail"> <!-- ここにclass名を書き加える -->
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

<h2 class="sub_title">コメント</h2>
<p class="sub_detail"> <!-- ここにclass名を書き加える -->
全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</p>

<h2 class="sub_title">base_data</h2>
<p class="sub_detail"> <!-- ここにclass名を書き加える -->
誕生日: 1988.10.10<br>
性別: 男<br>
趣味: スノボ(グラトリ専門),バスケ<br>
特技: ビートボックス,フリースタイルバスケットボール<br>
</p>

<h2 class="sub_title">work</h2>
<p class="sub_detail"> <!-- ここにclass名を書き加える -->
今の仕事: teratailの広報<br>
できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</p>

ブラウザをリロードして、表示が変わらなければOKです。

CSSを別ファイルに移植しよう

今回のラストです! もう少しだけ頑張りましょう!

<style>タグの中身がちょっとづつ増えてきましたよね。これからさらに増えてくと、profile.htmlの中身が長くなり見にくくなってしまいます。そういうときは、<style>タグの中身を別のファイルに切り出すのがおすすめです。

そのためには、profile.cssというファイルと<link>タグを使います。説明するよりも、ひとまずは手を動かしてやってみましょう。

まず、profile.htmlを置いている場所にprofile.cssというファイルをつくります。profile.htmlをデスクトップに置いているのなら、デスクトップにprofile.cssをつくってください。(デスクトップに全てのファイル置くと下記のようになります)

グラフィックス1.png

 
そしてprofile.htmlの<style>タグの中身を切り取り、profile.cssに貼り付けます。profile.cssの中身は下記のようになります。これで保存しておきましょう。(profile.cssファイル内には<style></style>は書く必要はありません)

#main_title {
    text-align:center;
    color:white;
    background-color:black;
}

.sub_title {
    text-align: center;
    background-color: LightGrey;
    color: white;
}

.sub_detail {
    text-align: center;
}

 
そして、profile.htmlは<style>タグを削除し、代わりに<link>タグというものを追加します。まずは下記のように書き加えてください。(あとで説明します)

<meta charset="utf-8">

<!-- ここに<link>タブを追加 -->
<link rel="stylesheet" href="profile.css">

<!-- <style>…</style>は削除 -->

<h1 id="main_title">Who am I !?</h1>

<p class="sub_detail">
<img src="afroscript.png" width="300px"><br>
名前:木下雄策<br>
ニックネーム:afroscript
</p>

<h2 class="sub_title">コメント</h2>
<p class="sub_detail">
全力に真面目に、全力に不真面目に生きております。人生楽しくがモットーです。
</p>

<h2 class="sub_title">base_data</h2>
<p class="sub_detail">
誕生日: 1988.10.10<br>
性別: 男<br>
趣味: スノボ(グラトリ専門),バスケ<br>
特技: ビートボックス,フリースタイルバスケットボール<br>
</p>

<h2 class="sub_title">work</h2>
<p class="sub_detail">
今の仕事: teratailの広報<br>
できること: 広報,営業,プロモーション企画/ディレクデョン,プログラミング(少々)<br>
職歴: エンジニア業界の営業(約2年)、teratail広報(約10ヶ月)
</p>

リロードして表示が変わらなかったらOKです。

4-3.png

さて、<link>タグ、<link rel="stylesheet" href="profile.css">とは何でしょうか?

<link>タグは、外部にある他のファイルを読み込みたいときに使います。href=”●●”でファイルを指定すると読み込めます。

ちなみに、hrefとは「hypertext reference」の略。HTML(HyperTextMarkupLanguage)で使うreference(=参照)と覚えておくと良いです。relはrelationの略で、外部ファイルとの関係性を表すキーワードを書きます。

まずは、CSSファイルを読み込むときはrel=”stylesheet”と書くものだと覚えておくと問題ないです。

まとめると<link rel="stylesheet" href="profile.css">とは、「profile.htmlとstylesheet(CSSファイル)の関係にあるprofile.cssってファイルを読み込んで使うよ」という意味です。

まとめ

  • CSSは、各タグにclass名とid名を付けて指示を出すようにする
  • 「idやclassを使う」=「タグに自分で名前を付ける」ということ
  • 1つのid名に対して、そのid名を持つタグを1つしかつくってはならない(同じid名を持つタグを複数つくることができない)
  • 1つのclass名に対して、そのclass名を持つタグを複数つくることができる
  • cssは別ファイルに分けるようにする、<style> タグの中身をそのまま●●●●.cssに移すだけでOK
  • 分けたCSSファイルは、linkタグで読み込むことができる

今回はここまでです。次回はもう少し複雑なCSSに挑戦します! 

画像と文字を横に並べるなど、CSSによるレイアウトを調整するための第1歩を踏み出そうと思いますので、ぜひお楽しみに!


この記事を書いた人

木下雄策
木下雄策 外部ライター 東京
エンジニア特化型Q&Aサイトteratail(https://teratail.com/)のDevRel担当。元アフロの0.5エンジニア。福岡生まれの福岡育ちで、好きなものはJavaScriptとスノーボード。モットーは「人生楽しく」