コラム【WEB編】

ＣＳＳとは？

ＣＳＳ３のご説明の前に、まずＣＳＳとは何かをご説明します。

ＣＳＳとはホームページの文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語です。

読み方は「シーエスエス」です。

一般的にＷｅｂサイトはＨＴＭＬ（エイチティーエムエル）という言語で書かれており、これにスタイルシートを記述する言語であるＣＳＳを適用することで、普段見ているホームページが構成されています。

ＨＴＭＬファイルにスタイル（ＣＳＳの記述）を含めることも可能ですが、そうしないのはホームページの文字や背景などを、ページ内で統一するためです。

例えば、あるホームページにトップページとお問い合わせページがあったとします。

このとき、それぞれのページでＨＴＭＬを記述しますが、同じような見た目にしたい場合、２つのＨＴＭＬファイルに、デザインに関する同様の記述をする必要があり、余分な手間がかかります。

そこで見た目に関する共通の記述をＣＳＳファイルとして記述し、それをＨＴＭＬに適用することで、複数のＨＴＭＬファイルに一貫したデザインを適用できます。

こうすることで、記述したソースコードが読みやすくなりますし、デザインを修正・変更したくなったときに、一括でメンテナンスができるようになります。

ＣＳＳのタグとは？

ＨＴＭＬは「＜　＞」で囲まれた、「タグ」と呼ばれる部品が集まって構成されています。　タグは「／」を入れたタグとペアとなっており、それぞれ「開始タグ」「終了タグ」といいます。

タグで挟まれた部分を「要素」といい、要素をタグで挟みます。

下記に一般的によく使うタグの一部を紹介いたします。

ｈ１～ｈ５タグ（見出しタグ）

ｈ〇というのは見出しタグとして使われます。

よく使うのはｈ１からｈ４くらいまでを使う事が多いかと思います。

使い方はいずれも同じですので、難しいことはありません。ただどこで使うかという要所をおさえることは大切となります。

ｄｉｖダグ（ブロックで扱うためのタグ）

ｄｉｖも頻出のタグです。

ｄｉｖ自体が非常に重要な意味を持ち、ｄｉｖを設定したからと言って、大きくどうなるというものではありません。

ｄｉｖはブロックのような意味合いがあり「ここからここまでに対して・・・」という形で使います。

全体を一気に作成するのではなく、ブロックごとやっていけばいいと思えると少しＷＥＢページ作成が楽になると思います。

ＷＥＢページを閲覧している時も、どこからどこのブロックになっているんだろう？と調べてみるのも良いと思います。

ｐタグ（段落として使うタグ）

このｐタグも頻出です。

これは段落を扱うタグとして使います。

この記事の文章も基本はｐタグで書かれています。

普通に文章打ちたいなと考えたらｐタグを使うというイメージでよいでしょう。

ｓｐａｎタグ（段落の一部の書式を変えるタグ）

こちらもｐタグ同様文章を打ちたいなと考えた際使うタグです。しかし、ちょっと違うのは、ｐタグは設定すると段落になり２行になります。

ｐタグは段落として扱われるので、改行されてしまいます。

しかし、ｓｐａｎタグを使うと、２行にはなりません。

ｓｐａｎタグは単体で使うことも当然ありますが、ｐタグの中にｓｐａｎを入れて文字の一部の書式を変えるというときによく使います。

ｓｐａｎ自体が書式を持っているわけではありませんので、上記のように赤くしたり太くしたりという書式をつけるのは、ＣＳＳでの設定となります。

ｉｍｇタグ（画像を表示させるタグ）

画像を表示させるときに使うのがｉｍｇタグです。

特段難しいことはありませんが、参照先の設定をしっかりやらないと、画像が表示されなくなります。

プログラミング学習を始めた間もないころは、結構このミスが発生すると思います。

画像がうまく表示できないときには２つを考えましょう。

１つは参照先の指示の出し方が間違っていないか。

もう一つは画像のファイル名が間違っていないか。

基本はこの２点で解決することが多いです。

ａタグ（リンクタグ）

自分のページから外部のページへリンクさせたり、自分の他のページにリンクさせたりする際に使うのがａタグです。

ａタグは「○○をクリックしたらリンク先に飛ぶ」となるので、「○○」にあたる文字や画像を囲ってあげる形で利用します。

ＣＳＳ３とは？

ＣＳＳ３は上記でご説明したスタイルシートの新しい規格（バージョン）のことを指します。

Ｗ３Ｃが仕様書を公開していて、１９９４年に創設されたＷ３Ｃが、ＣＳＳの仕様書（ＴＲ）を公開しています。

このＷ３Ｃが草案から技術をテストしているということです。

