MB-Support

パソコン初心者のサポートページ

スタイルシート CSS

 CSS : Cascading Style Sheets (カスケーディングスタイルシート)は、ホームページの装飾の部分(スタイル)に関する技術の事です。


MB-Support の「ホームページの作り方」では、管理人が何の知識も無くホームページを制作してきた過程を掲載してきました。 ホームページは、特にビルダーソフトを利用する必要もなく、Windows に付属するメモ帳があれば作成できるものだと知りましたね?

しかし、今となってはページに少しづつスタイルシートと呼ばれる技術を追記しています。 例えば、 Firefox & IE 両対応 ビジュアル オブジェクトを透明にする方法 です。

特殊な表現をする場合にスタイルシートは必須となりますが、というより、そういったニュアンスでわざと掲載してきました。 その理由は、スタイルシートの基本を掲載したページが無かったからです。 スタイルシートは特殊な表現をする時だけ利用するものではありません。 文字サイズを変更したり、背景画像や背景色を指定したりと、読んで字のごとくスタイルに関する技術です。

今までも背景画像を指定したり、フォントサイズを指定する方法を掲載してきました。あれは間違いなのか? というと、そうでもありません。技術の違いです。

今まで掲載してきたホームページの制作方法は、HTMLと呼ばれるもので、もともとは文章を書くためのものです。 そこへ、文字サイズや背景画像のアドレスを組み合わせるやり方をしていました。 一方、これから掲載するスタイルシートとは、文章を入力する事はしません。 CSS : Cascading Style Sheets (カスケーディングスタイルシート)とは、ホームページの装飾の部分(スタイル)に関する技術の事です。



スタイルシートを利用するために

スタイルシートを記述するには、<head> 〜 </head> の間に以下の <mata>タグを記述します。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html;
 charset=shift_jis" x-undefined>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
</head>
<body>

</body>
</html>


要素(element)に挿入する方法

例えば以下のソースがあったとします。

HTMLソース(メモ帳)

<p>私はホームズだ</p>

ブラウザ

この要素に書かれた文章のフォントサイズを変更する場合、今までは以下の様に記述しました。

<p><font size="5">私はホームズだ</font></p>

ブラウザ

これをスタイルシートに置き換えると、次の様になります。

<p style="font-size:18pt;">私はホームズだ</p>

ブラウザ

なんて事はありませんね。開始タグの <p> に style="プロパティ:値;" を指定する方法です。 先の例では、開始タグ <font> を挿入したので、終了タグ </font> が必須ですが、後の例では 開始タグ <p> の中にスタイルを組み込んだので、終了タグも </p> だけとなります。

3つあるスタイルシートの記述方法の1つ目で説明するのもなんですが、要素に直接記述するこの方法は、3つの記述方法の内、最も優先順位が高くなります。 これはソースは上から下へと読み込まれるため、次の二つの記述方法よりも描画寸前に読み込まれるこのスタイルの優先順位が高くなると解釈できます。 とりあえず、残り2つの方法を以下に掲載します。



<head> 〜 </head> 内に記述する方法

スタイルに関する記述を、ブラウザに表示されない <Body> より上の <head> 〜 </head> 内にまとめて記述する方法です。 例えば、上の例と同じ事をヘッダーに記述する場合は以下の様になります。

<style type="text/css">
<!--
p	{
	font-size : 18pt;
}
-->
</style>

まず、<head> 〜 </head> 内に、スタイルシートの開始タグ <style type="text/css"> と、終了タグ </style> を記述します。次に、コメント(ブラウザで非表示にする) <!-- と --> を記述します。

<!-- と --> の間に、宣言を記述します。宣言に関しては後で説明しますが、記述方法は一列でも構いません。例えば以下。

<style type="text/css">
<!--
p { font-size : 18pt; }
-->
</style>

セレクタ P に関するスタイルは { 〜 } の間に記述します。上の例ではプロパティ font-size 値 18pt です。 これで、<body> 〜 </body> に記述された <p> 〜 </p> に書かれた文章は、フォントサイズ 18 pt で表示されます。

