CSSを使った文字修飾

みなさんこんにちは、One-Poemです。

この文書群では、「これまでFONT要素などを用いて表現してきた文字修飾は、CSSではどう書くか?」と言う方法を紹介したいと思います。もちろん、全てを包括したものではないし、CSS自体に代替手段が見あたらない場合もあります。あと、私が知らないこともおそらく多くあると思います(汗)。でも、「これからCSSを使ってみたいけど、どうすればいいのかな?」と言う方に少しでも力添えが出来れば、と思います。では、どうぞ。

スタイルシートのメリット・デメリット

わかりきっている方は読み飛ばしてください。スタイルシートのメリットは、以下に挙げられる項目だと私は思っています。

HTMLを意味づけに専念して使える(メリットか？)。
<FONT>を使うよりも、詳細な指定が出来る。
複数ファイル・複数要素の修飾を一度に変更できる。
ディスプレイを使ってブラウズしていない人(視覚障害者など)への配慮の仕組みがある(私は使ってません。ごめんなさい)。
読み手が自分のスタイルシートを用意して、独自に読みやすいスタイルを構築できる。
ソースがすっきりするので、美しい(笑)。

これに対し、デメリットは、以下のような感じです。

スタイルシートに対応していないWWWブラウザ、あるいはOFFにしている環境では、ページの修飾が貧弱になる。
スタイルシートに中途半端に対応しているWWWブラウザでは、逆にレイアウトが崩れたり、変な文字修飾になったりする。
と言うより、完全に対応しているWWWブラウザなんてないし、対応の仕方が微妙に違うので、ページ作者には負担になったりする。

デメリットが目立たないようにCSSを使ってみよう、と言うスタンスでこの文書は書いていきます。 WWWブラウザによって実装されていない機能は省いて紹介するつもりです。また、スタイルシートにはCSSの他にJSSやXSLなどありますが、紹介するのはCSSだけです。

スタイルシートの基本

正しい用語とかは適当に他のサイトを当たってください。って言うか、私が適当なので、正しく説明することが出来ません。ごめんなさい。m(__)m

HTMLファイルへの埋め込み方

外部にファイルを用意してインポートする方法と、HEAD要素に<STYLE>を書き込む方法、各要素のstyle属性を使う方法があります。外部に用意しておくと、様々なファイルから参照できるので、サイトの基本デザインを決める時に便利です。 HEAD要素に書き込む方法はそのファイルだけに指定する時に簡単な方法です。各要素のstyle属性を使う方法では、一つの要素に指定する時には最も簡単な方法です。

外部にスタイルシートファイルを用意する

HEAD要素内に、次のように書く。: <LINK rel="stylesheet" type="text/css" href="インポートしたいファイル名">

HEAD要素に<STYLE>を書き込む

HEAD要素内に、次のように書く。

<STYLE type="text/css">
<!--
適当なCSSを書きます
-->
</STYLE>

各要素のstyle属性を使う

まず、HEAD要素内でCSSを使うことを宣言しておく。: <META http-equiv="Content-Style-Type" content="text/css">
例: P要素のstyle属性を使う: <P style="適当なCSSを書きます">

CSSの文法

外部にCSSファイルを用意する場合、STYLE要素の中に書く場合、style属性の中に書く場合とも、当然ながら文法は同じです。基本は次の形です。

CSSの文法の基本: プロパティ:プロパティ値;

プロパティとプロパティ値を区切る:(コロン)と、末尾の;(セミコロン)に注意してください。セミコロンは、いくつものプロパティの組を指定するときに、それぞれを区切るために使いますが、セミコロンまでで一組、と覚えるとわかりやすいと思います。

外部ファイルに書く場合、及び、STYLE要素のなかに書く場合

書き込み方: 要素名{ プロパティ:プロパティ値;...; }...; 要素名.クラス名{ プロパティ:プロパティ値;...; }...; 要素名#ID名{ プロパティ:プロパティ値;...; }...; 要素名:疑似クラス名・疑似要素名{ プロパティ:プロパティ値;...; }...
例1. クラスセレクタへの指定: P.information { TEXT-ALIGN:center; FONT-SIZE:120%; }
例2. 複数の要素にスタイルシートを指定 (,(カンマ)で区切って指定する): P.information, H1 { TEXT-ALIGN:center; FONT-SIZE:120%; }
例3. 文脈セレクタの指定 (スペースの後に要素を続けて指定する): A EM { FONT-SIZE:200%; COLOR:red; }

このとき、上に現れている要素名を要素セレクタ、クラス名をクラスセレクタ、ID名は一意セレクタと言います。クラス、あるいはIDで指定すると、それに当てはまる要素にのみ、スタイルシートが適用されます。クラスとIDの違いは、IDはその文書のなかで一度しか現れない、と言うことです。

要素名を省略してクラス名・ID名・定義済みクラス名だけを指定することも出来ます。クラスセレクタなどだけ(その場合も、.(ピリオド)などは必要)を記述した場合は、要素に関係なく、そのクラスなどに対してスタイルシートを適用します。

疑似クラス、と言うのはCSS1ではA要素にいくつか定義されているものです。 A:link、A:active、A:visitedで、未訪のリンク、アクティブなリンク、既訪のリンクを表します。疑似要素はCSS1では二つあって、:first-letterと、:first-lineです。ある要素のなかの、一文字目、一行目を表しています。 CSS2ではA:hoverなどが追加されていますが、ここでは割愛します。

「ある要素のなかにある場合のみ、スタイルシートを適応したい」と言うときは、文脈セレクタ(または子孫セレクタ)を使います。上記の例では、A要素のなかにEM要素があった場合に、フォントの大きさがそれまでの200%で文字色が赤に指定されます。

要素のstyle属性の中に書く場合

書き込み方: <要素名 style="プロパティ:プロパティ値;...;">

コメントの書き方も知っておくと便利です。コメントの中は無視されるので、メモなどを書いておくと良いでしょう。 HTML式のは使えません。

コメントの書き方: /* コメントで～す */

その他

CSS2では、さらに複雑に要素を指定することが可能になりましたが、とりあえず、以上のことを知っておけば、大丈夫だと思います。ただ、CSS2のセレクタは非常に強力で、いろいろと面白いことも出来るので、興味のある方は調べてみてください。機能を実装しているWWWブラウザが少ないのが残念でなりません。