CSS(Cascating Style Sheets)とは

CSSとは、Cascating Style Sheets(カスケーティング・スタイル・シート)の略称であり、HTMLで構成されたWEBページの表現を広げる言語です。スタイルシートと呼称される技術の1つであり、オープンウェブの核となります。基本的にHTMLと組み合わせて使用します。

WEBページ＝HTML（文書構成）+CSS（装飾）

HTMLで構成された画像や文章に対し、配置や色の指定といった体裁や見栄えを容易に変更可能になります。
イメージとしては、人形本体がHTML、服やカラーリングがCSSの担当といったイメージです。

【記載例】

HTMLにてCSSと紐づけした後、mainとtextのクラスを指定し、 CSSにてmainクラスの表示位置の幅を100％、高さを200pxの位置、背景色を灰色（#cccccc）、配置位置を中心にと指定しています。 次に、textのクラスにて文字サイズを24pxの文字色を赤色（#ff0000）と指定しています。

CSSの記述の基本

HTML同様、CSSもコードによる記述となりますが、こちらでは「<>」や「＝」を使いません。代わりにセレクターと呼ばれる「＊」「＃」「.」や、「｛｝」「：」「；」などを使って範囲などを指定します。

■CSSの記述方法

CSSの記述はセレクタとプロパティ、値の指定で形成されます。
セレクタとはスタイルの適用範囲を指し、記号と範囲の指定箇所の組み合わせ（.boxなど）を指し、プロパティは指定するスタイルを指定します。そして値は変更の度合いを表します。
なお、セレクタは常に記号との組み合わせとは限らず、HTML上の適用範囲によってはタグの直接指定もあります。
たとえば、それぞれ以下のように記載したとします。

.box{
color: red; 
      font-size: 24%;
}

このタイプでは、

• .boxがセレクタ(HTMLにてboxと名付けられたクラスで指定された範囲に適用されることを宣言)
• colorがプロパティ(HTMLにてboxで指定された範囲のcolorを装飾することを宣言)
• redが値(HTML内にてboxという範囲のcolorに関して表示内容を指定)

このような意味が含まれます。
次に、以下のように記載した場合、

p{
color: red;
　font-size:24px;
　}

• pがセレクタ（HTMLにて<p></p>で指定された部分に適用されることを宣言）
• colorがプロパティ(HTMLにて<p></p>で指定された部分の色を指定すると宣言)
• redが値(HTMLにて<p></p>で囲われた部分の内、colorに関して表示内容を指定)

このような意味になります。
この繰り返しで装飾を施すのがCSSの基本操作です。

CSSで出来ること

CSSは装飾のための存在です。そのため、サイズや色、線の形状や配置の指定など、細かく指定できます。

• background-color：背景色を指定(カラーコード・色名のどちらでも可)
• color:文字の色を指定します。font-は省略できます（カラーコード・色名のどちらでも可）
• font-size:文字のサイズを指定(%やpxで指定・largeやsmallで指定・largerやsmallerで親要素に対して1段階指定)
• height:高さの指定(%やpxなどで指定。記載無しでauto)
• width：幅の指定（％やpxなどで指定。記載無しでauto）
• margin：領域間のスペースを指定
• padding:領域内のスペースを指定
• float:指定要素を横並びにして表示することができる(並びの最後の要素にclearfixやoverflow:hiddenが必要になってくる)
• border：境界線の記載と太さや形状、色などを指定

■borderの指定内容

