"全然知らない" から "少しは知ってる" になるための入門シリーズ
スタイルシート編
はじめに

スタイルシートを使うとHTMLの中の文字に飾り付けをすることができます。 世の中のほとんどのウェブサイトで何らかの形で使われていますので、 「スタイルシート」という単語を聞いたことのある人は多いと思います。 しかし単語として知ってはいても、自分で使うには難しそうに思えてしり込みしてしまう人もいるかもしれません。

難しいことをするには難しい知識が必要ですが、「ちょっと飾り付けしたいだけ」なら 最低限の書式さえ覚えておけば大丈夫です。

ここでは「スタイルシートとは何か？」といった正確な知識を身につけることよりも、 実際にスタイルシートが使われている場面に出会ったときに 「大体の意味がわかる」「少しなら改造できる」ようになることを目指します。

では張り切ってまいりましょう。

とりあえず試してみる

まずは適当にファイルを作って、以下の内容をコピペしてください。
HTMLとして気になる箇所があるかもしれませんが今はその件には触れないものとします。

test.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>サンプル</title>
    <style>
        
        b 
        {
            background-color : red;
        }
        
    </style>
    
</head>
<body>

    <b>あいうえお</b><br>
    <i>かきくけこ</i><br>
    
</body>
</html>

上の方にある<style>～</style>の中身がスタイルシートです。

ブラウザで表示してみてください。

おっ、赤くなってますね。
どこが赤くなったかというと、bタグで囲った部分が赤くなったのでした。

スタイルシートの中身を見てみましょう。

b { background-color : red; }

「background-color : red;」ですので、「背景色を赤くしている」というのはなんとなくわかりますよね？  この red を blue や yellow など他の色名に変えるとその色になります。やってみてください。

冒頭の b というのは「bタグ」を表しています。

ということはここをたとえば「i」に変えると……

はい。こうなりました。

背景色の他にもいろいろ指定できる
たとえば次のようにすると、
test.html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>サンプル</title>
    <style>
        
        b 
        {
            background-color : red;
            color : blue;
            font-size : 200%;
        }
        
    </style>
    
</head>
<body>

    <b>あいうえお</b><br>
    <i>かきくけこ</i><br>
    
</body>
</html>

こうなりました。

さきほどは「background-color」で背景色だけを指定しましたが、 今回は「color」で文字の色を、「font-size」で文字のサイズを指定しました。

他にもいろいろな指定ができます。 ここには書ききれないほどいろいろあります。それだけで辞典になってしまうほどです。 実際、本屋さんにいくとそういう辞典が売っています。ネットでも辞典のようなリストを公開しているサイトがたくさんあります。 元気なときにでもぜひ調べてみてください。

指定できることはたくさんありますが、形式は大体同じです。

background-color : red;

真ん中を半角の : で区切って、左側に「何を」、右側に「どうする」です。 そして最後は半角の ; でシメます。
どの箇所のスタイルを指定するか？ 
タグごとに指定する

上のサンプルでは、

b { background-color : red; text : blue; font-size : 200%; }

ですので、bタグで囲った箇所にスタイルが適用されました。 ここをiに変えればiタグで囲った箇所に適用されます。

ここまでは最初に見た通りですが、次のような場合はどうなるでしょうか？  同じタグが複数回使われている場合です。

test.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>サンプル</title>
    <style>
        
        b 
        {
            background-color : red;
            color : blue;
            font-size : 200%;
        }
        
    </style>
    
</head>
<body>

    <b>bタグその１</b><br>
    <b>bタグその２</b><br>
    <i>iタグその１</i><br>
    <i>iタグその２</i><br>
    
</body>
</html>

はい、こうなりました。
HTML内のbタグで囲った箇所全てに同じスタイルが適用されるみたいですね。

idで指定する

タグで指定するとそのタグで囲った箇所全てに同じスタイルが適用されます。 それはそれで便利なのですが、もっと細かく指定したい場合もあります。 たとえば上のサンプルの「iタグその１」の箇所だけにスタイルを適用したい場合はどうすればいいでしょうか？ 

次のようにします。

test.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>サンプル</title>
    <style>
        
        #styleTest1
        {
            background-color : red;
            color : blue;
            font-size : 200%;
        }
        
    </style>
    
</head>
<body>

    <b>bタグその１</b><br>
    <b>bタグその２</b><br>
    <i id='styleTest1'>iタグその１</i><br>
    <i>iタグその２</i><br>
    
</body>
</html>

こうなりました。

さっきと何が違うでしょうか？ 

まずはタグの側に注目です。

<i id='styleTest1'>タグその１</i>

