「ホームページ作成の部屋」メニュー 「技巧編」メニュー


　2．スタイルシートを使う
　スタイルシートを使うことによって，HTMLだけでは実現できないページを作ることができるようになります。ここではそのうちのいくつかを紹介します。

フォントサイズとカラーの指定
　HTML で表現できる最小の文字と最大の文字を次に示します。

これが最小で　これが最大です。

　ところがスタイルシートを使うことによって


巨大橙文字


という大きな文字を表示させることができます（もっと大きな文字でも ok です）。
　この文字を表示させたタグを次に示します。

<center style="font-size:100; color:#ff9900">巨大橙文字</center>

　ここで使用したスタイルシートについて，簡単に説明します。
(1) スタイルシートを適用するときのフォーマットは，

<タグの要素名 style="属性名:属性の値;属性名:属性の値;…">

とします。
●" " は ' ' でもかまいません。
●複数の属性を指定するときは ; で区切ります。
●属性名と値の間は = ではなくて : です。
●値を " " などで囲ってはいけません。

(2) 巨大橙文字の例では，<center> というタグに，スタイルシートを使って font-size という属性と，color という属性を与えました。
(3) 　サイズを指定した数値 100 は 100 ピクセルを表しています。ピクセルという単位を使うときは 100px とするのが一般的ですが，デフォルトがピクセルですので付けなくてもかまいません。

　単位としては，mm， cm， pt， px， % などが使えます。pt はポイントです。

バックグラウンドカラーの指定
　テキストにバックグラウンドカラーを付けた例を示します。

緑地に白文字

緑地に白文字

　この例を表示させるのに使用したタグは，

<center style="background:#00cc33; color:#ffffff; font-size:150%">緑地に白文字</center>
と，
<center>
<font style="background:#00cc33; color:#ffffff; font-size:150%">緑地に白文字</font>
</center>

です。
　上側の例は <center> というタグに，スタイルシートを使って，バックグラウンドカラーを設定しています。このときは行全体にバックグラウンドカラーが表示されます。
　下側の例は <font> というタグにバックグラウンドカラーを設定しています。このときはテキストのある部分だけにバックグラウンドカラーが表示されます。
　font-size:150% についてですが，フォントサイズが 150% というのは，標準サイズに対しての割合です。

改行幅の指定
　スタイルシートを用いることによって，改行幅を指定することができます。
　次の例を見てください。左側はあなたが今使用しているブラウザの標準改行幅で表示したもの，右側は標準改行幅の 150% で表示したものです。

　多くの Webページを見ていて気になることがある。改行幅が狭いために文字がぎゅうぎゅうと押し込まれているのだ。一般の書物では改行幅が文字の高さの 150 〜 200% ほどになっているのに対して…
　多くの Webページを見ていて気になることがある。改行幅が狭いために文字がぎゅうぎゅうと押し込まれているのだ。一般の書物では改行幅が文字の高さの 150 〜 200% ほどになっているのに対して…

　この例を見ても分かりますが，改行幅を広めにすると非常に読みやすくなります。
　右側の文書を表示したときの中心的なタグは

<td style="line-height:150%">

です。すなわち <td> タグに対してスタイルシートを使用しています。改行幅の単位としても，mm， cm， pt， px， % などが使えます。

スタイルシートの設定方法 2
　これまではインライン方式で，登場するタグごとにスタイルシートを設定していましたが，HTML ページの最初で一括して設定することもできますので，その方法を簡単に説明します。まずは次のソースを見てください。

<html>
<head>
  <title>スタイルシートの設定 2</title>

  <style type="text/css">
  <!--
   body   {background:#ffffcc; line-height:130%}
   p      {color:#009900; line-height:180%}
   p.leaf {background:url(ichijiku-ss.jpg)}
   p.red  {background:#ccffff; color:red}
  -->
  </style>

</head>


　ヘッダ （<head> と </head> に囲まれた間） において，<style type="text/css"> と </style> の間で，指定したタグに対してスタイルシートを適用して属性を与えます。スタイルを設定する記述が <!-- と --> によってコメントアウトされていますが，これはスタイルシートに対応していないブラウザでスタイルシートの記述が表示されてしまわないためです。
　ここでは body タグ と P タグに対して，スタイルを設定します。さらに p タグに対しては leaf と red というクラス指定を行ったタグも設定しています。設定のフォーマットは，

タグの要素名 {属性名:属性の値;属性名:属性の値;…}
または，
タグの要素名.クラス名 {属性名:属性の値;属性名:属性の値;…}

とします。個々の設定を見ますと，
(1) body {background:#ffffcc; line-height:130%}
body タグに対して，バックグラウンドカラーとして淡い黄色を，改行幅として 130% を設定します。スタイルシートを設定した body タグは，通常の body タグと同じようにして使います。
(2) p {color:#009900; line-height:180%}
p タグに対して，テキストの色を深緑色に，改行幅を 180% に設定します。スタイルシートを設定した p タグは，通常の p タグと同じようにして使います。
(3) p.leaf {background:url(ichijiku-ss.jpg)}
クラスを指定することによって，タグに別の属性を追加することができます。ここでは P タグに対して，leaf というクラス名を与えて，背景に「いちじくの葉」の画像 ichijiku-ss.jpg を表示するように設定しています。画素についての変数は，例に示したように url(画像ファイルのURL) で表します。leaf というクラス名を付けた P タグは， <p class="leaf"> というようにして使います。
(4) p.red {background:#ccffff; color:red}
p タグに対して別のクラス red を指定し，背景を空色に，テキストの色を赤に設定しています。
　それではスタイルシートを HTML ページの最初で一括して設定したページ「スタイルシートの設定 2」のソースとWebページを見比べながら学んでください。解説はWebページの中で行っています。

　　「スタイルシートの設定 2」のソース
　　「スタイルシートの設定 2」のWebページ


このページのトップへ