もし、フォントサイズ以外にボールド(太字)にしたければ、以下の様に記述します。

<style type="text/css">
<!--
p { font-size : 18pt; font-weight:bold; }
-->
</style>

さらに文章の色や、縦幅をそろえたい場合は続けて記述しますが、その場合一列だと閲覧しずらくなりますね。 そこで、宣言ごとに改行して見やすくしています。


<style type="text/css">
<!--
p    {
      font-size : 18pt;
      font-weight:bold;
      color:#000000;
      line-height:120%;
}
-->
</style>

一般的には、セレクタの後に「Tab」キーを押して空白を入れます。 その方は、宣言を記述する時にラインが揃うからです。 上の例ではプロパティ(例えば font-size)と : と 値(例えば 18pt)の間に半角スペースを挿入していますが、これは無くても構いません。 宣言を終了するには「;(セミコロン)」を挿入します。これにより、一行目の「font-size:18pt」と二行目の「font-weighe:bold」が異なる宣言だと認識します。 プロパティと値の間に必須となる「:(コロン)」と間違わないで下さい。

また宣言は複数記述できます。

<style type="text/css">
<!--
body    {
            font-family: Meiryo;
            line-height:120%;
}
p         {
           font-size : 18pt;
           font-weight:bold;
           color:#000000;
}
-->
</style>

上の例では、まずセレクタ Body で、<body> 〜 </body> 内に書かれた文章に、メイリオフォントと行の高さ120%が適用されます。 さらにセレクタ p で、<p> 〜 </p> 内に書かれた文章に、文字サイズ、太字、文字色:黒が適用されます。

先に書いたエレメントに直接記述した場合の優先順位を説明すると以下の様になります。

HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="jp">
<head>
<meta http-equiv="Content-Type" content="text/html;
 charset=shift_jis" x-undefined>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>題名</title>
<style type="text/css">
<!--
body    {
            font-family: Meiryo;
            line-height:120%;
}
p         {
           font-size : 18pt;
           font-weight:bold;
           color:#000000;
}
-->
</style>
</head>
<body>
<p>私はホームズだ</p>
<p style="font-size:12pt;font-weight:normal;">私はワトソンだ</p>
</body>
</html>

ブラウザ


上の例では、<p> 〜 </p>で囲まれた文章が二つあります。<head> 〜 </head> で指定したスタイルが適用されたのは、最初の「私はホームズだ」だけです。本来ならば「私はワトソンだ」も同じスタイルになりますが、エレメント p にスタイルが直接入力されているため、そのスタイルが優先されているのが分かりますね。

この様に、<head> 〜 </head> にスタイルを記述する事で、スタイルに関する情報をまとめる事が可能になります。エレメントに直接記述するのも気軽ではありますが、何度も繰り返し同じ情報を記述する必要があります。 どちらかと言えば、優先順位を考えて入力すると考えた方が良いでしょう。



外部スタイルシートを利用する方法

上の二つの方法は、どちらもページ内にスタイルを記述する方法です。 しかし、背景画像やフォントファミリなど、ページと言うよりもサイト全体で共通するスタイルが多くありますね。 そんな時はスタイルを外部に作成して全てのページに読み込ます方法を使います。 そうする事で、複数のページの背景画像や、フォントファミリを1つのファイルを変更する事で適用できる様になります。

以下の例では、背景画像を外部スタイルシートで指定して、それをページで読み込む方法を説明します。 もちろん、背景画像の他にも上の <head> 〜 </head> で指定した方法と同じく、複数の宣言を記述する事ができます。



まずは、新規にテキストを作成します。



