Skip to main content

Visit Mozilla.org

CSS:Getting Started:Why use CSS

出典: MDC


このページでは、なぜ文書に CSS を利用するかについて説明します。 あなたのサンプル文書に CSS でスタイルシートを追加します。

[編集] 解説 : なぜ CSS を利用するか?

CSS により、文書の情報と表示形態の詳細を分離しておくことができます。文書の表示形態の詳細は、その スタイル と呼ばれます。このスタイルを内容と分離しておくことで、

  • 重複を防げます
  • メンテナンスが簡単になります
  • 異なった目的のために、異なるスタイルを適用できます
サンプル
同じような表示の無数のページがサイトにあったとします。CSS を利用すれば、スタイル情報はすべてのページから共有できる共通ファイルに入れることができます。

ユーザがウェブページを表示するとき、ユーザのブラウザがページの内容とともにスタイル情報を読み込みます。

ユーザがウェブページを印刷する場合、印刷されたものが読みやすくなるように異なったスタイル情報を提供することも可能です。

CSS を利用する際、一般的に、マークアップ言語は CSS の記述でなく文書の情報の記述に利用します。CSS は文書でなくスタイルの決定に利用します。(このチュートリアルの後ろでは、この配置の例外が出てきます。)

より詳細について
HTML のようなマークアップ言語は、スタイルの指定にいくつかの方法を提供しています。

たとえば、HTML では <B> タグをテキストを太文字にするのに利用できますし、ページの背景色を指定するのに <BODY> タグでも可能です。

CSS を利用した場合、普通はマークアップ言語のこれらの機能を用いるのではなく、文書のスタイル情報のすべてを一つの場所にまとめます。

[編集] 実例 : スタイルシートを作成する

前回と同じディレクトリの中に別のテキストファイルを作成してください。 このファイルが、あなたのスタイルシートになります。 名前は、style1.css としてください。

CSS ファイルに、以下の１行をコピー・ペーストして保存してください。 

strong {color: red;}

[編集] あなたの文書にスタイルシートを適用する

あなたの文書にスタイルシートを適用するには、HTML ファイルを編集します。 以下に太字で示されている行を付け加えてください。 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
  <title>Sample document</title>
  <link rel="stylesheet" type="text/css" href="style1.css">
  </head>
  <body>
    <p>
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

ファイルを保存して、ブラウザの表示を更新してください。 スタイルシートにより、始めの文字が次のように赤く表示されているはずです。

Cascading Style Sheets
発展
赤以外にも、CSS はいくつかの色名称をサポートしています。リファレンスを見ずに、それらのうち 5 色の名前を見つけ出し、あなたのスタイルシートに入れてください。

[編集] 次は?

このページを理解するのが難しかったり、コメントがあれば、この記事の 議論 ページで述べてください。

これで、別ファイルのスタイルシートにリンクしたサンプル文書ができました。そして、あなたはブラウザが文書を表示する時にどのようにそれらを組み合わせているかについて勉強する準備ができたことになります。次の、どのように CSS は動作するのか へ行きましょう。

"http://developer.mozilla.org/ja/docs/CSS:Getting_Started:Why_use_CSS" より作成