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

ホームページを見ていると

・文字に色が付いている
・文字が大きい
・画面が全体的に右に寄っている

などに遭遇することがあるはずです。

このような、ホームページの見た目を変えるやり方は、いくつかあります。
その、いくつかあるやり方のひとつが「CSS」です。

まずはホームページのファイル構成を理解してください。
この説明を書いている時点では

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

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



内容が書いてあるファイルは「HTMLファイル」と呼ばれています。



HTMLファイルは内容を書いておくファイルです。
ページの核となるファイルですね。

見た目が書いてあるファイルは「CSSファイル」と呼ばれています。



CSSファイルは見た目に関するルールを書くファイルです。
例えば

・ホームページの横幅はどれくらいにしよう
・この目印を付けた文字の色は何色にしよう
・この目印を付けた範囲に背景を付けよう

などのルールを書いておきます。

絵が描いてあるファイルは「画像ファイル」です。



画像ファイルは説明しなくても分かりますよね？

最後に、動作が書いてあるファイルが「JavaScriptファイル（jsファイル）」です。



JavaScriptファイル（jsファイル）は「動作」を定義するファイルです。
例えば

・ページを表示するときに、こんな動きをしてよ
・他のページに移動するときに、こんな動きをしてよ
・このボタンを押したら、こんな動きをしてよ

などの指示を書いておきます。

これら4種類のファイル

・HTMLファイル（内容）
・CSSファイル（見た目）
・画像ファイル（絵）
・JavaScriptファイル（動作）

が組み合わさることによって、ホームページの中の1ページが形作られています。



それを踏まえて、この4種類のファイルのうち

CSSファイルの中身を書くときのルールを定義したもの

が「CSS」です。



「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で「CSS」ね。
気が向いたら、覚えてあげてください。



※「Cascading Style Sheets」を何となく日本語にすると「数珠つなぎになった様式シート」となります。[詳細]

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

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

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

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

つまり

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

から

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

の流れになったのです。

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



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



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



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

見た目の指定は、HTMLファイルの中にも書けます。



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



これがCSSの役割です。
見た目の指定を書くためのルールで、ホームページの見た目を整えるときに使います。