CSSとは

CSS(スタイルシート)とは、HTMLで作られたウェブページに装飾やレイアウトなどのデザインを加える仕組み(言語)です。今ご覧になっている記事も、文字色・背景色・枠線色などの各種配色や、余白量・段組構造・表示位置の調整など、あらゆるデザインにCSSが使われています。

装飾もレイアウトもほとんどない「HTMLだけ」の状態(左)に、CSSを加えることでウェブページの見た目を作る

装飾もレイアウトもほとんどない「HTMLだけ」の状態(画像左)に、CSSを加えることでウェブページの見た目(画像右)を作る


本記事では、これからCSSを書こうと考えている方々向けに、CSSの仕組みやソースの書き方、読み込み方、基本的な構造、レスポンシブWebデザインとは何か……など、CSSに関する疑問を解消できるよう解説いたします。

【本記事の目次】


CSSとHTMLの関係とは

CSSは、HTMLやXHTMLで作成された文章にデザインを加えるための言語です。文字色・背景色を加えたり、表示位置を調整したり、余白量を調節したりできます。スクリプトと組み合わせることで、マウスの動きに合わせて装飾を変更させたり、表示・非表示が切り替わるタブ機能などを実現させたり、条件に応じてアニメーションさせたりもできます。

HTML(文章構造)+CSS(装飾)=ウェブページ

HTML(文章構造)+CSS(装飾)=ウェブページ


装飾を作るとはいえ、CSSソースそのものはテキストデータ
CSSもHTMLと同じようにテキスト形式のデータです。HTMLソース内に直接CSSソースを書くこともできますが、単独のCSSファイルに独立させておいてHTMLから読み込む形も多々使われます。どちらの書き方でも、基本は「どの部分に、どんな装飾を加えるのか」という、適用対象と適用内容の対応を1つ1つ記述していく簡単な仕組みです。基本的な構造を覚えてしまえば、記述は難しくありません。

CSSソースの書き方(編集方法)

CSSソースはテキストデータ

CSSソースはテキストデータ

CSSは、ソースを自力で記述することもできますし、作成ソフトを使って生成することもできます。CSSはテキスト形式のデータですから、テキストデータが編集できるソフトウェアでなら何でも作成できるとも言えます。

しかし、何の予備知識もスキルもない状態で1から記述するのは大変です。CSSの記述をサポートしてくれる便利なソフトウェアが多数ありますから、最初はそれらを使って書くのが楽で望ましいでしょう。

CSSを丸ごと生成する機能や、CSSソース編集を補完してくれる機能など
CSSの記述をサポートしてくれる機能として、特に初心者に便利なのは下図のようにダイアログからCSSソースを自動的に出力してくれるような機能でしょう。

ダイアログからCSSソースを自動出力してくれる機能

ダイアログからCSSソースを自動出力してくれる機能


しかし、慣れてくると上記のような方法では手間に感じられます。その際に便利なのは、下図のようにCSSソースの記述をリアルタイムに(入力の最中に)自動で補完してくれる機能です。

CSSソースの入力最中に自動補完してくれる機能

CSSソースの入力最中に自動補完してくれる機能


このような自動補完機能を活用すると、記述が楽になりますし、文法ミスも防ぎやすくなって便利です。

【関連記事】
無料のウェブ作成ソフトMicrosoft Expression Web 4 (※上図はこのソフトの画面)
ホームページ作成ソフトの選び方
ホームページの作り方:4通りの作成方法から選ぶ
HTML・スタイルシートのソースを編集する方法


レスポンシブ・ウェブデザインとは

CSSに関しては「レスポンシブ・ウェブデザイン」という用語も目にしたことがあるかもしれません。「レスポンシブ・ウェブデザイン」は、ウェブサイトをスマートフォンやタブレットなどのモバイル端末に対応させる際によく使われるCSSの記述方法です。

1つのCSSソースの中に、閲覧環境別のスタイルを用意できる
CSSだけで、閲覧者の画面幅に応じてレイアウトを変化させられる

CSSだけで、閲覧者の画面幅に応じてレイアウトを変化させられる

CSSの「メディアクエリ(Media Queries)」という記述方法を使えば、閲覧者の環境に応じてスタイルを変化させられます。例えば、
  • 閲覧者の画面が1,200pxより広ければ3段組で表示する
  • 閲覧者の画面が600~1,200pxなら2段組で表示する
  • 閲覧者の画面が600pxより狭ければ段組にはせずに表示する
……というようなデザインができます。これらは上から順に「PC用のデザイン」・「タブレット用のデザイン」・「スマートフォン用のデザイン」になるでしょう。


 
HTMLは共通で、CSSだけを切り替えることでPC・モバイル両対応にできる
レスポンシブ・ウェブデザインの大きなメリットは、多数の環境に向けたデザインをCSSだけで用意できるため、HTMLは1つで済むという点です。HTMLが1つで済むなら、閲覧環境ごとに同じコンテンツをいくつも用意する手間がありませんし、閲覧環境ごとに異なるURLにする必要もありません。誰に向けても単一のURLを紹介するだけで済みます。

CSSには、閲覧環境に応じて適用スタイルを変化させる仕組みがある

CSSには、閲覧環境に応じて適用スタイルを変化させる仕組みがある


【関連記事】
レスポンシブ・ウェブデザインの簡単な作り方
メディアクエリで画面サイズ別にCSSを切り替える方法
スマートフォン対応サイトの作り方と6つの注意点
レスポンシブCSSで使うブレイクポイントの決め方


CSS3とは? CSS4とは?

CSSの後に数字を加えた「CSS3」という表現も目にするでしょう。「CSS4」という名称を目にしたこともあるかもしれません。それらについて簡単に紹介しておきます。

CSSにはレベル(バージョン)がある
CSSの各仕様が勧告された年 (CSS3以降はモジュール別に策定)

CSSの各仕様が勧告された年 (CSS3以降はモジュール別に策定)

CSSの仕様には「レベル」と呼ばれるバージョンのような番号があり、CSS2.1、CSS3、CSS4のように「CSS」に数値を加えて表されます。HTMLと同様に、CSSの仕様も段階的に公表され、最初の「草案」から最終確定の「勧告」まで数ステップがあります。

CSS3やCSS4という単一の規格はない
CSS3以降では仕様がモジュール(部品)単位で策定される方針に変わったため、「CSS3」や「CSS4」という単一の規格は存在しません。例えば「CSS Color Module Level 3」や「CSS Fonts Module Level 3」のように、機能単位で仕様が分かれています。それらを総称して「CSS3」と呼びます。

【関連記事】
CSS3とは? 機能が増えて便利になったスタイルシート
CSS3の新単位「rem」で文字サイズを分かりやすく指定

CSS4の策定も進んでいる
CSS4を構成する一部になる仕様の策定も進んでいる

CSS4を構成する一部になる仕様の策定も進んでいる

本稿執筆時点ではまだ草案の段階ですが、「CSS ○○○ Level 4」のような名称で表現されるCSS4の仕様も策定が進んでいます。例えば、「CSS Color Module Level 4」は2016年5月に草案が出ています。CSSの各機能は、仕様が確定する「勧告」が出るよりも前に多くのブラウザで実装されるため、このようなCSS4の仕様もそう遠くない将来にはブラウザで表示可能になるでしょう。


さて、CSSの概要を紹介できたところで、次のページではCSSの基本的な構造と書き方、セレクタ・プロパティなどの用語についてをご紹介いたします。