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

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

CSS

pointこの用語のポイント

pointHTMLのお共だよ

pointホームページの見た目を整えるよ

スポンサーリンク

簡単に書くよ

CSSとは

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

image piyo

詳しく書くよ

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

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


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

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

ちなみに「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略で「CSS」ですが、別に覚える必要はありません。
覚えていても、たいして役に立たないと思います。

まずはホームページのファイル構成を理解してください。
2017年7月現在の流行では

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


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

CSS

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

CSS2

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

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

CSS3

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

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


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

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

CSS4

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

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

CSS5

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

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


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

これら4種類のファイル

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


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

CSS6

それを踏まえて、この4種類のファイルのうち、CSSファイルの中身を書くときのルールを定義したものが「CSS」です。

CSS7

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

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

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

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

つまり

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

から

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

の流れになったのです。

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

CSS8

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

CSS9

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

CSS10

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

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

CSS11

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

CSS12

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

image piyo2

一言でまとめるよ

まぁ「CSS」って単語が出てきたら「ホームページの見た目を整えるときに使うんだな~」と、お考えください。

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