ちょっとサイトをステキにするCSSの基礎
連載一覧へ
いまさら聞けないCSS／スタイルシート入門（1）

ちょっとサイトをステキにするCSSの基本

有限会社タグパンダ
喜安 亮介
2008/9/11
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？（編集部）

「CSS」でちょっとサイトをステキにしよう

- PR -

　CSS（シー・エス・エス）とは、Cascading Style Sheets（カスケーディング・スタイル・シート）の頭文字を取った接頭語で、サイトをデザインするための言語として広く使われているWeb標準技術です。

　「スタイルシート」と表記している媒体もあり、少なからず初心者に対し混乱を与えてしまっているようですが、大体の場合これは「Cascading Style Sheets（カスケーディングスタイルシート）」の略語だと解釈してしまっても構わないでしょう。

　本連載では、Webデザインに欠かせない、ちょっとサイトをステキにするCSSの基礎について解説していきたいと思います。

構造（HTML）とスタイル（CSS）を分けるって？

　皆さんが普段見ているWebサイトのページ（文章）はいくつかの文章から構成されています。そして、文章を装飾するためのデザインがあり、そのデザインがページを見やすくさせていますね。

　この文章の部分の論理的表現は、HTML言語というものを用いて記述していき、デザインとなる視覚的表現を行う部分はCSS言語を用いて表現していきます。なお、文書の論理表現（HTML言語）と、視覚表現（CSS言語）を分離させて記述していくことにより、以下のようなメリットが得られます。

  • 出力メディア（ユーザーエージェント）ごとに違ったデザインを適用できる
  • 高度なデザイン表現が可能
  • CSSファイルをHTMLから分離させることによりメンテナンスが非常に楽になる

■ CSSの定義場所

　HTMLとCSSを分離させるといっても、具体的にどのようにしたらよいのでしょうか？ その方法は非常に簡単です。HTMLソースの<head>と</head>の間に下記のコードを記述してsample.cssというファイルを読み込ませています。

リスト1　外部参照によるやり方
<link rel="stylesheet" href="sample.css" type="text/css" />

　この方法は外部スタイルシートによる外部参照を用いた適用の仕方です。「HTMLとCSSとを分離させる」という意図からは外れてしまいますが、HTML内に直接スタイルを記述したい場合は、次の2通りのやり方があります。

リスト2　内部参照によるやり方
<style type="text/css">
  p {color: red}
</style>

　リスト2は、head要素内に直接スタイルを記述していく方法です。

リスト3　インライン記述によるやり方
<p style="color:red;">この文字は赤色になるのだ</p>

　リスト3はHTMLの属性に直接記述していく方法です。

■ クラスとIDを使ったスタイルのグループ化

　CSSを使ったデザインをする際にクラスとIDを覚えておく必要があります。クラスとIDを使うと、グループ単位でのスタイルの一括指定が行えます。

　同一ID名が1つのHTMLファイル内に何度も登場してはなりません。しかしクラス名の場合は、何度登場しても構いません。こういったことから、部分的にスタイルを変えたいといった場合などにはクラスが使われます。

リスト4　クラスを使ったスタイルの指定（CSSコード）
.aka {
  color: red;
}

リスト5　クラスを使ったスタイルの指定（HTMLコード）
<div class="aka">
  <h3>タイトル文字が赤色になる</h3>
  <p>ここの文字も赤色！</p>
</div>

　ドット記号「.」の後にクラス名という形で定義します。例では、「aka」というクラスを定義し、文字を赤色にしなさいという指定をしています。<h3>要素、<p>要素内にあるどちらの文字も赤色になりましたね！

図2　クラスを使ったスタイルシートの表示例
図1　クラスを使ったスタイルシートの表示例（画像をクリックすると実際にWebブラウザで表示します）

　一方、IDを使ってスタイルの指定をするには、シャープ記号「#」の後にクラス名という形で定義します。例では、「aoというクラスを定義し、文字を青色にしなさい」という指定をしています。

リスト6　IDを使ったスタイルの指定（CSSコード）
#ao {
  color: blue;
}

リスト7　IDを使ったスタイルの指定（HTMLコード）
<div id="ao">
  <h3>タイトル文字が青色になる</h3>
  <p>ここの文字も青色！</p>
</div>

図3　IDを使ったスタイルシートの表示例
図2　IDを使ったスタイルシートの表示例（画像をクリックすると実際にWebブラウザで表示します）

ここでちょっと一息。CSSはどうやって作られたの？

　CSSの歴史を簡単に見ましょう。CSSはWeb関連の技術を標準化している国際団体である「W3C（ダブリュースリーシー）」のメンバーたちの手によって、1996年の12月に最初のバージョンであるCSS 1の仕様が作られました。

　そのW3Cが勧告したCSS仕様を、主要なWebブラウザベンダがサポートし広く普及していきました。

図1　W3CとWebブラウザの関係
図3　W3CとWebブラウザの関係　W3Cが標準化した技術を参考にして、各団体がWebブラウザを開発している

　CSS 1の勧告から2年もたたない1998年5月には、新しいバージョンとなるCSS 2の仕様が勧告されましたが、最近リリースされているWebブラウザはそのマイナーバージョンアップバージョンのCSS 2.1の仕様に沿って作られています。

一般的にCSS 2とは、このCSS 2.1のことをいいます（しかし、2008年9月現在でいまだ勧告には至っていないのが現状です）。

　そしてW3Cでは、次バージョンのCSSとなるCSS 3の策定作業を行っています。興味のある方はW3Cのページから未来のCSSの仕様をチェックしてみてはいかがでしょうか。

  1/3

　INDEX
いまさら聞けないCSS／スタイルシート入門（1）　
ちょっとサイトをステキにするCSSの基本
Page1
「CSS」でちょっとサイトをステキにしよう
構造（HTML）とスタイル（CSS）を分けるって？
ここでちょっと一息。CSSはどうやって作られたの？
  Page2
CSSの文法の基本を理解しよう
どの部分にスタイルを適用するか指定する「セレクタ」
  Page3
CSSの主な「プロパティ」
実際にCSSを書いてみよう
実際に手を動かしコーディングして、確認しよう

いまさら聞けないCSS／スタイルシート入門 バックナンバー 連載インデックスへ»


「デザインハック」コーナーへ


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH