スタイルシートについて
スタイルシート利用の事例紹介 操作説明
  Cascading Style Sheet: カスケーディングスタイルシート

CSS (Cascading Style Sheet: カスケーディングスタイルシート) は、ホームページでのコンテンツの外観を制御するフォーマットルールの集合です。CSS スタイルを使用すると、レイアウトの厳密な位置設定から特定のフォントやスタイルにいたるまで、ページの外観を正確かつ柔軟に制御できます。CSS スタイルを利用すると、HTML スタイルだけでは制御できない多くのプロパティを制御できます。

"カスケーディング" とは、複数のスタイルシートを同じ Web ページに適用できることを表します。たとえば、カラーを適用するスタイルシートと、マージンを適用するスタイルシートをそれぞれ別に作成し、その両方を同じページに適用して目的のデザインを作成することができます。

 
CSSを設定するとテキストのスタイルも自分の好きなように作成ができます。テキストのサイズ・カラー・フォントなどをCSSのスタイルで指定すれば、管理が大変楽になります。   タグパネルの[関連CSS]にて様々なスタイルを設定していきます。

CSS スタイルの大きな特長は、更新が簡単なことです。CSS スタイルを更新すると、そのスタイルを使用しているすべてのドキュメントのフォーマットが自動的に新しいスタイルに更新されます。今までのホームページの作り方だと、ホームページ全体のテキストのサイズを修正する場合は、全てのページを修正しなくてはいけませんでしたが、CSSを使用していれば対象のCSSを修正するだけでイイのです。
その他でも
 ・編集するに当たって、HTMLだけでデザインまでこなしてしまうより分かりやすい
 ・HTMLと分けて書けるので、デザインならデザイン、内容なら内容に集中できる
 ・デザインを一つ決めれば、他のHTML文書に簡単に流用できる
 ・スタイルシートでまとめて書いておけば、デザインの変更も楽にできる
などの利点があります。

上記では、テキストなどの装飾を例に上げましたが、それ以外にもページのレイアウトをCSSで制御する事もできます。CSSを使わないと、テーブル等でページレイアウトを組まなくてはいけませんが、CSSをつかうと、より高度なレイアウトを作成する事も可能です。もともと、テーブルは「表」を現すためのもので、テーブルでページレイアウトをするのは本来の使い方ではありません。また、テーブルでページレイアウトを組むと、無駄にソースが複雑になり更新に時間が掛かったり、音声ブラウザでのホームページ読み上げにも支障が出てきますが、CSSはこれらの問題もクリアーできます。

現在は、殆どのブラウザがCSS対応となっています。(バージョンが古いブラウザの中には未対応のものもあります)今後も、さらに広がっていく技術の一つといえます。

しかし、CSSは奥が深くマスターするには予備知識も含めてかなりの学習が必要となります。本来は、CSSの基本ルールから各プロパティ、ブラウザごとのクセなど覚えていかねばなりませんが、当講座ではDreamweaver CS3で編集可能なCSSの初級的な説明までとします。

 
複雑な構成のページもCSSを使えば表現が可能となります。
また、最近人気の『BLOG』もCSSを使って構築されています。
  同ホームページのCSSの適用を外してみると基本HTMLはシンプルです。文字の装飾・ページのレイアウトなどはCSSで行っているので、左図とは全く違う表示となっています。