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

最終更新日:2017年09月23日  (初回投稿日: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をやっていくときに、いつも出てくる問題なので、大事です。

「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は、こんな短いセンテンスと記号だけで、細か〜くスタイルを指定できるんですね。
使い方は今後の記事で詳しく書いていきます。

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

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

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


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


CSSを指定したもの
 *サンプル末部のリンクでCSSファイルをご覧いただけます。

このサンプルは、[17-1] HTML5の新要素でページ全体を組もうで作ったものを流用しています。

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

もう一方のCSSを指定したほうは、グローバルナビゲーションが整理され、コンテンツが2カラムに分けられ、見出しが強調されて、デフォルトスタイルよりずっとわかりやすくなっています。

また、サイトのトーン(シンプル、にぎやか、かわいい、クール、ゴージャス、和風...など)を特徴づけることができるので、オリジナルのスタイル指定はかなり大事ですね。

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

スタイルシートとは

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

また、Microsoft OfficeのWordとか、Adobe Illustratorなどでもスタイルシートを使いますね。
というわけで、スタイルシートとは、別にWeb専用ではなく「文書の表示形式を制御するしくみ」ってかんじのものです。

ただ、Webの世界では スタイルシートと言えばCSS というのが当たり前になってますね。

Microsoft Office をよく使う人や、編集・DTP経験者は、CSSが初めてでも受け入れやすいはず。
Web での CSSも、印刷物のスタイルシートと同じように、ページの「タイトル・見出し・本文の段落・画像」などのスタイルを指定します。

Webの場合、この「タイトル・見出し・本文の段落・画像」などは、全部 HTML要素 です。
タイトルや見出しなら<h1>〜<h6>、段落なら<p>、画像なら<img>といった具合ですね。
それらの HTML要素のスタイルを指定するのが CSS というわけです。

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

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

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

しかし、ここでちょっと話がややこしくなる事態もあるようです。
実際にブラウザを作ってる Apple、Mozilla、Opera などの人たちが「W3Cの決め方ってちょっと違うんじゃないか? ウェブ制作者のニーズに合ってない」なんつって作った団体 WHATWG(Web Hypertext Application Technology Working Group)もあるんです。
こちらも HTML, CSS, API などの仕様を作っています。

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

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

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

次回予告

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

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.