CSS基礎編.html

Webページの管理・更新が容易になる

　自分で定義したスタイル、また再定義した規定のタグを繰り返し使うことで、スタイルシートの定義の部分だけを変えるだけで、そのHTMLファイルのすべての指定区分を変更することができ、たとえばページの全体色を変えるといった作業が、 CSSを使用しないページとは比べものにならないくらい合理的にこなすことができます。

ページサイズの削減

　複数のHTMLファイルから外部のCSSファイルにリンクすることで個々のHTMLファイルごとにスタイルを定義する必要がなく、結果的に全体のファイルサイズを削減することができます。

1ピクセル単位のデザインが可能に

　HTMLタグだけでは不可能だった、文字やレイヤーの様々なポジショニングが可能となります。

ブラウザの非互換性の撤廃

　HTMLタグというものも結局はCSSで定義されているものです。しかし、どうしてユーザーがCSSを定義しなくてもページがきちんと表示されるのかというと、それぞれのブラウザにははじめから一つひとつのHTMLタグに「初期値」が入れてあるからです。
　しかし、この「初期値」に関しては厳密な規定が無く、ブラウザ・メーカーがそれぞれに自分の考える最適な値を入れているものですから、そこから「ブラウザの非互換性」が生まれてきてしまいます。あっちの会社のブラウザとこっちの会社のブラウザとでは同じページでも全然違う表示になってしまう、というのはあまりに有名な話でしょう。
　ですからこのCSSでHTMLタグを再び定義しなおして、ページ作成者が考える最適な値を各ブラウザの初期値に上書きしてやれば「ブラウザの非互換性」は撤廃されるのです。

簡易的なインタラクティブ性の付与

　<A>タグ、つまりリンクに限ってCSSの記述のみで、リンクの上へマウスのポインタが重なったらリンクの文字の色を変えるなどといった、通常ならJavaScriptなどを使用しなければできないインタラクティブ性を付与することができます。

↑ Back to Top

　CSSを使ってみる

　それでは、CSSを使ってみることにしましょう。
　下のフォームには"font-size:20pt"と入力されているはずです。
　[適用]ボタンをクリックしてみてください。すると上のサンプルのフォントサイズが変化します。

てすと

↑ Back to Top

　HTMLソース

　HTMLソースとしては以下の四通りの書き方があります。

一つのタグへの直接的定義

全てのIDへの定義

...
<HEAD>
<STYLE>
#test { font-size: 20pt; }
</STYLE>
</HEAD>
...
<DIV id="test">てすと</DIV>

全てのCLASSへの定義

...
<HEAD>
<STYLE>
.test { font-size: 20pt; }
</STYLE>
</HEAD>
...
<DIV class="test">てすと</DIV>

全てのタグへの定義（再定義）

...
<HEAD>
<STYLE>
DIV { font-size: 20pt; }
</STYLE>
</HEAD>
...
<DIV>てすと</DIV>

　優先順的には[直接]→[ID]→[クラス]→[タグ]となるようです。しかし、[タグ]→[クラス]→[ID]→[直接]と設定が"上書き"されていくため、[タグ]でフォントサイズが設定されていて[直接]では定義されていないタグの場合、フォントサイズは [タグ]の設定が反映されるため、きちんと設定されているスタイルを認識してないと多少混乱します。
　しかし、逆にいってみれば一つのタグに四段階スタイルを上書きできるということで、四つをうまく使い分ければさらに効率的なサイト作成ができるでしょう。（更にいえば外部ファイルなどを用いれば段階は無限ですね）

↑ Back to Top

　次は「実践編」で

　とりあえず、CSS「基礎編」.htmlはここまでとします。
　次は「実践編」を予定しておりますが、そちらではもチッとは実用的な技法を扱っていこうと思っています。

　しかし、CSSを多用していくようになりますとclassの名前付けに結構悩むことが多くなったりします。これは（当たり前ですが）classはアルファベットの名前を付けるため、結構ぴったりくる英単語が（頭の悪い私には）なかなか思い浮かばないからです。別に日本語をそのままローマ字として付ければいいことなのかもしれませんが、これだと同音でも何通りかの書き方が存在しているため結構混乱することも。
　解決策は、きちんとしたポリシーを持つ事や使い慣れるしかないと思いますが、海外サイトで適当な英語が簡潔に書かれているのをみると小憎たらしい感情を覚えるのは私だけでしょうか。

　それでは、また「実践編」にて会いましょう。

↑ Back to Top