Home(H)＞とらのまき＞ホームページを作ろう

■　スタイルシートでできること　印刷する？

　一部で、「Internet Explorer」 でしか使えない技を使用しています。このため、他のブラウザで見ると、意味不明な説明があると思いますが、悪しからずご了承ください。(^ ^；) 　しかも、CSSをきちんと理解していない状態なので、文法的におかしいかもしれません。鵜呑みにしないでください。

スタイルシートの基本的なこと

　HTMLとの関係は、別ページで説明しています。ここでは、こういう技は、スタイルシートで、こうやって実現してるんだよっていう、実例に基づいた簡単な紹介にとどめたいと思います。 CSS（スタイルシート）の三つ記述方法について説明しながら、よく使っているスタイルシートのサンプルをちりばめてありますので、よかったら参考にしてください。

　なお、スタイルシートを使用する場合は、<head>〜</head>の間に<meta http-equiv="Content-Style-Type" content="text/css">という一文を追加しておくといいと思います。これは、「基準スタイルシート言語」の指定文です。

リンク方式

　複数のHTMLページに適用して、同じスタイルを共通化して使う場合に使います。私が実際使っている方式です。たとえば、このページでは、「terakoya.css」という、カスケード スタイル シート ドキュメントを使っています。中身はただのテキストファイルです。テキストエディタ（「メモ帳」で十分）などを使い、決められた書式の通り記述して、拡張子を「.CSS」にすれば、簡単に作成できます。

　そして、<head>〜</head>の間に、<link rel="stylesheet" href="terakoya.css" type="text/css">のような一文を記述すれば使用できます。href属性で、自分が作ったファイルを指定すれば、それでOKです。

　▼　セレクタについて

hr {
color : #666666;
border-width : 1px;
border-style : dotted;
}

　リンク方式・ヘッダ方式の場合、「セレクタ」を使ってCSSを記述します。セレクタとは、スタイルを適用したいものを表す（指定する）もので、この場合なら「hr（区切り線）」のスタイルを設定しています。色が＃666666（■）、border-width で線の太さを1px（1ピクセルと指定）して、border-style で線のスタイルを dotted（破線）と指定しています。決められた書式に沿って記述すればいいだけなので、リファレンス等を参考にして、いろいろ試してみてください。

　このように、「hr」ならすべての「hr」に対応させたいなら、こういう指定の仕方でいいんですが、場合により適応させたり・させたくなかったりすると思います。そういうときは、「クラスセレクタ」「IDセレクタ」と「疑似クラス」というのを使います。　

　クラスセレクタ
.textcolor {
color : #b66561;
}

　「.」で指定します。右図なら、「.textcolor」までが、クラス名になります。で、実際に使う場合は、「こんな感じ」と、class 属性で部分指定します。タグは、<span class="textcolor">こんな感じ</span>となってます。色が#b66561（■）。

　IDセレクタ

　「#」で指定します。一つの文書で重複して使えないという制限があります。<span id="textcolor">こんな感じ</span>　みたいに、class属性が、id属性で指定するって感じです。

　<span>なら、文章中の任意の部分に指定。<p>なら、段落ごとに指定。<h1>〜<h5>なら、見出しごとに指定。<td>なら、セル内に指定。……みたいに、どこにclass・id 属性を指定するかで、適用範囲が選べます。 他にもいろいろ指定方法あり。
　疑似クラス
A:link {
color : #666666;
font-size : smaller;
text-decoration : none;
text-align : center ;
background-color : #ffffff;
border-color : #666666;
border-style : solid;
border-width : 1px;
width : 120px;
}

　リンク設定（<a>タグ）に対して使用するものです。スタイルシートを適用しない場合は <body>タグで、リンク色のみ指定が可能ですが、スタイルシートを使うと、フォントのサイズ・色、アンダーラインを出さないようにしたり・点線にしたり、背景色を指定したりと、非常に細かな細工が可能です。

　例えば、「Home」というリンクのCSSは、右図の通りです。長い指定なので、「a:ink」部分しか例としてあげていませんが、「a:link（未訪問）」「a:visited（訪問済み）」「ａ：hover（カーソルが乗っている時）」の分を本当は指定しています。他にも「a:active（クリックした後）」の指定もできるんですが、それを指定すると、HTML文法的にエラーになるので、私は指定していません。

　color : #666666（文字色を指定）、font-size : smaller（フォントサイズを小さく指定）、text-decoration : none（文字の下線指定をなくした）、text-align : center（文字を中央揃えに）、background-color : #ffffff（背景色を指定。ここでは白）、border-color : #666666（枠線の色を指定）、border-style : solid（枠線の体裁を指定。ここでは直線）、border-width : 1px（枠線の太さを指定。ここでは、1ピクセル）、width : 120px（ボックス内部の幅を指定。ここでは120ピクセル）　と、ここまで細かく指定すると、上の通りに表示するようになります。(＾ ＾;) 　

