おやこニュースでは、ほとんどのページにスタイルシートを使っていますが、これらのスタイルシートは、実際には私が書いた物ではなく、他のサイトから頂いたものをドリームウィーバーのスタイルシート編集ダイアログを用いて作ったものです。部分的に自分で書き直したりしていますが、私はスタイルシートの書き方を余りよく知りません。ここでは、スタイルシート導入のとっかかりになるように、簡単な説明をします。実際にはかなり奥が深いものです。様々なリファレンスなどがありますので、参考にしていろいろと各自で試されるのが良いと思います。ドリームウィーバーのスタイルシート編集機能については、別ページで解説しています。
スタイルシートを用いる利点の最大のものは、スタイルシートを用いることで、HTMLがルールに則った記載になることだと思います。表示のレイアウトをスタイルシートにゆだねることで、HTMLは簡潔で、文章の意味を忠実に示すものになり、情報伝達の手段としてのHTMLはその機能を十分に発揮します。
スタイルシートを利用しない場合、ウエブページの表示はブラウザのデフォルトスタイルシートに依存することになります。スタイルシートを用意すると、スタイルシートに対応しているすべてのブラウザで、同等の表示が得られることになるはずで、閲覧者の環境に神経を使う必要が減ります。
外部スタイルシートを複数のHTMLで共有することで、ウエブサイトの模様替えがきわめて能率的に実現します。また、ウエブサイトのすべてのページが統一されたフォーマットを持つことが出来ます。ページのデザインやナビゲーションなどがサイト内で統一されるので、閲覧者にとって分かりやすいサイトになるでしょう。
スタイルシートを効率的に用いることで、様々な微妙なレイアウトが可能となります。実に細かな設定を効率的に行うことができます。
素晴らしい技術だと思います。有効に活用すると、他では得られない数々のメリットがありますが、現実問題として、、、
取っつきにくいことは確かだと思う。上にも述べています通り、私自身もサラの状態からスタイルシートを書くことはいまもって出来ません、というか、やったことがありません。見栄えとしてのレイアウトだけでなく、文書の構造をしっかりと形作ることは、スタイルシートを適用する上で必須のことです。そういう意味では、散文にはあまり向いていない様な気がします。
思い通りにならないことが、多々あります。一応、CSS対応を謳っている最新のブラウザソフトでも、スタイルシートの表示がまちまちなことが多く、おそらくはブラウザのバグの類ということになるはずですが、自分の作ったスタイルシートの記述が間違っているのか、ブラウザが間違っているのか、私にはよく分からないことが多いです。現実には、閲覧者の大半を占める、ウインドウズ用のインターネットエクスプローラの表示が、最新バージョンであっても十分ではないようです。マックを使ってウエブサイトを作る立場では、なかなか厳しいものがあります。
ということで、見る人が小さなブラウザウインドウで見るか、大きく広げてみるか、フォントを大きくするか、小さくするか、新しいウインドウを開くかどうか、そういったことについて全て閲覧者の判断に任せるという発想に基づいて、デザインを進めます。自分のパソコン画面の自分のウエブサイトの姿を固定概念として持ってはいけません。如何なる閲覧スタイルでも、それなりに見えて、意図が通じて、初めての人でも迷子にならない様なナビゲーションを提供するのが、良くできたスタイルシートによるウエブデザインと言えるでしょう。
スタイルシートによるデザインを効率的に行うには、ウエブサイト構築の初期の段階から、スタイルシート導入を意図してHTMLを作製するべきだと思う。CSSを導入することを前提とせずに作ったウェブページに途中からスタイルシートを導入することは、それほど楽なことではありません。HTMLの記述が正しくないと、まずそちらを修正する必要に迫られます。
スタイルシートを使わなくても、ウエブページはブラウザに表示されます。現実に、多くのウエブページは全くスタイルシートを使っていないか、部分的に使っているのみです。
これは、ブラウザソフトがそれぞれのソフトに独自のデフォルトスタイルシートを持っており、それに従って表示するからです。様々なブラウザのデフォルトスタイルシートは多くは似通っており、たとえば、リンク（アンカー要素）は、青い色でアンダーラインのフォントで表示され、強調<em>はイタリックで、さらに強調<strong>は太字で、見出し<h1>￣<h6>は太字でフォントのサイズを変えて表示されます。引用<blockquote>はインデントなどなど、、、繰り返しますが、これらの表示は、ブラウザのデフォルトスタイルシートにそのように表示するように設定してあるので、そう表示されるのです。
上に並べた、スタイルシートのメリットを十分生かそうと思ったら、外部スタイルシートを作製して、ウエブページのhead要素の中に
<link href="スタイルシートのアドレス" rel="stylsheet" type="txt/css">
と書き込んで、リンクさせて読み込ませる方法が良いと思います。この項で紹介するのもその方法です。ドリームウィーバーを使う場合、コードビューから直接書き込むことも出来ますし、新規CSSスタイルダイアログで定義場所を新規スタイルシートファイルを指定すると、自動的に書き込んでくれます。すでにあるスタイルシートの場合は、スタイルシートの添付を選ぶと、ダイアログが出て、書き込んでくれます。
HTMLと同様、テキストエディタで作製します。ファイル名は、分かりやすいもの、拡張子は.cssです。ドリームウィーバーでは、適用したいHTMLファイルを開いた状態で、テキストメニュー＞CSSスタイル＞新規CSSスタイルと選んで、ダイアローグを出します。初めは定義場所に新規スタイルシートファイルを選ぶ。これで、外部スタイルシートを導入できます。スタイルシートをまとめたディレクトリを作製し、その中においておくと良いと思う。
HTMLのhead部分に、リンク要素のhref属性にスタイルシートのアドレスを指定します。
<link href="相対位置でURIを表示/hp4.css" rel="stylesheet" type="text/css">
スタイルシートは、たとえば、すべてのページに共通するスタイルシートと、おのおののページに独自に設定するものと分けて、一つのウエブページに二つ、あるいはそれ以上指定することが出来ます。
/* コメント */ の形で自由に入れることが出来ます。スタイルシートファイル内の、改行、スペース、タブは、コメントとともに無視されますので、見易く書きやすいように、任意に改行などができます。
セレクタ（HTMLのどの部分にスタイルを適応するか）に続いて、プロパティ（何を）：値（どうするか）で表現します。
セレクタ {プロパティ：値}
p { font-color: blue} （段落の中のテキストは、フォントの色を青にする。）
プロパティと値を合わせて、宣言といいます。
セレクタは、スタイルを指定する単位です。
必須部分（タイプセレクタまたはユニバーサルセレクタ）＋オプション（.class #id:疑似クラス・疑似要素）
全ての要素に適応させる場合は、ユニバーサルセレクタ（*）を指定する。省略しても良い。オプション部分は、順不同で複数指定できる。
| 分類 | 適応となる対象 | 書き方（例） | 解釈 |
|---|---|---|---|
| ユニバーサル | 全ての要素 | 一般にクラス、タイプセレクタと組み合わせる（*.coments ） | comentsというクラス属性を持つ全ての要素に適用 |
| タイプ | 指定した要素 | HTML要素（p） | 全ての段落（p）に適用 |
| クラス | 指定したclass属性をもつ要素 | 要素.class属性値（p.nantoka） | クラス属性値がnantokaの段落に適応 |
| id | 指定したid属性をもつ要素 | 要素#id属性値（p#nantoka） | id属性値がnantokaの段落に適応 |
| セレクタ | 適用対象 | 分類 |
|---|---|---|
| :link | 履歴に残っていないリンク先（未訪問リンク） | 疑似クラス |
| :visited | 履歴に残っているリンク先（訪問済み） | 疑似クラス |
| :hover | カーソルが指定した要素上にある状態 | 疑似クラス |
| :active | 指定した要素がアクティブになった状態 | 疑似クラス |
| :first-letter | ブロックレベル要素の１文字目 | 疑似要素 |
| :first-line | ブロックレベル要素の１行目 | 疑似要素 |
| 分類 | 書式 | 例 | 解釈 |
|---|---|---|---|
| 絞り込み | スペースで区切って複数のセレクタを並べる | span.comments em | class属性値commentsのspan要素に含まれる強調（em）に適用する |
| 複数指定 | カンマで区切って複数のセレクタを並べる | p.comment,p#date | class属性値commentとid属性値dateの段落両方に適用する |
| 子要素 | 不等号>で二つのセレクタをつなぐ | div#sample > h2 | id属性値sampleの直接の子要素の見出し２に適用する |
{中括弧}で括る。プロパティと値はコロン（：）で区切る。複数の宣言を並べるときは、セミコロン（；）で区切る。
ある要素のに複数の宣言が与えられているときの優先順位を決める原則がカスケーディングと呼ばれるルールです。
スタイルシートで指定できる内容をプロパティといいます。
おのおのの要素について、
をプロパティとして指定することが出来ます。リファレンスを参照して下さい。
プロパティの種類によって様々な値を指定することが出来ます。詳しくは、リファレンス参照。
一例。余り良い例とは思えませんが、、、このページを表示するためのスタイルシートの一部です。
/* header*/
#header {
margin: 0pt;
padding: 0px;
background-position: left center;
background-repeat: no-repeat;
}
#header > p {
font-size: 1em;
line-height: 1.4em;
margin: 0px;
}
/*contents*/
#contents {
font-size: 1em;
width: 73%;
margin-bottom: 3em;
}
#contents > h2 {
color: #000033;
font-weight: 300;
padding: 15px 2px 2px 50px;
text-align: right;
margin-bottom: 12px;
margin-top: 15px;
border-left: #A4CBD8;
height: 2.5em;
background-color: #FFFFFF;
}
出来上がったスタイルシートは実際にブラウザで表示させて、調整してゆく必要があります。
いくつかの閲覧環境をシミュレートして、意図通りに表示されることを確認する必要があります。ブラウザに依って、CSSの解釈が違う場合があるのです。自分のパソコンと同じにしなくてはならないことはありません。というか、同じにはならないと思わなくてはなりません。同じにする必要もありません。私のようなマイナーOSでやっていると、特に自分と同じ画面を見ている人は居ない、ということを痛感します。読みやすく、分かりやすく、意図が伝わるかどうか。その点をクリアするというのが取りあえずの目標です。
インターネットエクスプローラ、ネットスケープナビゲーターのバージョン４以前のブラウザではスタイルシートの表示がまるでダメ、らしいです。マック用のブラウザの中で、iCABなど、まともに表示できないものもあります。５年後、もっと状況が良くなっていることを期待しています。
oyanews/homep/creating/web_CSS