例えば全てのページの背景色を黒 ( カラーコード #000000 ) に統一したい場合は、以下の記述をしてテキストファイルを保存します。


body {
background-color:#000000;
}

テキストファイルの名前を変更します。名前は自由に決めて構いませんが、分かりやすいものが良いでしょう。 拡張子は「.css」にします。右の例では「新規テキストドキュメント.txt」から「myhomepage.css」に変更してみました。



背景色 [ #000000 ] を指定したいページ全ての <head> と </head> の間に、上で作成したスタイルシートを読み込ますソースを挿入します。 ソースの基本は以下。

<link rel="stylesheet" type="text/css" href="パス" />

ここからは、背景色 [ #000000 ] の指定があるCSSファイルと、それを適用するページとの位置が重要になります。 パスの部分には、絶対パスか相対パスを記入します。 例えば、適用したいページファイルが、CSSと同じフォルダに存在するならば、ソースは以下の様になります。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
<link rel="stylesheet" type="text/css" href="myhomepage.css" />
</head>
<body>
 <p>
 <font color="#ffffff">
 シャーロック・ホームズ
 </font>
 </p>
</body>
</html>

ブラウザ



ディレクトリ

もし、myhomepage.css が css フォルダ内にあり、適用したいページが sample フォルダ内の存在する場合のソースは以下になります。


<link rel="stylesheet" type="text/css" href="../css/myhomepage.css" />

1つ上の階層を参照するには、「../」を記入します。つまり、sample フォルダ内のHTMLページから見れば、css フォルダ内 の myhomepage.css にアクセスするためには、1つ上の階層に上がる必要があります。 パスの最初に「../」を入力する事で、「HOME PAGE」の階層まで上がった事になります。次に css フォルダを参照します。 つまりパスは「../css/」となります。そして、 css フォルダの myhomepage.css が目当てなので、「../css/myhomepage.css」となります。

さらに階層が深い場所にあるページに適用するには、「../」を階層の数だけ入力します。 例えば、smaple フォルダ内の mypage フォルダ内にあるHTMLファイルでは、「../../css/myhomepage.css」となります。

以上で、このスタイルシートへのリンクが貼られたページは、スタイルシートで指定した背景色が適用されます。 複数のページを作成するうちに、背景色をデフォルトの白に変更したくなった場合は、myhomepage.css の #000000 を #ffffff に変更すれば、全てのページに適用されます。 これは、ページ数が多ければ多いほど楽です。100ページの Body タグを変更するより、myhomepage.css の一か所を変更するだけで、100ページ全てに変更が適用されます。



どうやってスタイルシートを導入するべきか

エレメントに直接記述した方が自由に設定できますが、重複する記述を多くする可能性が高くなり、サイトのスタイルを管理する意味では難しいかも知れません。 ホームページを1ページと考えるのを辞め、サイトとして考えた場合、管理する方法を模索する事になります。 管理する意味では、外部スタイルシートを利用した方が便利と言えるでしょう。

一番利用しないのは、<head> 〜 <head> に記述する方法でしょうか? 単発のページであれば、エレメントごとに記述しても問題ありませんが、記述する内容が重複するのが嫌な場合に利用します。 しかし、サイトの管理として理想的ではありません。なぜならば、そのページだけしか適用でいないからです。

今の段階では、実際の宣言方法を掲載していません。これは後々掲載する事にします。 その前の段階で決めるべき事が、スタイルシートの記述方法の3つなのですが、初めて導入する場合は意味が分からないのも事実です。 その場合、まずはエレメントや <head> 〜 <head> に記述して制作してみます。 5 〜 6 ページ制作したあたりで、重複するスタイルが多く見つかるはずです。その段階で外部スタイルシートへと移行すれば、理解しやすいと思います。 数十ページを超えたあたりで外部スタイルシートに変更するとなると、それはそれで面倒でもあります。

しかし、サイトを管理する意識を高めるなら、外部スタイルシートに移行する事をおすすめします。 そして、上の3つの方法で、 <head> 〜 <head> に記述する方法と、外部スタイルシートで記述する方法で共通して利用できる、クラスとIDの説明をしていません。 次は、この二つの利用方法を掲載します。それを読んでから考えても良いでしょう。




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項