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

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キーでもできます。見た目は変わりません。

ちなみにソースコード内に「/*ここを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>

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

「コメント」は中央寄りのままですが、さっきまで中央寄りだった「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>

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

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をつくってください。（デスクトップに全てのファイル置くと下記のようになります）

 
そして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です。

さて、<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歩を踏み出そうと思いますので、ぜひお楽しみに！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。