CSSはWebページのデザインを担当する言語

CSS（シーエスエス：Cascading Style Sheets）とは、Webページのコンテンツのレイアウトやデザインを記述する言語です。
CSSは親要素、子要素、孫要素と階層構造となっていて、親要素で設定したスタイルを子要素や孫要素が引き継いでいきます。このような特徴を意味するCascading（連続する小滝）を使って命名されました。
ヘッダーやフッター、メニュー、本文のレイアウトや幅の設定や、テキストの色、大きさ、行間や背景色などのデザインを設定できます。
また、今まで動きはジャバスクリプト言語で実施してきましたが、最新のバージョンであるCSS3では画像のアニメーションや変形なども可能になっています。

3つの要素で記述するCSSの書き方

CSSは次の例のように「ルール」と呼ばれる最小単位で記述されます。
一つのルールは「セレクタ（選択名）」と、それに対する特性を定義する「プロパティ（属性）」と「属性値」の3つの要素で構成されます。

この例では「h1（大見出し）」がセレクターで、「text-align（文字揃え）」が属性、center（中心揃え）が属性値です。
これは「大見出しの文字揃えをセンタリングにする」記述です。
属性と属性値とは「：」で繋ぎ「{ }」で囲みます。属性値の後の「；」は属性と属性値の設定の終了を意味します。「；」で区切ることで属性と属性値は幾つでも設定できます。

様々なセレクタにプロバティを追加した例をあげます。

このCSSをHTMLのブログで紹介したサンプルHTMLに適用すると次のような表示となります。

コンテンツ（HTMLファイル）とデザイン（CSSファイル）の分離により、PC・スマホ別のデザインが可能に

CSSは当初、HTMLファイルの中に書き込まれていましたが、コンテンツとデザインのソースコードが複雑に入り込み、メンテナンス性が著しく損なわれる事態となりました。そのため、HTMLファイルからデザインの設定を分離し、外部のCSSファイルに集約して読み込むことになりました。
CSSを分離することで次のようなメリットが生まれました。

• 柔軟性: ウェブページの構造とデザインが独立しているため、PCやスマホなどの異なるデバイスや画面サイズに対応しやすくなります。

• メンテナンス性の向上: スタイルとコンテンツが分離されるため、デザインの変更が容易になります。HTMLを変更せずにスタイルを調整できます。

• 再利用性: 同じスタイルシートを複数のHTMLファイルで使用できるため、コードの再利用が容易になります。

CSSのバージョンアップでデザインが大きく変化

今までCSSは３回大幅にバージョンアップされ、現在は「CSS3」が最新バージョンです。バージョンアップの都度、WEBデザインは大きく進化し、現在のように多彩なスタイルを生み出しています。
今後、CSSはHTMLと同様に大きなバージョンアップではなく、WEBインフラや技術の進展に合わせて、随時、機能の追加や削除が行われていくと思われます。古いCSSのルールが改変されてレイアウトの乱れなどの可能性があるため、出来だけ最新のCSSでの作成をおすすめしています。