ホームページビルダー作成報告/スタイルシート(CSS)を記述する場所

ホームページビルダー/スタイルシート編

Top > スタイルシート編トップ > スタイルシートとは

スタイルシート/基本編

【場所を決めよう!!】ビルダーでスタイルシートを設定するための基礎知識(1)

スタイルシートを利用せずに文字に色をつける場合、色を付けたい文字を選択して[文字色の変更]などで色をつけていたと思います。

しかし、ビルダーを使ってスタイルシートを設定する場合は、まず「色を付ける」という命令をどこに記述するのかを決める必要があります。記述する場所を決めてから具体的に色を付ける設定をしていきます。

スタイルシートを記述する場所は大きく3つに分かれます。

サイト全体に適用させるための場所
ページ毎に適用させるための場所
ページ内の限られた個所のみに適用させる場所

どの場所を選べばいいのか迷ったら・・・

スタイルシートのメリットとして「共通のスタイルシートを使って、複数の HTML ファイルに統一したデザインを適用することができます。」というのがあります。このメリットを十分に発揮できるのは「サイト全体に適用させることができる場所」です。ビルダーでは「外部スタイルシート」がこれに当たります。

この3つの内、どれを使えばいいかと迷った時は「サイト全体に適用させることができる場所」(外部スタイルシート)をお勧めします。

「ページに適用させる場所」は、HTMLソースの<head>内にスタイルを記述します。
そのため、1ページ毎にスタイルを設定する必要があり、サイト管理の効率が悪くなります。また、ビルダー10からxhtmlでのページ作成も可能となりましたが、xhtmlでページを作成し、「ページに適用させるスタイルシート」で設定した場合上手く表示できないブラウザもあります。

「ページ内の限られた個所のみに適用させる場所」は、要素に直接スタイルを記述します。
その時、その部分だけしか使わないスタイルであれば、利用する価値がありますが、ページ全体をこの場所でスタイル設定しても、スタイルシートの良さがあまり感じられません。

【目印を探せ!!】ビルダーでスタイルシートを設定するための基礎知識(2)

「ページ内の限られた個所のみに適用させる場所」にスタイルを設定する場合は特に意識はしなくていいのですが、「ページに適用させる場所」「サイト全体に適用させるための場所」にスタイルシートを記述する場合は、ページ内容とスタイルの設定が離れた場所にあるため、どこにどのスタイルを反映させるかという目印となるものが必要です。

目印の種類

HTMLタグを目印にする
独自に目印の名前を付ける

目印として利用できるものは大きく分けて二通りあります。
「HTMLタグを目印にする」ものと「独自に名前を付けて目印」とするものです。

HTMLタグを目印にする

HTMLタグを目印にする場合は、サイト全体に共通したスタイルを設定する場合に便利です。例えば、サイト全体の背景色や文字のサイズを小さくしたい等という場合は、「body」に対してスタイル設定を行います。

私自身がよく設定するスタイルとしては次のような場合があります

「body」に対して背景色・文字色・文字サイズのスタイルを設定
「h1,h2,h3」などの見出しに対して、文字サイズや背景色、余白を設定する
「link」に対して文字色の設定をする

独自に目印の名前を付ける

独自に目印の名前を付ける場合は、目印となる名前にスタイルを設定して、内容ページの特定の場所にその目印とした名前を付け加えることでスタイルを適用させます。

文章での説明が上手くありませんが・・・例えば、「point」という名前の目印を作成しました。「point」のスタイルは「背景が赤・文字色が白」と設定しました。しかしスタイルを設定しただけでは内容ページに何のデザインも適用されません。「point」のスタイルを適用させるには、内容ページに「point」という目印を置きます。そうすると目印を置いたところに「背景が赤・文字色が白」というスタイルが適用されます。