ほんっとにはじめてのHTML5とCSS3：【1】CSSってどんなもの？カスケーディングって何？

【1】CSSってどんなもの？カスケーディングって何？

最終更新日：2017年11月13日　（初回投稿日：2015年07月23日）

CSS（Cascading Style Sheets　カスケーディングスタイルシート）は、Webサイトを作るときのスタイルシート。HTML文書のスタイルを整えるための仕組み（というか言語）です。

HTML（Hypertext Markup Language）も CSS も、ブラウザが理解できるコトバ（マークアップ言語）で書かれます。 HTMLやCSSは ブラウザに対する指示書です。

「カスケーディング」って何だろう

では カスケーディングスタイルシートの カスケーディングって何でしょう？

「Cascade（カスケード）」とは「階段状に連続する滝」だそうです。
Googleの画像検索で「cascade」を検索すると ↓こんなかんじで小滝だらけ。

★豆知識★
有線LANで、HUB（ハブ）どうしを連続してつなぐカスケード接続ってのもあります。
これは、階段状の滝のようにHUBを直列で数珠つなぎにする方法で、端末（PCやらプリンタやら）の台数を増やすためのもの。

話はそれるけど「華厳の滝」みたいな上から下まで階段が無い1本滝は「WaterFall」と言います。
IT用語でのウォーターフォールモデルは、システム開発で、1つの工程が終わってから次の工程に行く（前行程に後戻りしない）進め方なんだそうです。1本滝が流れ落ちるように開発が進んでいくことからこの名前に。
あと、ちなみにファッション用語に「カスケード・ストライプ」という縞模様がありますね。太さが違う縞模様ね。

で、IT用語でのカスケーディング（Cascading）とは カスケード処理 のこと。

カスケード処理 とは、
指定が複数あるとき、あらかじめ決められた優先度のルールによって優先度が一番高い指定が1つだけ有効になる仕組み
だそうです。

CSSは、このカスケード処理という仕組みを使ったスタイルシートです。
「優先度が低いスタイル」を「優先度が高いスタイル」が上書きするスタイルシート。

ブラウザは元々デフォルトのCSSがあるし、HTMLにジカに書かれたCSSや、外部CSSファイルもあり、ユーザーのスタイルも設定されていたら、同じ要素に対して違う指示がいっぱい。ブラウザは、どれを使えばいいのかわかんないからミッション放棄。そうさせないための「カスケード処理」です。

というわけで、
CSSのカスケーディング とは 優先順位決定の仕組みだと覚えておこう。

CSSを書いて、意図したプレビューをしないとき、「何かほかの優先度が高い指定がジャマしてるな」と気付きましょう。これ大事です。

「CSSの優先度のルール」については、
【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）
で詳しく書いています。

こんな書式で書くのがCSS

例えば、

body {
  color:#666;
  font-size: 15px;
  line-height:1.6em;}

と指定すれば、<body>要素内にある すべてのテキストが、
文字の色はグレー（#666）、文字のサイズは15px、行の高さは文字の高さの1.6倍になります。

このCSSを保存して、Webサイトの全HTMLファイルに読み込むようにしておけば、Webサイト全体をこのスタイルで統一することができるというわけです。

<body>内の特定の部品（見出しやコラムなど）のスタイルを変えたいなら、該当する要素に対してCSSを追加するだけ。

h1 {
  color:blue;        /*見出し（h1）の文字色はブルーに*/
  font-size:120%}    /*サイズは120％に。15pxの120％で18pxになります*/
div.column {         /*コラム用のブロック（div）に「column」というclass名をつけて*/
  font-size:0.8em;   /*文字サイズを0.8em（80％）にしました。15pxの0.8emで12pxです*/
  line-height:1.3em} /*文字が小さくなると行間が空きすぎるので、こちらも調整*/

どのブラウザもデフォルトのCSSを持っています

HTML要素で組んだだけで、まだ何もCSSの指定をしてなくても、ブラウザで見てみると、それなりに文字の太さや大きさが違っていたり、段落の間隔が空いてたりします。
これは、どのブラウザもデフォルトのCSSを備えているから。

