新刊ピックアップ

スタイルシート超入門

2013年3月4日

スタイルシート, CSS3, HTML

この記事を読むのに必要な時間：およそ 1 分

スタイルシートは，HTML文書のデザインを記述する際に使用されます。スタイルシートとはどういうものかを簡単に振り返りつつ，実際に最新のCSS3を使ったデザインを試してみましょう。

スタイルシートとは

Webページの表示内容は，HTML言語で記述されますが，HTML文書には構造と書式（デザイン）に関する記述が混在していました。そのため，HTML文書の見通しが悪くなる，同じ書式を別の箇所に適用するときに効率が悪い，などのデメリットがありました。書式に関する記述を分離するという考えから，「⁠スタイルシート」が誕生しました。

スタイルシートには「CSS」という規格があり，W3Cという標準化団体が策定しています。また，CSSには3つのレベルがあり，レベル1とレベル2（および改訂版の2.1）の規格が勧告されています。

CSSレベル3も現在策定が進められており，CSSレベル2よりも，さらに細かく書式設定を行うことができるようになっています。CSS3では，機能ごとにモジュール化され，一部のモジュールは勧告されています。

CSS3を試してみる

実際にCSS3を使ってみましょう。今回，文字に影をつけるtext-shadowプロパティを紹介します。text-shadowプロパティは，多くのWebブラウザに実装されていますが，Internet Explorerは，9以前では対応していない点にご注意ください。

text-shadowプロパティは，文字の影を，2つまたは3つの数値と，色を表す値の組み合わせで指定します。最初の2つの数値で，文字と影の離れ具合を表します。また，3つ目の数値で，影をぼかす際の幅を指定します。影を表す文字列をコンマで区切って，複数の影をつけることもできます。

まず，次のようなHTMLを書いておきましょう。

shadow.html

1.	<!DOCTYPE html>
2.	<html lang="ja">
3.	  <head>
4.	    <meta charset="utf-8">
5.	    <link rel="stylesheet" type="text/css" href="style.css">
6.	    <title>CSS3のテスト</title>
7.	  </head>
8.	  <body>
9.	    <p class="shadow">影付きの文字</p>
10.	  </body>
11.	</html>

5行目に，「⁠style.css」というCSSを外部ファイルとして読み込む指定を記述しています。

まだCSSを記述していない段階で，Webブラウザに表示してみると，次のようになります。

次に，CSSを記述します。

class属性が「shadow」に指定された要素に対して，書式設定を行うように記述します。設定内容ですが，まずフォントの色を#ff0000，サイズを48pxにします。その上で，text-shadowにより，横に5px，縦に2px離れた影をつけます。影のぼかし幅は2px，色は#ff9999です。

style.css

1.	.shadow { color : #ff0000; font-size: 48px; text-shadow: 5px 2px 2px #ff9999; }

それでは，作成したCSSファイルを同じディレクトリに保存して，Webブラウザに表示してみましょう。

CSS3をもっと活用しよう

最近のWebブラウザでは，CSS3の実装が進みつつあります。ターゲットブラウザが限定されるケースなどから，活用事例が増えていくでしょう。今後のために，積極的に使っていきましょう

スタイルシート, CSS3, HTML