現在のページ：ホーム > おすすめ情報・知識 > Webページ作成初心者の間 > スタイルシートの有効な使い方

『スタイルシートの有効な使い方』

スタイルシートの登場により、HTMLを記述する際にはこれまで以上に物理的な表現を使わず、徹底して論理的な文書の記述が求められるようになった、と前回お話しました。

例えば語句を強調するために「色を変える」ことは多いと思います。その際よく用いられるマークアップの方法が以下のようなものです。

ここは強調

blueすなわち青色で表現してみたわけです。ところが後から「強調する語句を赤色に変えたい」と思い直したとき、このマークアップの方法ではいくつもある強調部分をすべて次のように書き換える必要がでてくるはずです。

ここは強調

一方、強調の意味をもつSTRONGでマークアップしていた場合、色の変更は簡単に出来ます。

<STORNG>ここは強調</STORNG>

スタイルシートでSTRONGに対する色の指定を青色から赤色に変更するだけで、、を用いた強調部分がすべて即座に変更できるわけです。

具体的には「STRONG { color: blue; }」という記述を「STRONG { color: red; }」と変更するだけです。通常は一行だけの修正で済みます。STRONGでマークアップしている部分をいちいち書き換える必要はありません。

「重要語句」と「重要文章」を区別したい場合にも非常に有効です。例えば

重要語句

重要文章

と指定し、後からスタイルシートで表現方法を設定します。

STRONG.keyword { color: blue; }

STRONG.important { color: red; }

「.keyword」「.important」のように付け加える方法を「クラス指定」といいます。クラス指定することで、基本的には同じ意味の部分をさらに区別することが可能です。

スタイルシートを有効に利用するコツは、ご覧の通り、あらかじめ論理的な意味を基準に各語句・文章をしっかりマークアップしておき、後から表現を指定していくという方法です。

スタイルシートの考え方は、理論的にはとても良いものです。しかし現実問題として現在Web作成にあたって、フルに活用するにはいろいろと問題もあります。

次回はスタイルシートに関する現実問題について述べることにします。

●スタイルシートの具体的な記述方法については別の機会に（＾＾；）

このページのご意見・ご感想は？
1.とっても良かった！ 2.部分的に良かった 3.まぁまぁかな 4.説明が足りないぞ！ 5.期待はずれ～ 6.その他
※具体的なご意見ご感想などがあれば、下のメッセージ欄へご記入どうぞ！（未記入でも送信可）

＃上記送信フォームほか、掲示板やチャットでもご意見ご感想お待ちしております。なおいただいた内容は（もちろんプライバシーに配慮したカタチで）日記の話題に取りあげることがあります。あらかじめご了承ください。

サイト目次

[ ↑このページの先頭へ移動する｜このコーナーの目次を表示する ]
注）このページ自体が目次ページという場合があります。