CSSを学ぶことになりました。
CSSはWebサイトのデザインをするための言語というイメージがありますが、
他にもできることがありますか？
あとHTMLとはどういう関係なのでしょうか。
今回はこのような疑問に答えていきます。
Webサイトを作成する上で、HTMLとCSSは欠かせない存在です。 CSSはサイトのデザインだけでなく、アニメーションを実装したり、 メディアごとにデザインを切り替えることもできます。
そこでこの記事では、CSSとは？CSSでできることについて解説します。
CSSとは
CSSとはWebページのスタイル（デザイン）を指定するための言語で、
Webページの見栄えを良くすることができます。
CSSは「Cascading Style Sheets（カスケーディングスタイルシート）」の略で、
HTMLと組み合わせて使います。
HTMLがWebページの文書構造を表し、
CSSがWebページのスタイルを設定する役割です。
1996年に最初の規格である「CSS1」が確定し、 その後「CSS2」「CSS2.1」を経て、 現在の最新版は「CSS3」となっています。 「CSS3」は大幅に機能が向上し、これまでCSSでは実現できなかった アニメーションを実装できるようにもなっています。
なお、HTMLもCSSもどちらもプログラミング言語ではなく、 HTMLはマークアップ言語、CSSはスタイルシート言語です。 プログラミング言語、マークアップ言語、スタイルシート言語は いずれもコンピュータ言語の1つです。
- 「コンピュータ言語」
-
- プログラミング言語（Python、Java、他）
- マークアップ言語（HTML、他）
- スタイルシート言語（CSS、他）
- 他
Cascadingとは
この章は、HTMLやCSSを全く知らない方には難しいので興味がなければ読み飛ばしてください。
「cascade」は下図のように「何段も連なった小さな滝」を意味します。
「cascading」は「何段も連なった小さな滝のように連鎖的に伝わる」
という意味です。
では何が連鎖的に伝わるのかと言うと、「スタイル設定」が連鎖的に伝わります。
<div>
<p>
<span></span>
</p>
</div>
「div タグの中に p タグ、p タグの中に span タグ」という構造です。
div タグに対してフォントサイズ 16pxを指定した場合、 div タグの中にある p タグ、 span タグもその指定（フォントサイズ 16px）を引き継ぎます。 次に div タグに対してフォントサイズ 14px を指定した場合、 p タグの中にある span タグもその指定 （フォントサイズ 14px）を引き継ぎます。
このように、「上流のタグに対して指定したスタイルが、 下流のタグにも連鎖的に伝わる」 という意味で「Cascading」とつけられているのです。
CSSでできること
Webサイトのデザイン（見栄えを良くする）
CSSのメインはWebサイトの見栄えを良くすることです。
ユーザーが読みやすくて、
見やすいWebデザインになるようにCSSで装飾します。
- 文字のサイズや色
- 背景色
- 画像サイズ
- ボタン
- カードデザイン
ほんの一例ですが、 これらの見た目を整えることができます。
もしCSSがなかったら
もしCSSがなければこのページは下図のように表示されます。
文字や画像を見ることはできますが、 非常に素っ気ない見た目ですよね。 CSSで見た目を整えた方が、 はるかに見やすいのがわかってもらえると思います。
文書構造（HTML）とデザイン（CSS）を分離できる
CSSでWebデザインを行うことによって、
HTMLとCSSの役割分担が明確になります。
HTMLで文書構造を表し、CSSはデザイン担当です。
HTMLは文書構造を表すことだけでなく、 ある程度の装飾（デザイン）機能もあります。 インターネットが普及し始めた当時は、 HTMLタグの中にデザイン設定を書き込んでいるサイトが 数多くありました。 その場合、文書構造とデザインが混在しているため、 ソースの可読性やメンテナンス性が悪いサイトになっていました。
現在は文書構造とデザインを分離するのが当たり前となっているため、 昔のような可読性の悪いサイトはほぼなくなっています。 そしてHTMLが文書構造を表すのに専念することで、 HTMLページの軽量化にもなります。 そしてページが素早く表示されることはSEO的にも効果があります。
つまり、HTMLとCSSを分離すると以下のようなたくさんのメリットがあります。
- ソースの可読性が良くなる
- ソースのメンテナンス性が良くなる
- ページの軽量化
- サイト表示の高速化
- SEO効果
アニメーション
CSS3ではアニメーションを実装できるようになりました。
これまではアニメーションを実現するには
JavaScriptというプログラミング言語を使う必要がありました。
例えば、グローバルナビゲーションや動きのあるボタンなど、
ですがCSS3のアニメーション機能を使うと、 要素の移動・拡大・縮小・回転など、 JavaScriptを使うことなく実現できることが増えました。
具体的には「transition」と「animation」という機能があります。 「transition」機能を使うと手軽にアニメーションが実装できますが、 複雑な動きは制限されます。 一方「animation」機能を使うと、本格的なアニメーションができますが、 コードが複雑になります。 最初は「transition」を使った方が無難です。
メディアごとにデザインを切り替える
CSSではメディアごとにデザインを切り替えることもできます。 ここで言うメディアとはPC画面、スマホ画面、プリンタ、 などの端末の種類のことです。
CSSのメディアクエリ機能を使うことで
端末ごとや特定の条件でスタイルを変更できます。
例えばdiv要素の文字色を、
ディスプレイ（screen）とプリンタ(print）で切り替える場合、
次のようにCSSに記述します。
/* ディスプレイ（screen）の場合は青色 */
@medai screen {
div { color: blue;}
}
/* プリンタ（print）の場合は黒色 */
@media print {
div { color: black;}
}
現在定義されているメディアタイプは次の4つです。
（参考: W3C Media Queries Level 4）
| メディアクエリ | 端末 |
|---|---|
| all | 全ての端末 |
| screen | PCやスマホなどの画面 |
| プリンタ | |
| speech | 読み出し端末 |
CSSの注意点
ブラウザごとに仕様が異なる場合がある
CSSの記述内容を読み込んで、 画面に反映させるのはブラウザの仕事です。 ただしブラウザによって若干の仕様の違いがあるため、 デザインが意図した通りに反映されないケースもあります。
さらに、W3Cで規定されている機能がブラウザ側で未対応のケースもあります。 そうした場合もデザインは反映されません。 特にIEなどの古いブラウザを使っている場合は注意が必要です。
企業のシステムなどで古いパソコンをずっと使っている場合、 おそらくブラウザも古いIEを使っていると思われます。 その場合はブラウザがCSSの機能に対応しているかを調べて使う必要があります。
使用したいHTMLやCSSがどのブラウザで対応しているかを調べたい場合は、
次のサイトで確認できます。
（ブラウザの対応状況を確認できるサイト「Can I use…」）
