CSSってなに？

こんにちは、さるまりんです。

今日は(今日も、かな？)CSSについてざっくり書かせてもらいたいと思います。

以前もお伝えしましたように、僕はプログラマーですがフロントの技術には余り触れてきませんでした。
HTMLやCSS、これらはウェブを作る技術ですが、ぼんやりと知っており、ちょっと使えるレベルです。
もっと知りたいと思いながらこのCSSについて考えてみようと思います。

CSSとは？

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページのスタイル、大雑把にいえば表示の仕方、見え方を指定するための言語です。HTMLで作成するWebページにスタイルを適用する時、この言語CSSを利用するのが一般的です。

CSSはHTMLと組み合わせて使います。HTMLではページ内の要素について、その意味やデータがどうなっているかを決定します。CSSはそのHTMLで作られてデータがどのように見えるか(見せるか、ですかね)を決めます。

なぜCSS？

HTMLもいろんなことができる言語でそれだけを使って文章がどう見えるかを書くことができました。
例えば<font>タグや<center>タグで見え方を調整することができました。そういえば<blink>タグなんてのもありました。文字列を点滅させるタグなんですよ。
と、HTMLだけで文章の見え方をある程度コントロールすることができます。が、HTMLの仕様が新しくなり、これらの修飾を目的としたタグやその属性は、非推奨となり廃止されるようになってきました。

データの構造とその装飾は分けることが望ましいとされています。HTMLでデータそのものとその構造を定義し、CSSでどんな風に見えるかを指定する。その役割をそれぞれに分けようということです。
役割を分けておくと文章の見え方を変えたい時にはこのスタイルシートを差し替えるだけで見え方を変更できます。

試してみましょう。

これくらいで説明にはなりませんが、簡単な例でやってみましょう。

一つ目はこちら。

<style type="text/css">
div.red-storm {
    color: red;
    font-weight: bold;
}
</style>

二つ目はこちら。

<style type="text/css">
div.blue-garden {
    color: green;
    font-weight: bold;
    background-color: #e5effa;
}
</style>

<style></style>に囲まれているところがCSSです。

それぞれ適用してみましょう。
<div class="red-storm">The quick brown fox jumps over the lazy dog.</div> <div class="blue-garden">The quick brown fox jumps over the lazy dog.</div>

結果

The quick brown fox jumps over the lazy dog.

このように簡単に見え方を変更することができました。

いかがですか？

HTMLはデータとその構造を決めCSSで見せ方を決める。