[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

CSSファイル

pointこの用語のポイント

pointホームページの見た目を定義するファイルだよ

point中身がCSSで書かれているよ

point拡張子が「.css」だよ

スポンサーリンク

簡単に書くよ

CSSファイルとは

中身がCSSで書かれている、ホームページの見た目を表現するためのファイル
であり

拡張子が「.css」なファイル
です。

image piyo

詳しく書くよ

順番に見ていきましょう。

CSS(シーエスエス)は「ホームページの見た目を整えるための技術」ね。

ホームページのファイル構成ですが、2017年7月現在の流行では

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


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

CSSファイル

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

CSSファイル2

そして、この「見た目が書いてあるファイル」の俗称が「CSSファイル」です。

CSSファイル3

CSSファイルの拡張子は「.css」であることが多いです。

CSSファイル4

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

CSSファイル5

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

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

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

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

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

つまり

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

から

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

の流れになったのです。

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

CSSファイル6

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

CSSファイル7

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

CSSファイル8

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

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

CSSファイル9

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

CSSファイル10

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

ただ、何でもかんでもHTMLファイルの中に書くと、ごちゃごちゃしますからね。
編集や管理をしやすくために用意するファイルです。

image piyo2

一言でまとめるよ

まぁ「CSSファイル」って単語が出てきたら「ホームページの見た目が書かれているファイルなんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク