で、スタイルシートはどこに書くのか？

2014年1月22日にA8.netのファンブログはSeesaa Blogのシステムをベースにして生まれ変わりました。よってファンブログ関連の記事は今では当てはまらない可能性があります。新しいファンブログのカスタマイズは別ブログ「ファンブログテック」で詳しく書いていますので、そちらをご覧ください。

ファンブログのみなさま、こんばんは。お元気ですか？

今朝は、長らく放置していたシリーズ「タグの中にスタイルシートを直接書かない１」のつづきをアップしてホッとしておりました。

伝わったかどうかはわかりませんが、スタイルシートを外部に書くことの良さと便利さを説明したつもりです。

で、すっかり安心していたのですが、この話まだ終わっていませんでした。それに気づいたのは今です。

外部スタイルシートが便利なのは説明した。

で、それはどこに書くの？

まだ説明していませんでした。これからそれを書きます。

スタイルシートを書ける場所は３ヵ所あります。

ひとつは、今まで何度も出てきたタグの中。これはいいですよね。
あとふたつは、ヘッダの中と、別ファイルの２種類です。

ヘッダとは何か。
まずこれを書かないと話が通じません。これはHTMLの説明になるのですが、ごく簡単に概要だけ話します。HTMLというのは大まかに言って、以下のような構成です。

<html>
<head>
        <title>ページのタイトル</title>
        <meta name="description" content="書いてあることの概略"/>
        <meta name="keywords" content="ポイントとなるキーワード"/>
        (他、文字化けしないための設定やらページに関する情報類)
</head>
<body>
        (ここに本文)
</body>
</html>

黄色い部分が、画面に表示されない情報。
緑の部分が、画面に表示される内容です。

descriptionやらkeywordというのは検索サイトが検索結果を表示させるときの判断材料になるのでみんな真剣に考えていますね。しかし、それに関しての説明は今日しません。

参考記事： descriptionとkeywords

で、スタイルシートもこのヘッダに書くことが出来ます。が、あまりおすすめしません。なぜなら書いたそのファイルにしか反映されないから、というのがひとつ。そしてHTMLファイルが煩雑になりわかりづらい、というのがもうひとつの理由です。

ブログというのは何ページもあるのにレイアウトを変えるたびにいくつものファイルを直していられません。いちいちタグひとつひとつにスタイルを書いていられないという趣旨とも合致します。そこで、別ファイルに分けて書こうというのが第三の手段です。

でも一応、ヘッダへの書き方も説明します。そのファイルのみにしか適用しないスタイルというのは当然ありますし、知っていたら知らないより便利だからです。

HTMLのヘッダにスタイルを書く

書くのは<head>から</head>の間ならどこでもいいのですがなるべく終わりのほうに書いたほうがいいです。それは、もしもスタイルシートの中に日本語があった場合、文字化けしないための設定より後に書いてあったほうがいいというか、じゃなきゃダメだからです。もちろん、日本語が入っていない時はヘッダのどこに書いても大丈夫です。

では、書き方です。例として、
全体の背景色は白(#fff)
文字の色は青(#00f)
テーブルの背景色は緑(#0f0)
という場合は、以下のように書きます。

ちなみに文字色の指定方法は、color:文字色です。
私は最初知らずに「このcolorはどこのカラーじゃ、こりゃ！」と怒っていました。
colorというのは文字色です。背景色はbackground または background-color で指定します。

<style type="text/css">
body{
    background:#fff;
    color:#00f;
}

table{
    background:#0f0;
}    
</style>

body というのは上のHTMLに書いたように画面に表示される部分、の大元です。
そこに background と color を指定すれば、基本的にはその配下はその設定になります。
クラスの指定も書き方は同じで、タグ名ではなく.(ドット)クラス名を使う点だけが違います。

重要なのは必ず <style type=”text/css”>から</style>の間に書くということです。

css というのはスタイルシートの正式名称「カスケードスタイルシート」の頭文字です。

別のファイルにスタイルを書く

では、外部ファイルを指定する場合はどう書くのでしょう。
外部ファイルの場合は<style type=”text/css”>と</style>のタグは必要なく、まっさらなファイルに

body{
    background:#fff;
    color:#00f;
}

table{
    background:#0f0;
}

とだけ書きます。そして、ヘッダファイルに、外部ファイルの場所を指定してあげます。
これをしないと、HTMLファイルは外部ファイルの存在を知らず、スタイルシートを適用しません。当たり前ですね。

ヘッダファイルへの指定方法は

です。ファイル名はこのブログの場合だと「http://fanblogs.jp/ayzfqir5/style.css」です。

ファイルの名前はstyle.cssじゃなくても何でもいいです。ただ、最後は.cssで終わるようにします。

本当はmedia属性というのもあるのですが、今回は無視します。

でもやっぱり、簡単な説明だけ。media属性と言うの、実はこれ私好きなんです。

ホームページを印刷したりすることありますよね。で、印刷用のスタイルシートとモニタ表示用のスタイルシートを分けることが出来るんです。印刷用のスタイルシートだけA4サイズに合わせたwidth と height を指定したり、モニタ画面だけ動く背景を使って、印刷用の背景は別にするとか出来るんです。

要はスタイルシートを複数作って、印刷用とモニタ用に分けられると。それがmedia属性です。

もっと説明したいが、今回はしない。以上簡単なmedia属性の説明でした。

追記。media属性の記事を書きました。
メディア属性 – HTML5で縦書き年賀状4

ファンブログのスタイルシートはどこで設定するのか？

ご覧のメニューはファンブログにログインすると左側に見られると思います。

その「スタイルの編集」をクリック。すると下の画面になります。

下の画面の右側がスタイルシートの編集です。

ファンブログの場合、ヘッダにはすでに<link rel=”stylesheet” type=”text/css” href=”ファイルの場所/ファイル名”/>が書き込まれていますので、スタイルシートを編集して保存すれば作業終了です。

プレビューボタンもありますが、確認できるのはトップページだけで、個別のページは確認できません。もしよかったらこのブログの「スタイルシートコンバータ」を使ってみてください。

「で、スタイルシートはどこに書くのか？」への2件のフィードバック

ある夫人 より:

2011年6月9日 21:35

こんばんわ。通りすがりの「ある夫人」です。

あ、コメント欄に到着してたんですね

わかりやすいご説明、ありがとうございます。

返信
Tom より:

2011年6月10日 01:41

ある夫人さん。はじめまして。
コメントありがとうございます！

コメントもらってるの知らなかったんですけど、さっき訪問者一覧のリンクからページに伺ったところでした。ポチッとしときました。

コメントもらうとうれしいな。また来てください。どうもありがとうございます。

返信