　※こういうふうにまとめて指定するときは「；」で区切ってやればいいだけです。デザインに凝ってるサイトは、だいたい、疑似くらいをかっこよくデザインしてますよね。どんな指定が可能かは、リファレンス等で確かめてください。

　リンク方式の場合は、ヘッダ方式のように、<style type="text/css">のような、これからスタイルシートを使いますという宣言文は必要ありません。

ヘッダ方式

　そのページにだけスタイルシートを反映したい場合に使います。<head>〜</head>の間に、直接CSSを書きます。<style type="text/css">で、これからスタイルシートを記述するぞと宣言して、あとはいつも通りの書式で書けばいいだけです。

　 スクロールバーを見てもらうとわかるんですが、普段はリンク方式でみんなまとめて一括指定しているんですが、このページだけ、スクロールバーの変え方の説明のため、ヘッダ方式を取り入れ、わざと、すごい配色のスクロールバーになっています。――とにかく、そのHTML文書にだけ対応させたいときは、これを使います。　

<style type="text/css">
body {
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #0000FF;
scrollbar-shadow-color:#FF0000;
scrollbar-3dlight-color: #00FF00;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #CCCCCC;
scrollbar-darkshadow-color: #00FFFF;
</style>

□　scrollbar-face-color：表面の色
■　highlight-color： ハイライト（左外枠）色
■　shadow-color： 影（右外枠）の色
■　3dlight-color：影（右上）の色
■　arrow-color： 矢印（▲）の色
■　track-color： 背景色。
■　darkshadow-color：影（右下）の色

※ここで注意すべきなのは、スクロールバーの色の変更が可能なのは、「Internet Explorer（IE）」だけです。このため、CSS文法的には、この指定をするとエラーになります。

インライン方式

　スタイルシートを適用したいタグ（要素）に直接 style属性で指定する形です。ということで、リンク・ヘッダ方式とは違ってセレクタを使いません。HTMLタグのように、<body>内に直接CSSが書けるのは、これだけです。で、実際に使う場合は、「こんな感じ」と、style 属性で指定します。タグは、<span style="color : #b66561">こんな感じ</span>となってます。色が#b66561（■）。

　この方法でよく使うのは、tableタグでの、filter属性を使って、ちょっと洒落た感じに仕上げる場合だと思います。サンプルページとして、よくあるパターンのHTML文書を作成しました。背景画像を固定（これは、ヘッダ方式で指定）し、「filter: Alpha()」を使って、（半）透明処理をほどこしています。背景画像があるし、半透明処理のため、視力の悪い方には見にくいかと思いますが、こういうこともできるとサンプルとしてご覧いただければ幸いです。

　▼　サンプルページのタグ説明

　背景画像固定（ヘッダ方式）
<style type="text/css">
body {
background-position : right center;
background-attachment : fixed;
background-image : url(bg.jpg);
background-repeat : no-repeat;
}
</style>

background-position: right center：背景画像を右寄せ　
background-attachment: fixed：背景画像の固定。スクロール禁止
background-image : url(bg.jpg)：背景画像のファイル指定
background-repeat: no-repeat：背景画像を繰り返さないで表示

　※background-image : url(bg.jpg)では、ファイル名を指定します。ここでは、「bg.jpg」がそれにあたります。指定したいファイルを、パス指定も含めて正しく設定してください。同じディレクトリ（フォルダ）内にHTMLファイルと画像ファイルがあれば、今回のように、パス指定部分は必要ありません。

　backgroundで背景に全体の指定、background-colorで背景色の指定、background-imageで背景画像の指定、background-attachmentで背景画像のスクロールに関する指定、background-positionで背景画像の位置の指定ができます。

　半透明処理（インライン方式）

　テキストや文書を半透明にも勿論できます。ここでは、テーブルを使って、範囲内を半透明化しています。使用するのは、スタイルシートの filter: alpha() 属性です。テーブルを二つも使って、外枠にも凝ってみました。（笑）

　<table style="filter: alpha(opacity=50)" …中略…>〜</table>　ということで、"filter: alpha(opacity=50)"で設定しています。opacity で、透明の度合いを指定。0（透明）⇔100（不透明）になります。ここでは50にしているので、半透明って感じです。

　※このサンプルページ（tora_hp_2d1.htm）のソースを直接見たかったら、ここのリンクをクリックしてください。ターゲット指定を「_top」にしたので、フレーム版を使っているときでも、ブラウザの「表示」→「ソース」で、ソースの中身を確認可能になります。

Copyright (C) 2000-2005 Makiko Kudoh.
Last up ： 03/26/2004
URL：http://www.causu.com/tora_hp_2d.htm