Cascading Style Sheets（カスケーディング・スタイル・シート、CSS）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。カスケード・スタイル・シートとも呼ばれる。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 出典: フリー百科事典『ウィキペディア（Wikipedia）』
1.スタイルシートを使用したホームページでの利点
- ページデザインの統一が簡単。
- htmlだけでは不可能なレイアウトが可能になる。
- CSSを外部ファイル化することによってを更新・編集作業が効率化される。
- ページの大量生産が可能。
- HTMLファイルを軽くすることができる。
- 転送やサーバー容量の節約にもなる。
- ページの表示が高速になる。
- 携帯やモバイル、テレビ、ゲーム機器からのアクセスでも表示されやすい。
- アクセシビリティに非常に良い。
- SEOに強い。
- 印刷用にCSSを準備すればPDFなどの代用にもなる。（印刷時のレイアウトをCSSで制御が可能。）
- 今後必ずサイト作成で主流になる。
などがあげられる。ですので、
2.ホームページは、CSS化してみよう！
- 装飾にかかわる部分はすべてスタイルシートで記す。
- HTMLで、<font><b><br>タグはつかわない。
- テーブルレイアウトを卒業して、<div>タグによるレイアウトを使用する。
- HTML4.01ではなく今後、XHTML1.0以上を使う。
- CSSは、基本的に別ファイルに分ける。
- 画像はCSSによる背景画像として有効に使ってみる。
3.スタイルシートの記述する方法
- インラインスタイルシート
- HTMLタグの中に記述する方法。
-
<body style="background-color:#008000; color:white;, text-align:center;">
- 内部スタイルシート
- <head>～</head>または<body>～</body>内に記述する方法。
-
<head> <style type="text/css"> <!-- body { background-color: #008000; color:white; text-align:center } --> </style></head> - 外部スタイルシート
- <head>～</head>内に<link rel='stylesheet' href='外部スタイルシートのパス'>を記述する方法。
-
<head> <title>スタイルシートをいじってみる</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head>
- 外部スタイルシートは、.cssという拡張子にして、上記のように<link rel="stylesheet" ～、で繋げればOK！
- 外部スタイルシートは以下のように非常に簡単である。
-
body { background-color: #008000; color:white; text-align:center } - 当然、外部スタイルシート化すべきであるのは言うまでもない。
4.id class (# .)とタグ
- idには「#」をつける。
- idは、ページ内で唯一。セレクタ（スタイルを適用する対象）の複数指定はできません。
- classには「.」をつける。
- classは、ページ内で複数指定が可能。繰り返し指定可能。
- タグには、「#」「.」をつけない。そのタグをそのままスタイル指定ができる。
5.スタイルシートの構文を覚えてみよう。
ということで、実際にホームビルダーのスタイルシートマネージャーか、Expression Webなどを使って
操作しながら、覚えてみましょう。