そして、全てのテストが終了して国際的に信頼性が高いと認められた技術文書が完成した時に勧告という形で「このＣＳＳ３は完成しました」と発表します。

ＣＳＳ３は３番目のスタイルシートとして、他にも下記のものがあります。

・ＣＳＳ１：１９９６年１２月に勧告
・ＣＳＳ２：１９９８年５月に勧告
・ＣＳＳ２．１：ＣＳＳ２の改訂版。２０１１年６月に勧告

ここまで説明してきたことをひっくり返すことになりますが、正確には「ＣＳＳ３」という規格は存在しません。

ＣＳＳは「ｌｅｖｅｌ」という段階を持っており、ＣＳＳ１なら「Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ，　ｌｅｖｅｌ　１」。

ＣＳＳ２なら「Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ，　ｌｅｖｅｌ　２」という総称があります。

上の例で理解頂けるとおり、ＣＳＳ３は「Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ，　ｌｅｖｅｌ　３」というのが正式な名前となります。

同じようにｌｅｖｅｌという記載をされているＣＳＳですが、ＣＳＳ３は前のｌｅｖｅｌとは１点だけ違う部分があります。

ＣＳＳ３から機能（モジュール）単位でテストされるようになった点です。

ＣＳＳ３は新しい機能の追加・改良を小さな部位に分けて実装しています。

そのため、モジュールによって勧告されていたり、まだ勧告には至っていなかったり……草案段階というものもあったりとバラつきが見られます。

ＣＳＳ３の特徴と従来との違い

ＣＳＳ３では要素を立体的に浮き上がる様に見せたり、要素の位置を自由自在に指定したり、時間軸を利用することにより動きをつけたりといった様にＣＳＳ１やＣＳＳ２に比べより自由度が高まりました。

また、元々存在するＣＳＳとＣＳＳ３の違いは、前のｌｅｖｅｌ（レベル）には存在しない新たな仕様が加えられているところです。

今まで使い勝手が悪かったところが便利に使えるようになっています。

特徴としては、ＣＳＳ３ソースはＣＳＳ１やＣＳＳ２などのソースと基本的なところに違いはなく、下位互換性（前バージョンとの互換性）があります。

そのため、前規格の記述方法でもそのまま使うことができます。

既存ソースにそのままＣＳＳ３ソースを使用可能なので、全部を書き換える必要がないのは非常に強いメリットといえます。

また、ＣＳＳ３はＨＴＭＬ５のみで使うわけではないことを理解しておきましょう。

セットにされることが多い両者ですが、ＣＳＳ３はＨＴＭＬ５以外のｗｅｂページ（ＸＴＭＬ１．０やＨＴＭＬ４．０１など）もデザインすることが可能です。

ＣＳＳ３で使える機能

ＣＳＳ３で使える機能（プロパティ）の中でも特に注目したい機能をご紹介します。

linear gradients

線形にグラデーションさせる機能です。複数の色を指定することができます。

radial gradients

円形にグラデーションさせる機能です。複数の色を指定することができます。

animation

要素の色相・彩度、明度や透明度を操作する機能です。

opacity

要素の透明度を操作する機能です。完全に透明・不透明にしたり、好みの透明度を指定できます。

Multi-column

マルチカラムレイアウトが可能です。文章の段組を作れます。段数と段幅を指定することができます。

border-radius（角丸）

角を丸くできる機能。ボックス要素に角丸を付加できます。4つの角を全て丸くするだけでなく、指定箇所のみ角を丸くすることも可能です。

text shadow

テキスト（文章）に陰影をつけることができます。水平・垂直（x,y）方向の距離、ぼかしの半径や影の色などの指定も可能。

text stroke

文字の輪郭線について指定できる機能です。

selection color

ユーザーが選択したテキストの背景・文字の色を指定することができます。

word wrap

単語の途中で改行するかを指定できます。

この指定がない場合、文字列が長すぎるとボックスから文字がはみ出して表示されてしまいます。

「word wrap」を使用することで、はみ出すことなく文字を表示することが可能です。

ブラウザの対応状況

まだ全てのブラザに完全に対応している訳ではないので、プロパティによっては、独自のプロパティを用意する必要がある場合があります。

現在の対応しているブラウザ
・Ｉｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ　９／１０／１１
・Ｆｉｒｅｆｏｘ　２９
・Ｇｏｏｇｌｅ　Ｃｈｒｏｍｅ　３４
・Ｓａｆａｒｉ　５
・Ｏｐｅｒａ　１２

となります。

まとめ

ＣＳＳとはホームページの文字の色や大きさ、背景、配置といったスタイル（見た目）を設定する言語で、ＣＳＳ３とは新しい規格（バージョン）のことを指します。

ＣＳＳ３には、まだまだ便利な使い方が出来ますので、興味のある方は是非調べてみてください！