このページでは CSS とは何かについて解説します。 これ以降のページで使う簡単な文書を作ることになります。
解説 : CSS とは何か?
CSS とは、ユーザに文書をどう表示するかを決定する言語です。
文書 とは、 マークアップ言語 で構造付けられた情報の集まりのことです。
|
このチュートリアルでは、次のように より詳細について のキャプションがついたボックスには、より詳細な追加の情報が記述されています。 もし、チュートリアルを急いで読んでいる場合、これらのボックスを飛ばしてもかまいませんが、できればあとで振り返って読んでください。そうでなければ、ボックスが出てきたときに読んで、興味があればリンクをたどってより詳細について見てください。
|
文書とはファイルと同一ではありません。ファイルに保存されるかもしれませんし、されないかもしれません。 たとえば、あなたがいま読んでいる文書はファイルに保存されているものではありません。ブラウザがこのページをリクエストした際に、サーバはデータベースにクエリを送り、さまざまなファイルから文書を集めて文書を生成します。しかしながら、このチュートリアルでは、あなたはファイルに保存された文書について作業します。 この文書とマークアップ言語のより詳細については、このサイトのほかの部分、たとえば:
このチュートリアルの第2章では、それらのマークアップ言語のサンプルを見るでしょう。 |
文書をユーザに 表示する とは、人間が利用できる形に変換するということです。Mozilla は文書を目で見る形 — たとえば、コンピュータ画面、プロジェクター、プリンターなどです — に表示するよう設計されています。
| CSS はブラウザのためだけではないし、目で見える表示のためだけでもありません。正式な CSS 技術では、ユーザに文書を表示するプログラムを
ユーザエージェント
(UA) と読んでいます。ブラウザは UA の単なる1種類でしかありません。しかしながら、このチュートリアルの第1章では、ブラウザでの CSS についてのみ見ることになります。
CSS に関連した技術の正式な定義については、CSS 仕様の 定義 を参照してください。 |
実例 : 文書を作成する
あなたのコンピュータ上で、新しいディレクトリを作って、その中に新しいテキストファイルを作ってください。 このファイルが、あなたの文書を保存する先となります。
以下の HTML をコピー＆ペーストしてください。そして、ファイルを doc1.html の名前で保存してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
ブラウザで、新しいタブもしくはウィンドウを開いて、このファイルをそこで開いてください。
次のように、始めの文字がボールドになったテキストが表示されます。
| Cascading Style Sheets |
あなたのブラウザに表示されたものは、ブラウザの設定と wiki の設定の違いにより、これとまったく同じとは限らないでしょう。もし、フォント、空白、色に多少の違いがあったとしても、それは重要ではありません。
次は?
このページを理解するのが難しかったり、コメントがあれば、この記事の 議論 ページで述べてください。
あなたの作った文書は、まだ CSS を利用していません。次のページで CSS を使ってそのスタイルを決めます : CSS をなぜ用いるか ?