「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

順番に見ていきましょう。
まずは予備知識として「CSS」について簡単に説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

CSSは「ホームページの見た目を整えるための技術」です。

ホームページのファイル構成ですが、この説明を書いている時点では

・内容が書いてあるファイル
・見た目が書いてあるファイル
・絵が描いてあるファイル
・動作が書いてあるファイル

の4種類のファイルを組み合わせて1つのページを表示するのが主流です。



この4種類のファイルのうち「見た目が書いてあるファイル」の中身を書くときのルールを定義したものがCSSです。



以上を踏まえて、CSSの説明で出てきた

「見た目が書いてあるファイル」の俗称

が「CSSファイル」です。



CSSファイルの拡張子（ファイルの種類を表す目印）は「.css」であることが多いです。



あと、ついでなので書いておくと、内容が書いてあるファイルは「HTMLファイル」です。
絵が描いてあるファイルは「画像ファイル」です。
動作が書いてあるファイルは「JavaScriptファイル」や「jsファイル」と呼ばれています。
気が向いたら、併せて覚えてあげてください。



もう少し詳しく見ていきましょう。

もともと、ホームページの見た目の指定は、HTMLファイルの中でやっていました。
そして、人類は長年、そんな状況に疑問を持つことなく暮らしていました。

ところがですね。
ある人（それが誰かは知りません）が気づいてしまったのです。
「なんか……この使い方はHTMLの本来の使い方とは違うんじゃね？HTMLって文書構造を定義するためにあるんでしょ？」と。

そうです。
HTMLは本来、書いた内容にマーキングして「ここに書いてある内容はタイトルですよ」や「ここは見出しね」などを表現するためのものです。
「この文字の色は赤ですよ～」のような、見た目の指定をするためのものでは ありません。

そこで生まれたのがCSSです。
今までは全部HTMLで書いていましたが、デザインに関するところはCSSで書くようにしました。

文章→HTMLで構造を定義して見た目を整える

から

文章→HTMLで構造を定義→CSSで見た目を整える

になったのです。

まず、表示したい文章があります。



この文章に対して、HTMLのルールに従って、マーキングします。
これで、文書構造が表現できました。



この状態のファイルが、いわゆる「HTMLファイル」です。



さらに別途、CSSのルールに従って、見た目を指定します。

見た目の指定は、HTMLファイルの中に書くこともできます。



見た目の指定を書いたファイルを別に用意して、HTMLファイルから読み込ませる（合体させる）こともできます。
このときの「見た目の指定を書いたファイル」がCSSファイルです。



CSSファイルは必ず用意しないといけないわけでは ありません。
その気になれば、CSSファイルの中身を全部、HTMLファイルに入れ込むこともできます。

とはいえ、何でもかんでもHTMLファイルの中に書くと、ごちゃごちゃしますからね。
編集や管理をしやすくために、見た目の指定部分だけを別に抜き出してCSSファイルにまとめたりします。