3.webページ主に２種類のテキストファイルでできている ～その２～ CSS
web界隈のテキストファイル２大巨頭
前回は２種類のテキストファイルの１つHTMLについて学習しました。
今回は残るCSSについて掘り下げていきます。
前回に引き続き、専門用語を避けて、全体感を掴むことを目指します。
CSSって？
例によって書きます。Cascading Style Sheetsの略です。ハイ。
今回も噛み砕いて書くと、
ブラウザがページを表示する時に読む参考資料。
これです。
webページはブラウザがHTMLを読み込んで表示するのは今までの学習で学びました。
CSSはブラウザの「表示する」の工程で、「表示の仕方をどうするか」という指示が書かれているテキストファイルです。
わかりづらいんだけど？
では、一度webページ制作をレストランに例えてみましょう。
あなたは「レストランのオーナー」だとします。
新作メニューを「シェフ」に作ってもらう為に必要なものを準備しました。
- レシピ
- 材料
- 盛り付け写真
「シェフ」に「レシピ」と「材料」を渡して、料理を作ってもらいます。
そして、盛り付けはこんな風にお願いと別途「盛り付け写真」を渡しました。
こうして、シェフがレシピを見ながら材料を調理して、お皿に盛り付けてお客様に提供されました。
これをwebページの表示に置き換えると理解の助けになると思います。
「レストランのオーナー」を「web制作者」へ
「シェフ」を「ブラウザ」へ
「レシピ」は「HTMLのタグ」
「材料」は「HTMLの表示したい内容」
そして、最後の「盛り付け写真」が「CSS」です。
ブラウザがHTMLを読みながら処理をして、CSSの内容を反映させて閲覧者の画面にページを表示していく。
冒頭で書いた一文の意味が今ならわかってもらえるかと思います。
CSSはブラウザの「表示する」の工程で、「表示の仕方をどうするか」という指示が書かれている。
でも、HTMLとCSSってバラバラのテキストでしょ？
その通りです。
ブラウザはどのHTMLをどのCSSの内容を反映すれば良いのか知りません。
HTMLファイル(テキスト)に「このCSSファイル(テキスト)を見てね」という意味の一文を記述をすることで、ブラウザががCSSの内容を反映させながらwebページを表示してくれるわけです。
何度も言いますが、HTMLもCSSも、ただのテキストファイルです。
身構える必要はありません。（自己暗示。）
CSSの役割は料理で言うところの「盛り付け」
「料理の盛り付け」≒「表示の仕方」はわかった。(少々乱暴な気もしますが)
でも、どうやってブラウザに伝えるんだよ。
テキストだけで、写真とか使えないじゃないか！
と思っているそこのあなた。安心して下さい。私も同じ気持ちです。
次はブラウザに表示の仕方を指示するのに、どうすれば良いのかを掘り下げます。
HTMLタグとCSSの深い関係
前回の学習から、
「ブラウザはHTMLのタグから情報を読み込んでいる。」
という事は周知の事実かとおもいます。
勘の良い方ならお気づきかもしれませんが、
このタグの中身に対して、CSSは表示の仕方を書きます。
例えば、
CSSに以下のように書くとします。
タグ1 { 文字色 : 赤}
タグ１で囲まれたテキストは赤色にしてね。という指示です。
そして、HTMLにはこう書くのです。
<タグ１>ここが赤色で表示される</タグ1>
するとブラウザが、
ここが赤色で表示される
のように、CSSをみて「タグ１で囲まれてる内容を赤色で表示するんだね。」
と判断して上記のように表示してくれるのです。
実際はもっと難しいんでしょ？
それはその通りです。
大分、噛み砕いて書きました。
本来は英語で書かれているので、ワーっとなってしまいそうですが、
こうして日本語で流れを確認すれば、
やっていることはそんなに難しくないんだと納得できます。
細かい作法やルールは存在しますが、大枠を理解するにはこれで十分かなと思います。
今日のまとめ
ニュアンスや言い回し等、
バッシングいただきそうですが、ここまで自分の噛み砕いた理解で書いてきました。
自分の学習の整理をしつつ、躓いている誰かの役に立てれば、なお嬉しいです。
引き続き日々の学習を進めつつ、またアウトプットしていきます。
ではまた。