この箇所だけにスタイルを適用したい、というわけで、この箇所だけを識別するために id をつけました。 idは好きなように決めることができます。本人が大人になってから恥ずかしい思いをするような id だって可能です。 そしてスタイルシートの側ではタグ名ではなく、そのidを指定します。

#styleTest1 { background-color : red; color : blue; font-size : 200%; }

さきほどまでは「b」や「i」のようにタグ名を書いていた箇所に id= の右側の文字列を書いています。 今は「styleTest1」だったので、そのように書いているわけですね。

さて、idは好きなように決めることができる、ということでした。 あれ？ じゃあもしも「styleTest1」という名前のタグがあったらどうなるんだ？  実際はそんな名前のタグはありませんが、野放図にidを決めるという生活を続けていたら、いつかそんな日が来るかもしれません。

上のサンプルをもう一度よく見てください。「#styleTest1」のように冒頭に「#」がついていますね？  この記号が「これはidですよ」という意味です。 idで指定するときには必ず冒頭に「#」をつけることになっています。 一方、タグの方に「#」がつくことはありません。 ですので「同じ名前のタグがあったらどうしよう？」と心配する必要はありません。

クラスで指定する

上の例は「iタグその１」だけにスタイルを適用したい場合でしたが、 「iタグその１」と「bタグその２」に同じスタイルを適用したい場合はどうすればいいでしょうか？ 

素朴に考えるならこうなるでしょうか。

<b>bタグその１</b><br> <b id='styleTest1'>bタグその２</b><br> <i id='styleTest1'>iタグその１</i><br> <i>iタグその２</i><br>

ですが、これは間違いです。
なにしろ id というぐらいです。同じidは同じHTML文書中に一回しか使えません。

どういう表示結果になるかは、実際に試してみてください。 ブラウザの種類によっては気を利かせてうまく表示してくれるかもしれませんが、 本来間違った書き方ですので、いつかナマハゲがやってきて食べられてしまうかもしれませんし、 ネットで公開したときに他の人が別のブラウザで見るとうまく表示されないかもしれません。

こういう場合は id ではなく、class を使います。

test.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>サンプル</title>
    <style>
        
        .styleTest1
        {
            background-color : red;
            color : blue;
            font-size : 200%;
        }
        
    </style>
    
</head>
<body>

    <b>bタグその１</b><br>
    <b class='styleTest1'>bタグその２</b><br>
    <i class='styleTest1'>iタグその１</i><br>
    <i>iタグその２</i><br>
    
</body>
</html>

狙い通りですね。

さて、HTMLの側ではどう書いたかというと、

    <b>bタグその１</b><br>     <b class='styleTest1'>bタグその２</b><br>     <i class='styleTest1'>iタグその１</i><br>     <i>iタグその２</i><br>

このように、id の代わりに class と書きました。

そしてスタイルシートの側では

.styleTest1 {     background-color : red;     color : blue;     font-size : 200%; }

と書いています。
さきほどは「#styleTest1」のように「#」をつけて「idでの指定だ」ということにしていましたが、 今回は「#」ではなく「.」（半角のピリオド）です。こうすると「クラスでの指定だ」ということになります。

ここまでのまとめ

スタイルをどこに適用するか？  それを指定するには３種類の書き方があるということでした。

「タグ名で指定」「idで指定」「クラスで指定」

細かくいうと他にもいろいろあります。 元気なときにでも分厚い本やネットで調べてみてください。

スタイルシート専用のタグ

さて、ここまでのサンプルでは bタグとiタグしか使っていませんでした。 しかし、bタグだとそれだけで文字が太くなってしまいます。iタグは斜体になってしまいます。 太字にも斜体にもせず、純粋にスタイルだけを指定することはできないのでしょうか？ 

それには次のようにします。

test.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>サンプル</title>
    <style>
        
        .styleTest1
        {
            background-color : red;
            color : blue;
            font-size : 200%;
        }
        
    </style>
    
</head>
<body>

    <span class="styleTest1">spanタグその１</span>
    <div  class="styleTest1">divタグその１</div>
    <p    class="styleTest1">pタグその１</p>
    
</body>
</html>

こうなりました。
スタイルが適用されていますが、太字にも斜体にもなっていません。大成功です。

この「span」「div」「p」というのが代表的な「スタイルシート専用のタグ」です。 タグ自体では文字の見た目は変化しないので、純粋にスタイルだけを指定したいときに重宝します。

本当はこの説明は間違いです。こういう説明の仕方をエライ人に聞かれると確実に怒られてしまいます。 何が違っているのかは……「分厚い本」で調べてみてください。
「span」「div」「p」の違い

タグ自体では文字の見た目は変化しませんので、どれを使っても同じと言えば同じです。 が、使い分けの基準のようなものはあります。

