CSSの基礎

「あとで紹介します」「そのうち説明します」と言い続けてきたCSSが、ついに登場です。これを使うと文字に色をつけたり枠線を引いたりと、ページを自由にデザインすることができます。前置きはなしでさっそく作ってみましょう。

このページではCSS1を取り上げます。ほかにCSS1を発展させたCSS2もありますが、このコーナーでは扱いません。

目次

準備

CSSを使うときは<head>縲鰀</head>内に次の1行を追加してください。

<meta http-equiv="Content-Style-Type" content="text/css">

「スタイルシートにはCSSを使いますよ」という合図です。

CSSを使ってみる

とりあえず、完成済みのHTML文書を用意してみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <meta http-equiv="Content-Language" content="ja">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>徒然日記</title>
  </head>
  <body>
    <h1>徒然日記</h1>
    <h2>8月13日: 海へ泳ぎにいった</h2>
    <p>海水浴へいきました。天気は快晴で絶好の海水浴日和でした。</p>
    <p>泳ぎ始めてまもなく、<em>クラゲに刺されました</em>。痛かったです。</p>
  </body>
</html>

表示すると大体こんな感じのはずです。

徒然日記

8月13日: 海へ泳ぎにいった

海水浴へいきました。天気は快晴で絶好の海水浴日和でした。

泳ぎ始めてまもなく、クラゲに刺されました。痛かったです。

相変わらず白黒のままです。そこでem要素(<em>縲鰀</em>)の文字を赤くし、大きさを1.2倍にしてみましょう。<head>縲鰀</head>内に次のコードを追加してみてください。

<style type="text/css">
<!--
em {
    color: red;
    font-size: 120%;
}
-->
</style>

CSSを利用するにはstyle要素を使います。CSSの部分は<!-- -->でコメントにしてください(参考:コメントの書き方)。

下のコードはHTML全体です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <meta http-equiv="Content-Language" content="ja">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>徒然日記</title>
    <style type="text/css">
    <!--
    em {
      color: red;
      font-size: 120%;
    }
    -->
    </style>
  </head>
  <body>
    <h1>徒然日記</h1>
    <h2>8月13日: 海へ泳ぎにいった</h2>
    <p>海水浴へいきました。天気は快晴で絶好の海水浴日和でした。</p>
    <p>泳ぎ始めてまもなく、<em>クラゲに刺されました</em>。痛かったです。</p>
  </body>
</html>

表示例です。

徒然日記

8月13日: 海へ泳ぎにいった

海水浴へいきました。天気は快晴で絶好の海水浴日和でした。

泳ぎ始めてまもなく、クラゲに刺されました。痛かったです。

ちょっとカラフルになりましたね。(^o^)

ソースを見てもらうとなんとなくわかると思いますが、要するに

○○の {
    △△を: □□にする;
    △△を: □□にする;
}

と書けばいいんです。

それぞれのスタイル指定の後ろには;(セミコロン)をつけるのを忘れないでください。(セミコロンのうち最後の一つは省略できます。)

ちなみに○○のことをセレクタ、△△のことをプロパティ、□□のことを値といいます。

コメント

CSSでは/* 縲鰀 */で囲んだ部分がコメントになります。複数行にまたがってもOKです。

em {
  color: red; /* 文字色を赤にする */
}

ファイルから読み込む

上の例ではCSSをHTML文書の中に記述していましたが、実は別ファイルに分離することもできるんです。こっちのほうが実は便利だったりします。では作ってみましょう。

まずはメモ帳などのテキストエディタを起動して、次のソースをコピー＆ペーストしてください。

h1 {
    color: red;
    font-size: 200%;
}
h2 {
    color: blue;
    font-size: 150%;
}

今回の場合はタグやコメントがついていません。

次に「名前をつけて保存」します。初めてHTML文書を作ったときと同じ要領です。ファイルの種類は「すべてのファイル」を選んでください。ファイル名は「default.css」とでもしておきましょう。(拡張子は一般的に「.css」です。)保存場所はHTMLファイルと同じフォルダにしてください。

外部ファイルからCSS読み込むにはlink要素を使います。今度はHTML文書を開いて、先ほど<style type="text/css">縲鰀</style>とした箇所の代わりに、次の一行を記述してください。

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

これで、スタイルシートを「default.css」から読み込むようになります。HTML全体は下のようになります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <meta http-equiv="Content-Language" content="ja">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>徒然日記</title>
    <link rel="stylesheet" href="default.css" type="text/css">
  </head>
  <body>
    <h1>徒然日記</h1>
    <h2>8月13日: 海へ泳ぎにいった</h2>
    <p>海水浴へいきました。天気は快晴で絶好の海水浴日和でした。</p>
    <p>泳ぎ始めてまもなく、<em>クラゲに刺されました</em>。痛かったです。</p>
  </body>
</html>

表示させてみてください。今度は<h1>縲鰀</h1>の部分が赤になって、<h2>縲鰀</h2>の部分が青にになったと思います。

CSSを外部ファイルにするメリット

先ほど「CSSは別ファイルに分けたほうが便利」といいました。なぜかというと、この方法なら外部ファイルを一つ用意するだけで、複数のHTML文書のデザインを設定できるからです。

(図)[default.css]→[page1.html][page2.html][page3.html](default.cssで3つのHTML文書のデザインをまとめて指定)

しかも、h1要素の文字を赤じゃなくて黄色にしたいと思ったら、外部CSSファイルの中のh1 {color: red;}をh1 {color: yellow;}に1ヵ所書き換えるだけでいいんです。もしHTMLファイルにCSSが書いてあったら、HTMLファイルの該当箇所を全部書き換えないといけなくなります。HTMLファイルが何十個何百個もあったら大変です。

逆に、「このページだけは別のデザインにする」といった場合にはHTMLファイルの中にCSSを書いてもいいかもしれません。

まとめ

次はCSSの基礎編その2、スタイルの指定方法です。

Information

現在の位置