英語から深く理解しよう！CSSとは？

先日は、英語からHTMLを学ぶとラクですよ！

というお話をしました。

そこでHTMLとセットで学ぶべきCSSについても、同様に英語から攻めてみましょう。

CSSとは？

CSSとは、Cascading Style Sheetsの頭文字を取って、省略したものです。

ただ、今回は、

• cascading
• style
• sheet

という３つの英語の中で、カタカナで書いても違和感のない「スタイル」と「シート」は、辞書では調べませんでした。

そうですね～。

style sheetsとは、「スタイルを整えていくシート」ぐらいに考えておけば良いと思います。

でも、あれ？

確か、HTMLも、タグを使って、文字の色を変えたり、大きさを変えたりできましたよね？

なのに、なんでまた、スタイルを整えるのに、CSSを利用するのでしょうか？

これは、こう考えるとスッキリします。

• HTMLの場合は、文字単位でスタイルを変える
• CSSの場合は、HTMLの中のグループごとに見た目を変える

わかりやすいように、イメージにしてみます。

桜の花びらを文章だと思ってください。

その中の、一部の花びらだけを、ピンクにしたい。

こういう時には、HTML内で、色を変えます。

一方、桜と背景をすべて、ピンクにしたい場合。

一枚ずつの花びら、そして背景をピンクにするのは、大変です。

そこで、ピンクにしたい部分を囲っておいてから、花びらと背景をピンクに変えれば、より作業は簡単になりますよね？

これが、CSSの役目になります。

cascadeの意味は？

なんとなく、CSSの概念がわかってきたでしょうか？

でも、忘れちゃいけません。

CSSのC、Cascadingの意味がまだ説明できていません。

そこで、早速、cascadeの英単語を辞書で引いてみましょう。

cascadeの意味からわかることは？

さぁ。

cascadeの意味は、なんとなくでも理解できました。

でも、

• なぜ？わざわざcascadingという単語が必要だったのでしょうか？
• CSSのCを抜かして、SSにしといても、良かったんじゃないか？

なんて、疑問に思いませんでしたか？

ここで思い出して欲しいのが、

• 階段状である
• 縦のつながりである
• 受け継がれる

というcascadeのイメージです。

実際に、CSSコードの画像を見るとわかりやすいかもしれません。

まず、見た目的にも階段状になっていることがわかりますよね？

• 黄色い文字が、上層のグループ。
• 青い文字が、その下の層のグループ。

そうイメージすると良いかもしれません。

さらに、黄色い文字だけに注目してみましょう。

• 「．」で始まっているものと、
• 「＃」で始まっているものがあります。

でも、文字の色的には、階層は同じっぽい。

なのに、なぜ？わざわざ記号を変えているのか？

実を言うと、私は、ここが、すっきりしませんでした。

Ａゴトウ

多くの初心者のつまづきポイントだと思います

ところが、cascadeという単語によって、すべて腑に落とすことができました。

なぜ？cascadeなのか？

その答えは、多分、

CSSにおいては、同じ階層であっても、優先度があるよ！

ってことなんだと思います。

Ａゴトウ

CSSの優先度については、検索してみてください。

まとめ

よく、名は体をあらわすと言います。

特に、プログラミングを学習するようになって、

名前って、本当にその物の性質や実体をよく表しているんだなぁと、感じることが多くなりました。

だからこそ、

CSSとは何か？

という問いに対して、表面的に英語を日本語に訳して終わり！にするのではなく、意味を深く追求してみるのは、とても大事なことだと思います。

実際、私は、cascadeの意味をきちんと調べたおかげで、

• 階層
• 優先度

が意識できるようになり、以前よりもCSSが簡単になったと感じています。

もちろん、プログラミングも英語学習と同じで、習うより慣れよ！的な部分はあります。

が、英語と同じで暗記だけではどうにもならない部分もある！ということを忘れないでほしいと思います。

実際、遠回りに見えるものほど、コアに近いんです。

Ａゴトウ

昔、英語学習に挫折した私の実感です。