rssＨＴＭＬとCSS（スタイルシート）
「HTML（エイチ・ティー・エム・エル：HyperText Markup Language）」というのは、Webページを作るときに必要な記号と約束ごとの集まりで、Webページを作るためのプログラム言語の一種みたいなものです。単に< >で囲んだ記号（タグ）が羅列してあるだけなので、とっつきやすいプラグラム言語といえるでしょう。現在、HTMLで文書構造を示し、CSSでデザイン（レイアウト）するというふうに、流れが変わってきています。HTMLもいくつかバージョンや仕様が異なり、どの仕様書に則るかで使用できるタグに違いがあります。現在の最新バージョンは、HTML 4.01 になります。これより古いものは使わないのが暗黙の了解です。仕様については、厳格なもの（HTML 4.01 Strict）、規則がゆるやかなもの（HTML 4.01 Transitinal）、フレーム使用時になどに使えるもの（HTML 4.01 Framset）、という感じで三つに分かれています。だいたいみんな、HTML 4.01 Transitinal で作っています。
▼ CSS（シー・エス・エス）
格好いいWebページを作りたいなら、「CSS（Cascading Style Sheet）」と呼ばれる「スタイルシート」を使わないと作れません。スクロールバーの色を変えたりできるのは、これです。（ただし、Internet Explorer 使用時じゃないと反映しませんが） CSSは新しい規格なので、古いブラウザには完全対応していないため、いまだに完全普及には至っていません。使用するときは、その点にご注意ください。CSS記述の方法としては、三つ方式があります。三つ同時に記述しても大丈夫です。優先順位は、ブラウザが後から読み込んだ順になり、リンク→ヘッダ→インラインの順になるそうです。
- インライン方式：そのタグだけに対応させる。タグに直接「style」で書き込む形。<body>内に直接CSSを書き込む。
- ヘッダ方式：そのHTML文書内すべてに適応させる。<head>内に直接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; } |
このように、「hr」ならすべての「hr」に対応させたいなら、こういう指定の仕方でいいんですが、場合により適応させたり・させたくなかったりすると思います。そういうときは、「クラスセレクタ」「IDセレクタ」と「疑似クラス」というのを使います。
クラスセレクタ
| .textcolor { color : #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; } |
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"> |
□ scrollbar-face-color：表面の色
■ highlight-color： ハイライト（左外枠）色
■ shadow-color： 影（右外枠）の色
■ 3dlight-color：影（右上）の色
■ arrow-color： 矢印（▲）の色
■ track-color： 背景色。
■ darkshadow-color：影（右下）の色
インライン方式
スタイルシートを適用したいタグ（要素）に直接 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で背景に全体の指定、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にしているので、半透明って感じです。
※このサンプルページのソースを直接見たかったら、ここのリンクをクリックしてください。ターゲット指定を「_top」にしたので、フレーム版を使っているときでも、ブラウザの「表示」→「ソース」で、ソースの中身を確認可能になります。