下の例は、同じHTMLファイルで、
片方はCSS指定無し（ブラウザのデフォルトCSSが使われます）
もう一方はCSSを指定アリのサンプルです。
（↓ 画像クリックでサンプルページが別タブで開きます。）

CSS指定無し（ブラウザデフォルトスタイル）

CSSを指定したもの

ブラウザデフォルトスタイルだけのほうでも、要素によって文字のスタイルが変わって、それなりに読みやすくなってますよね。
ただし見た目はあんまりパッとしない。必要最低限の読みやすさしか追求してないから。

もう一方のCSSを指定したほうは、グローバルナビゲーションが整理されるなど、視覚的な効果が強まっています。
ウェブサイトの「トーン（シンプル、にぎやか、かわいい、クール、ゴージャス、和風...など）」を特徴づけることもできます。

新たにCSSを指定すれば、ブラウザのデフォルトのスタイルを自動的に上書きします。
それは、ブラウザのデフォルトスタイルの優先度が一番低いからです。
（詳しくは【4】CSSの優先度のルール（ブラウザが混乱しないためのルールだよ）で）

スタイルシートとは

スタイルシートとは、もともと編集・DTP業界の用語で、大昔からあるモノです。
新聞・雑誌・書籍・フライヤーなどの印刷物の誌面をレイアウトするときに使います。
文字の太さ、大きさ、罫の色や太さやサイズ、マージンの幅...などの情報（これがスタイル）を、スタイルシートに保存しておいて、各エレメントに適用します。

また、Microsoft OfficeのWordとか、Adobe Illustratorなどでもスタイルシートを使いますね。

ですので、Office をよく使う人や、編集・DTP経験者は、CSSが初めてでも受け入れやすいはず。CSSも印刷物のスタイルシートと同じようなものです。

CSSの場合、指定する対象は全部 HTML要素 です。
タイトルや見出しなら<h1>〜<h6>、段落なら<p>、画像なら<img>といった具合で。
HTML要素のスタイルを指定するのが CSS というわけです。

W3C という団体がルールを決めています

文書そのものはHTML、スタイルはCSSが担当 と役割分担するのがルールです。
それを決めたのは W3C（World Wide Web Consortium）という非営利団体です。
HTML や CSS、APIなどのさまざまな仕様を定義・発表（勧告）しています。

W3Cが定義した仕様をブラウザ側が実装します。
ですので制作側もそのルールに従ってコーディングするんです。アクセシビリティの確保のために、このやり方がベストなんですね。
（詳しくは、[12-2] なんでHTMLとCSSはセットなの？をご覧ください）

しかし、もう１つ仕様を決定する団体があります。
実際にブラウザを作ってる Apple、Mozilla、Opera などの人たちが「W3Cのってちょっと違うんじゃないか？　ウェブ制作者のニーズに合ってない」なんて言って作った団体 WHATWG（Web Hypertext Application Technology Working Group）。
こちらも HTML, CSS, API などの仕様を作っています。

W3C と WHATWG が仲が悪いってことではなく、今では WHATWG が作った仕様を W3C が取り入れて、自分とこのコンセンサスも盛り込んで「W3Cの仕様」として出すものも多いとか。
（参考：まだぼやけているHTML5の将来、WHATWGとの二重管理のジレンマ。W3C TPAC 2015 － Publickey）

ただ、あるブラウザは W3Cの仕様を実装し、他のブラウザは WHATWGの仕様を取り入れるという、ブラウザによって表示の仕方が異なる事もあります。（ruby要素とか）
それ（ブラウザによって表示の仕方がバラバラ）を何とかするために W3C が設立されたっていうのに、人間って複雑ですね（笑）

まあ基本的には、W3Cの仕様が定義されたら各ブラウザがそれを実装する。という仕組みだと思っていて（まだ）イイようです。

次回予告

いかがでしたか？　優先度のルールを理解してると、まじでCSSの理解が進みます。
その「優先度のルール」の前に、
次回は、CSSの基本的な構造と、CSSを書く場所について見てみましょう。
（「セレクタ」とかを知っていないと、優先度の話もわかりにくいと思うので）

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。