border: 1px solid #ff0000　このように記述されます。
この場合、「1px幅の」「１本線の」「赤色(#ff0000)」と指定しています。

• 太さ：pxの他、「thin(細い)」「medium(普通)」「thick(太い)」でも指定可能です。
• 形状：solid(1本線)、double(2本線)の他にもdashed(破線)やdotted(点線)といった表現もできます。
• 色：カラーコード(#から始まる６桁)やカラーネーム(redやgreenなど)で指定できます。transparentで透明の指定も可能です。

CSSを使用するメリットとデメリット

高クオリティのWEBページを作成するにはCSSは欠かせない存在ですが、メリットと共にデメリットも存在します。以下がCSSを使用するメリットとなります。

CSSを使用するメリット

①読み込み速度の向上

HTMLだけで構成されたソースコードはすべての要素が含まれてしまうため長く、複雑化してしまうことにより、ページの読み込みに時間がかかってしまいます。
HTML（構造）とCSS（装飾）に分けることで、読み込み時間の向上が見込めます。

②HTMLでは表現できないことが可能になる

画面サイズに対し自動的に調整したり、マウスオーバー（カーソルを乗せたりする）際に色が変わったりといった演出など様々な表現が可能です。

③複数のレイアウトを使い分けることが可能

CSSを使用することで複数のブラウザや環境（PC・タブレット・スマートフォンなど）に対応させることも可能です。

④文書構造を保持したままスタイルの指定ができる

HTMLとCSSに分離することで、同じタグの多用や配置のズレの防止など文書構造に影響を及ぼさずスタイルを制御できるようになります。

⑤メンテナンス性の向上

CSSを使用することでページ内のスタイルを一括で管理することができます。
サイト内で使用していないタグの装飾は使用されないため、そのまま残していても影響を与えません。
そのため、各ページの見出しの修正など共通化した文章に対し一括で修正でき、メンテナンス性が格段に向上します。
また、一度CSSファイルを作成し保存してしまえば使いまわしも可能なため、ブログのようにサイト内記事のデザインを共通化させたいとき等にも便利です。

例えば500記事あって、見出し(H2タグなど)の色や表示箇所を共通化させたい場合、500回HTMLファイルを開いては指定してを繰り返すことになってしまいます。
これでは非常に非効率ですので、サイトのボリュームが増えるほどにCSSの恩恵は大きなものとなります。

⑥SEO効果の向上への期待

CSSが存在すること自体がSEOに影響するわけではありませんが、CSSで装飾を担当することでHTMLのソースコードが簡潔でわかりやすくなります。

検索エンジンはHTMLのソースコードから検索キーワードを拾い上げて検索結果として表示しますが、HTML内ですべて指定してしまうと、ソースコードが煩雑になりキーワードのピックアップに時間がかかってしまうため、検索順位も下がってしまいます。
そこで、装飾についてはCSSで担当することで検索エンジンがキーワードを拾いやすくなり、結果として評価が上昇し検索順位の上昇が期待されます。

CSSを使用することで生じるデメリット

CSSで定義されたWEBページを表示するブラウザが最新のCSSに追い付いていない場合、正しく動作せずページが乱れることがあります。
常に最新が正しいとは限らず、CSSのサポート範囲を確認した上で作成する必要があります。
また、idやclassを設定しすぎてHTMLがスカスカになり、CSSのデータ量が膨大になってしまうと、CSS内部の設定項目を見つけるのに一苦労となり、結果、効率が落ちてしまったり担当間での共有ができない、把握できない状況に陥ってしまうことがあります。

CSSには優先順位が存在する

CSSを使用し装飾していく際、記載の優先順位があります。
それぞれに点数が設定されており、対象を詳しく指定しているセレクタが優先されるようになっています。

■id　>　class
HTMLからCSSへ装飾の指定をする際にid指定やclass指定がありますが、
CSS内ではidの方が優先されます。
しかし、一度しか使えないため見出しやメインコンテンツなどの最も強く押し出したい部分のみに使うことになります。
なお、classは何度でも使えますので記事内のコンテンツタイトルなどで装飾していきましょう。

■id= 「#」　class=「 . 」
初心者の頃に陥りやすいのがクラスの指定がきちんと指定できていないために反映されないということです。
例えばboxというクラスを作成した際、idで作成した場合「＃box{}」となりますし、classで作成した場合は「.box{}」となります。

■記載順序は下に行くほど優先度が上がる
例えば以下のように記載された場合、装飾内容が重複してしまっています。
(font-colorとcolorは同じ意味です。現在ではfont-は省略するのが一般的です。)

p{
 font-color: red;
   font-size: 24px;
   color: #0000ff;（青色）
   }

この場合、下部に記載した分が優先となり、color: #ff0000;が適用されるため、文字は青色で装飾されます。

■HTML　>　CSS
HTMLに色の指定を入れているのに、CSSでも指定していたとするとHTMLが優先されます。例として以下のようになります。

【HTML】
　　<font-color="#ff0000">HTMLで赤色を指定しているのに</font>

【CSS】
　　color: #0000ff; (CSSで青色を指定してもHTMLの指定が優先されてしまう)

CSSの歴史

CSSは1996年にCSS1として設計開発されました。この当時からHTMLとCSSによる役割分担という構造は変わっていませんが、当時主流のInternetExplorerやNetscapeにはCSSのサポートが備わっておらず、普及に至らずマイナーな存在でした。

そして2年後の1998年、上位互換としてCSS2となり普及が期待されましたが、残念ながら当時のトレンドだった各ブラウザにはほとんどサポートがされておらず、まだまだマイナーでマニアックな存在となってしまいました。

しかしさらに3年後の2001年、Mozilla(現在のFirefox)やOperaといったブラウザがCSSのサポートをするようになり、ようやく注目されるようになりました。その後、InternetExplorerでもサポートされ、一気にメジャーな存在へとなりました。
この頃からCSSを活用したサイト作りがされるようになってきましたが、まだまだサポートされ始めたばかりで完璧とは程遠く、互換性に難がありました。

そして2006年(日本では2008年)に完全なサポートがスタートし、ハイクオリティなWEBサイト開発がされるようになりました。時を経て2011年、現在のCSS3やCSS4に至る基本構造となるCSS2.1が勧告されました。

ベンダー(提供元)は2002年頃から2.1を基本仕様と見なしていましたが、勧告に至るまでに9年近くかかりました。

CSSのバージョン毎の出来ること

CSSにはCSS1/CSS2/CSS2.1/CSS3とあり、現在ではほとんどのホームページでCSS3が使用されています。
CSSの後ろの番号はレベルを表し、ブラウザによって対応レベルが定められています。(担当者の習熟度ではありません)
また、CSSレベルが上がるほど下のレベルにも対応しています。
学ぶ際にはCSS3まで理解できれば問題ありませんが、古いブラウザを使用している場合CSS3が対応していない場合もあり、
その場合表示が破綻することがあるため、作成前にブラウザの対応レベルを確認しておく必要があります。

CSS1で出来ること

CSS1は初期に開発されました。今ではまず使われていませんが、すべての基本となります。

• font：フォントサイズや太さなどを指定
• color：表示する色や背景画像の指定
• text：文章の間隔(字詰めなど)が可能
• list：リストマークや場所の指定
• box：marginやpadding、borderの指定

CSS2(CSS2.1)で出来ること

CSS2はCSS1の上位互換として開発されました。しかし、まだユーザー間の互換に難があり、マイナーな立ち位置でした。
その後メジャーな各ブラウザでサポートがされるようになっていったことを機に2011年に2.1が発表となり、
現在では2.1を基本仕様と見なされています。また、2.1の改訂として2.2も草案が作られています。

• 表示媒体によってスタイルシートの自動変更が可能に。
• 視覚障害などに対応した音声ブラウザへの対応
• 印刷媒体への対応・位置決め（position,top,right,bottom,left）
• 高さや幅の最大値と最小値(min-heightやmax-width)
• 生成コンテンツ(content)
• displayプロパティ(tableやinline-blockなど)

CSS3で出来ること

CSS3は2.1をベースとしてさらに拡張性を持たせたもので、明確にはCSS3という形式でのリリースではなく、名目上の呼称となります。
理由としてはCSS3はこれまでのCSSのように1つの仕様書ですべてを定義するのではなく、各モジュール(機能毎のひとまとまり)で仕様書を細かく分割しており、
CSS2.1へ機能の追加による新バージョンではなく、内部的に対応している新機能の総称といった立ち位置です。
利点としては、各仕様が独立して策定を進められるようになり、より早く改訂作業が行えるようになり、ベンダー(提供元)側は対応と非対応を自由に選択できるようになります。
そのため、CSS2.1との相互利用を推奨されています。
なお、InternetExplorerは開発が終了したため、対応可能なのはCSS3までとなります。

以上のような理由により、分割して策定されるようになったため、非常に多くの機能がそれぞれ策定されるようになりました。

• box-sizing: ボックスサイズの算出方法の指定
• border-radius: 角丸の四角表現
• rorate: 要素の回転表示
• shadow: box-(ボックス)
• text(テキスト)に影を付ける
• hsla colors: 色相・彩度・明度・透明度の指定
• multiple background: 背景画像の複数指定
• gradients: linear(線形)radial(円形)グラデーションの指定
• keyframe animation: アニメーションの指定
• skew: 要素の傾斜変形
• word wrap: 単語途中で改行するかどうかの指定
• scale: 要素の拡大・縮小
• text stroke: 袋文字(文字の輪郭線)を指定
• background size: 背景画像のサイズ指定
• transitions: transition効果(時間的変化)をまとめて指定
• translate: 要素の表示位置を移動
• reflections: 画像の反射(リフレクト)を指定
• @font-face: WEBフォントの指定

その他にも多種多用のモジュールが開発されており、今はまだ草案の段階とされているものも多岐に渡り存在します。

CSS4で出来ること

正確にはCSS4というものは存在しません。便宜上、わかりやすくするためにレベル４のモジュールをCSS4と呼称されています。
現在はWD(草案)という形での発表であり、今後さらに開発・各ブラウザのサポートなどが完了することで正式勧告となっていきます。

・セレクタの簡略化(:matches・:not・:hasなど)：これまでカンマで区切って記載していたのをスッキリと簡潔化できるようになります。
・カラー(16進数カラーコードでの透過設定)：これまでの6桁から8桁の表記になり、末尾2桁が透過度となります。
たとえば、#ff0000ccでrgba(255 , 0 , 0 , 0.8)と同様の少しだけ透過された赤色を表現できるようになります。
また、rgbaの透過度指定も％指定が検討されています。

・メディアクエリ(@media type):メディアクエリは機種や特性によりサイトやアプリを変更したいときに便利です。

■レベル4に於いて@media typeに推奨と非推奨が検討されているようです。

• all(すべてのデバイスに適応):推奨
• print(印刷される表現を意図したデバイスに適応):推奨
• screen(パソコンんどのスクリーン)：推奨
• speech(音声出力)：推奨
• projection(プロジェクタ出力)：非推奨
• handheld(携帯電話)：非推奨
• braille(点字用ディスプレイ)：非推奨
• device-height,width(出力デバイスの表示領域の高さと幅):非推奨
• devide-aspect-ratio(出力デバイスのアスペクト比)：非推奨

また、品質表示系メディア特性の追加検討も同時にされており、以下のようなものが検討されているようです。

• update(レンダリング後にコンテンツの表示の更新可能能力の照会)：none,slow,fast
• overflow-block(ブロックに沿ってViewportからはみ出たコンテンツをどのように扱うか)：none,scroll,optional-paged,paged
• overflow-inline(インラインに沿ってViewportからはみ出たコンテンツをスクロールするか否か)：none,scroll

同じくインタラクションメディア特性の追加検討がなされています。

• pointer(ポインティングデバイスの精度を照会)：none,coarse,fine
• hover(タッチパネル・マウスなどの複数の入力手段がある場合の指定)：none,hover

まとめ

ＣＳＳは装飾が基本となり、HTMLは構造の指定を担当します。基本的にHTMLとCSSはセットとなります。
そしてCSSは単体ではページの表示などはできません。
その代わり、「複数のHTMLに使用できる」「HTMLにすべて記載してしまうと読み込みが遅くなったり、内容が複雑で更新作業が非常に面倒になる」といった問題を解消してくれるといった利便性があります。
複数の記事があるサイトほど恩恵は大きくなりますが、今後もサイトの運用を想定されるのであれば是非とも導入していただきたいと思います。
また、レベルが変わる際に非推奨になることなどもありますので、対応表などを確認し適時対応していく必要があります。