仕事を豊かにする

英語から深く理解しよう!CSSとは?

2019年7月14日

CSSコードのイメージ

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

というお話をしました。

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

 

 

CSSとは?

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

ただ、今回は、

  • cascading
  • style
  • sheet

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

そうですね~。

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

 

ココがポイント

ただし、style sheetsを「スタイルを整えていくシート」と考えると、一体、何のスタイルを整えるのか?

ここが気になりますよね。

実は、CSSが整えるのは、HTMLで書いた文章のスタイル(見た目)なのです。

だからこそ、HTMLとCSSはセットで学ぶ!とも言えます。

 

でも、あれ?

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

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

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

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

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

Aの画像

HTMLのイメージ

 

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

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

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

 

Bの画像

CSSのイメージ

 

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

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

 

Cの画像

CSSの準備イメージ

 

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

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

 

cascadeの意味は?

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

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

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

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

 

ついでに英語学習

cascadeの英単語の意味を調べたら、2つ意味が出てきました。

今回は、両方とも掲載しておきます。

1つ目は、a small waterfall, typically one of several that fall in stages down a steep rocky slope。

意味を書くより、写真を見たほうが早いですね。

cadcadeの写真

そして、2つ目の意味が、a process whereby something, typically information or knowledge, is successively passed on。

つまり、情報等によって、手順がちゃんと受け継がれるという意味です。

滝は、上から下へと水が流れる縦のつながりなので、そこからイメージされているようです。

 

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

さぁ。

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

でも、

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

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

 

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

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

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

 

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

CSSコードのイメージ

 

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

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

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

 

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

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

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

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

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

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

 

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

なぜ?cascadeなのか?

その答えは、多分、

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

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

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

 

まとめ

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

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

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

 

だからこそ、

CSSとは何か?

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

 

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

  • 階層
  • 優先度

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

 

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

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

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

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

今月の人気記事ベスト3

be動詞のアクティビティ 1

小学校6年生の中学準備として、 be動詞のアクティビティを考えてみました。   小学校6年生は、まだまだ子供だけど、ちょっぴり大人です。 だから、 単に、楽しいだけじゃなく、 ちゃんと、覚え ...

ifのイメージ 2

今回は、中2英語で出てくる接続詞のwhenとifを取り上げます。 この接続詞のwhenとifは、わりと簡単そうに見えるのですが、 ???なことも多いので、一緒に頑張っていきましょう。   目 ...

3

英語のレッスンで、何か楽しそうなアクティビティはないか? とお探しなら、 やっぱり、クロスワードがおすすめです。   目次1 ちょっと違う英語のクロスワード1.1 基本のやり方と準備1.2 ...

-仕事を豊かにする
-,