span……途中で改行しないような一行だけの文字列を囲む場合に
div ……途中で改行しながら長く広範囲にわたる領域を囲む場合に
p ……長い文章の「段落」を囲む場合に
これまたあんまり正しくない説明です。 「正確ではない大体の目安」ぐらいに思っておいてください。
あれ？ よく考えたらこれってスタイルシートじゃなくてHTMLの話ですね。
スタイルシートだけを別のファイルに分ける

今までは同じHTMLファイルの中にスタイルシートを書いていましたが、 その部分だけを別のファイルに分けることができます。

たとえば次のようにファイルを作って、その中にスタイルシートだけを書きます。

style.css
.styleTest1
{
    background-color : red;
    color : blue;
    font-size : 200%;
}

すると、さきほどまでのHTMLファイルは次のようになります。

test.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>サンプル</title>
</head>
<body>

    <span class="styleTest1">spanタグその１</span>
    <div  class="styleTest1">divタグその１</div>
    <p    class="styleTest1">pタグその１</p>
    
</body>
</html>

上半分に書かれていたスタイルシートがなくなってスッキリしましたね。 それに代わって、別に作ったスタイルシートのファイルを読み込むための行が増えました。

headタグで囲った中に次のように書きます。

<link rel="stylesheet" type="text/css" href="style.css">

この中の href= の右側にファイル名を書きます。

さて、ブラウザで表示してみましょう。

同じように表示されました。
ここでは「同じことだ」ということを示すために敢えて同じスタイルシートにしましたが、 元気が残っているお友達は style.cssの側を書き換えて遊んでみてください。 本当に今のファイルが読み込まれているのかどうかを実感できると思います。

別ファイルに分けるメリット

ファイルを分けておくとHTMLの側がスッキリします。
とは言え、このサンプルのような短いスタイルシートであればファイルが増えて面倒くさいだけかもしれません。

が、別ファイルにするメリットはそれだけではありません。
ある日あなたの部屋に刃物のようなものを持った暴漢がやってきて「別ファイルに分けないとコ○ス！」と言うかもしれません。 そんなとき別ファイルに分ける方法を知っているか否かが命運を分けます。

さらに、別ファイルにするメリットはそれにとどまりません。
なななんと、同じスタイルシートを別のHTMLファイルからも読み込むことができます。 命が助かるだけでなく一体どこまでオトクなのでしょう？

たとえば今までの test.html に加えて、test2.html というファイルを作るとします。

test2.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>サンプル2</title>
</head>
<body>

    <span class="styleTest1">２つ目のファイル</span>
    
</body>
</html>

同じスタイルシートを読み込んでいるので同じスタイルが適用されます。 ためしに style.cssの内容を書き換えて遊んでみてください。 両方のHTMLで同じようにスタイルが変化するはずです。

実際にウェブサイトを作るときにはこのように別ファイルに分ける方式でスタイルシートを使うことが多いと思います。 なぜかと言うと、１つのウェブサイトは複数のファイル（ページ）で構成されているからです。 全てのページに同じように<style>～</style>を書くのは大変です。 別ファイルに分けておくことでウェブサイト全体のスタイルを一ヶ所で指定できるようになります。

逆に言うと、特定のページだけでしか使わないようなスタイルを指定したい場合には、 そのページでだけ<style>～</style>を使う方が便利な場合もあります。

使い分けの判断基準はいろいろあります。必ずしも片方の方法にこだわる必要はありません。 その都度、便利だと思う方を使う、あるいは刃物のようなものを持った暴漢の要求に従うとよいでしょう。

もっと簡単にスタイルシートを書く
これまで、スタイルシートを書く方法として２通り紹介してきました。

・<style>～</style>の中に書く
・別ファイルに分けて書く

この他にもう１つあります。特定のタグに直接書くという方法です。

test.html
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>サンプル</title>
</head>
<body>

    <span>spanタグその１</span>
    <div>divタグその１</div>
    <p style="background-color:red;">pタグその１</p>
    
</body>
</html>

ここではpタグに background-color:red; を指定しました。 タグの中に直接書いていますので、今までのように、

p {    background-color:red; }

と、タグ名を指定する必要もありません。 書いたそのタグだけにスタイルが適用されます。 単純に特定のタグにだけスタイルを適用したい場合にはこの方法がお手軽かもしれません。

おわりに

以上です。
「スタイルシートなんて全然わかんない！」から「少しはわかるし、ちょっと色を変えるぐらいならできるよ！」 になっているのではないでしょうか？  あとは実際に経験を積み重ねて、自分なりにスタイルシートを活用していってください。