CSSとは?

再会

師匠

また、お前かい?
いつになったら、ワイは かわいい女の子に教えること が できんねん!

弟子

そう言われましても。。。。
CSS を教えてもらって来い」って言われましたけど。。。

師匠

ほんと、やる気なくなるな。。。
こいつが、 かわいい女の子 やったらな。。。

弟子

(エロおやじ!)

HTMLに着せる服、CSS

弟子

で、CSSなんですが。。。

師匠

あ゛?

弟子

えっとー、、CSSって何の略ですか?

師匠

。。。ああ、 かわいい女の子 やったらな。。。

弟子

(ホント、やる気ないなー、この人。)

ググってみよ。
Cascading Style Sheets(カスケーディング・スタイル・シート)?
なに、これ?

師匠

どうして Cascading (滝みたいな)という単語を使っているかは、この辺のサイト(英語)で議論しているけど、イマイチ分からんな。
まー、略語のCSSだけ覚えとけば良い。
カタカナで「 スタイルシート 」と呼ばれることも多いな。

弟子

わー、いきなり動き出した!

師匠

なに?

弟子

いや、なんでも。

師匠

まー、下の図を見てみ。

師匠

センスが良くて、頭も良くて、カッコ良くて、 ダンディーなこと間違いなし! っていう人が作ったサイトに見えるな。( 女性ファン募集中!

師匠

次、下の図。

師匠

ギャグのセンスが無い若僧 が作ったサイト、って感じやのー。
どっちのサイトが良い?

弟子

それは もちろん、1番目の方ですが。。。
ダンディーとか は、関係ないと思いますが。。。
それに2番目の方を作ったのは、私ではありませんし。。。

師匠

まー、「そういう雰囲気や」っちゅう話や。

もう一回書いとく。 HTMLに着せる服 = CSS

師匠

上の1番目の図は、HTML + CSSの画面や。
2番目の図は、HTMLだけの画面や。

師匠

「HTMLだけ」、つまり 裸のHTML は、見にくいわけや。
ちなみに、ワイの裸はスゴイで。見る?

弟子

結構です。
(この人、絶対ヤバイ。)

師匠

裸のHTML が見にくいので、着せる服が CSS なんや。

師匠

ただし、人間の本質が中身にあるように、Webの本質もHTMLにある。
価値のある情報は、全てHTMLに書く。

師匠

CSSは ただの服に過ぎない。本質的には、要らないものなわけや。

弟子

「裸の本質 (HTML)」と「服 (CSS)」を分ける意味があるんですか?

師匠

めずらしく、ええ質問や。
大いにある。

本文 と デザイン が分離されていなかった、暗黒時代

師匠

昔々、HTMLの出始めの頃、「本文(=価値のある情報=裸の本質=HTML)」と「見た目(=服=CSS)」が 分離されていない暗黒時代 があったわけや。

師匠

その時代は、ページのレイアウトをする術がないから、テーブル(<table>要素)を使って、ページのレイアウトをしてたんや。( ← そういうことをする人を、テーブル職人と呼んだ。)

師匠

よって、そのころのHTMLコードは、「本質的な意味のあるテーブルの部分」と「レイアウトのためのテーブルの部分」がゴチャゴチャになった カオスの状態 やったんや。

師匠

ま、HTMLコードを読むのが 人間だけなら、それでも良かったわけや。

師匠

でも、Google様などの検索エンジンとかも、そのコードを読んで、何を書いているか理解しようとするわけ。
その時に、レイアウトのためのテーブルがあると、全然意味が分からないわけよ。
( ← この辺の昔話は、理解できなくても良い )

師匠

ともかく、先人たちの努力により、今は HTML と CSS が分離されて、とっても簡単になったっちゅうわけや。

弟子

(なんか、熱く語ってっていたが、よく分からん。。。)

師匠

とにかく、ワイは 脱いでもスゴイ んやけど、見る?

弟子

結構です。
(この人、絶対ヤバイ。)

師匠

女性ファン募集中!

復習

  • HTML : 価値のある情報、本質
  • CSS : 見た目、服