スタイルシートをhtmlの外に追いだそう。

前々回は、

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>僕が考えた最強の打線。</title>
    <style>
        li {color: red;}
    </style>
</head>
<body>
    <h1>僕が考えた最強の打線。</h1>
    <p>僕が考えた最強の打線を発表します。</p>
    <ol>
        <li>遊 小坂</li>
        <li>二 西岡</li>
        <li>一 福浦</li>
        <li>右 サブロー</li>
        <li>指 初芝</li>
        <li>捕 里崎</li>
        <li>三 今江</li>
        <li>左 大塚</li>
        <li>中 諸積</li>
    </ol>
</body>
</html>

と、htmlのhead要素の中にstyleタグを記述しました。
今回はスタイルをスタイルを外部ファイルにしてhtml外に追いやろうと思っております。

CSSファイルをつくる

スタイルはCSSファイルに記述します。

<style>
    li {color: red;}
</style>

こちらのスタイルをCSSファイルに書き直すと、

@charset "UTF-8";

li {
    color: red;
}

と、こんな感じになります。

今回はこちらのCSSファイルを、

main.css

という名前でhtmlファイルと同一階層に保存することにしましょう。

文字コード

1行目の、

@charset "UTF-8";

の部分は文字コードをUTF-8に指定しています。
文字コードについては、 htmlファイルをつくったときにも解説したので今回は説明をはしょります。

HTMLファイルにCSSファイルを読み込ませる

htmlにCSSなどの外部ファイルを読み込ませるときには linkタグ をつかいます。
linkタグには閉じタグは無いので、文章を囲うのではなく属性を指定してつかいます。
以前解説したmetaタグのつかいかたと似てますね。

rel属性にHTMLファイルとリンク先のファイルとの関係性を記述し、
href属性に外部ファイルのパスを記述します。

今回はCSSファイルなので、rel属性にstylesheet、href属性にmain.cssと記述しましょう。

<link rel="stylesheet" href="main.css" />

これでOKです。

さっそくHTMLファイルを書き換えてみましょう。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>僕が考えた最強の打線。</title>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
    <h1>僕が考えた最強の打線。</h1>
    <p>僕が考えた最強の打線を発表します。</p>
    <ol>
        <li>遊 小坂</li>
        <li>二 西岡</li>
        <li>一 福浦</li>
        <li>右 サブロー</li>
        <li>指 初芝</li>
        <li>捕 里崎</li>
        <li>三 今江</li>
        <li>左 大塚</li>
        <li>中 諸積</li>
    </ol>
</body>
</html>

CSS

@charset "UTF-8";

li {
    color: red;
}

こんな感じですかね。

なぜHTMLとCSSをわけるのか

ひとことで言えば人のためです。ブラウザ側にはそんなにメリットはありません。

複数のHTMLから同じスタイルを読み込めるようになる。

HTMLファイル内にstyle属性やstyleタグでスタイルを書き込んでしまうと、そのスタイルは、そのページ専用のものになってしまいます。
CSSファイルを外部に切り出すことによって、複数のHTMLに同じスタイルを効かせることができるようになります。

台本の例で例えると、「32ページのセリフは大きめに読む」という書き込みを、すべての台本に記述するよりも、稽古場の掲示板に書いてみんなに見てもらったほうが周知も修正も楽々。
という感じでしょうか。

役割がしっかりする

HTMLとCSSを分けることにより、
文章に意味をつける（HTML）ことと、見た目を調整する（CSS）ことをしっかり分業できます。
歌担当と踊り担当をわけるアイドルグループみたいなものかもしれません。（違うかもしれません）

さてさて今回までの解説で、HTML、CSSを書きはじめる準備はそれなりに整いました。（まだまだ説明不足な点が満載ですが）

そんなこんなで、マークアップをはじめよう編の第1部はここで終了し、第2部では若干方向性を変えて、HTML、CSSに関するTipsをお届けしていきたいとおもいます。

みかづきブログその3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。