今回は、Ｗｅｂ制作をする際に、必ずといっていいほど使われているのが「スタイルシート」についての解説となります。
まずは、スタイルシートというものが、どういうものなのか知るところからはじめましょう。
|
スタイルシートは、ＣＳＳとも言われます。
簡単に言うと書式などの定義書というところでしょうか。
紙媒体ですと、１箇所１箇所、書体を変えるところは、指示が必要ですよね。
マーカーで一気に指定したり。
Ｗｅｂでは、スタイルシートに予め書体などの情報を入れておき、実際にページを制作する際は、そこで定義した「名前」を書き込むだけで、その書体が反映されるのです。
たとえば、このコンテンツのスタイルシートはこんな感じになっています。
ダウンロードして解凍した後、テキストファイルで見てみてください。
>>スタイルシートダウンロード
このスタイルシートでは
・ページの背景色
・ページのスクロールバーの色
・ページのベースとなる文字の色やサイズ
・リンクの色
を最初のほうで定義しています。
このあたりは、ベースとなる文字とは別の書式にしたい際の書式の定義。
いろんな定義を必要に応じてしておき、必要な箇所でその定義したものを指示するわけです。
たとえば、次の１行を「red」のスタイルに変更してみましょう。
この文字を「red」のスタイルに変更します。
はい、変わりましたね。
変えた部分のタグを見るとこんな感じになっています。
<p align="left" class="red">この文字を「red」のスタイルに変更します。</p>
「class="red"」となっているのが、スタイルの指定です。このようにして、適宜必要に応じて変更をしていくのです。
▲このページのＴＯＰへ戻る
|
スタイルシートを別ファイルにせずに都度、必要部分で書式を定義することももちろん可能です。この場合は、１つのHTMLファイルに対して、毎回定義を入れていくことになります。
が、スタイルシートを別ファイルにして使うと、非常に便利なため、制作現場では多様されます。
なぜならば、
「あ、ここの文字、この書式に変更したいな。一括で…」
と思ったら、スタイルシートの該当部分だけをいじればいいわけです。
 |
１つ１つ定義していた場合は、すべてのページを修正せねばなりませんが、すべてのページが同じスタイルシートを使うようにしていれば、修正箇所は１箇所ですむわけです。 |
|
|
スタイルシートは文字の書体を定義するだけではありません。
図の表示位置などについても定義をすることができます。
例えば、ページ左側に繰り返し表示せよ、という定義とか。
これをすると、次のような感じになります。例を作ったので、クリックして見てみてください。
>>スタイルシート活用事例
使いこなせれば、スタイルシートは相当便利な代物と思われます。
――私は…そこまで使いこなせていません……。 |
|
|
