CSS（スタイルシート）

HTMLだけでホームページ制作は可能ですが、若干デザイン的に見劣りがします。イラストレーターやフォトショップを使って、背景やグラデーションを作れば確かにきれい・かっこいいデザインはできます。しかし、あくまでも「画像」となってしまうため、文字のレイアウトや配置には適用することができないのです。そこで開発されたのがCSS（スタイルシート）なのです。CSSは、「Cascading　StyleSheet（カスケーディング・スタイルシート）」と言って、単純にスタイルシートと呼ぶ場合と、頭文字をとってCSSと呼ぶこともあります。このCSSとは、数種類あるスタイルシートのうちのひとつでHTMLの補助的な役割を果たす言語です。HTMLが文書構造を表す言語であることに対し、CSSはレイアウトデザイン（見栄えの指定）を行うための言語です。以前はCSSに対応するブラウザがほとんどなかったので、HTMLだけで文書構造とレイアウトデザイン両方を行っていました。しかし、最近はCSSに対応するブラウザも多くなってきたので、HTMLによるレイアウトデザインからCSSによるレイアウトデザインに移行しつつあります。
HTMLによるレイアウトデザインに慣れ親しんだためかテーブルレイアウトを好んで使う人が多いのも事実です。また、テーブルレイアウトはDreamweaverなどのオーサリングツールで簡単に作ることが出来ます。それに対し、CSSによるレイアウトデザインはオーサリングツールでは簡単に作成できません。CSSを使用したコーディングで最も重要なのは、文書構造とレイアウトの分離を意識することにあります。文書構造とレイアウトの分離を完璧に行うことで、CSSのメリットを最大限に発揮することができるのです。

 

CSSのメリット

CSSは、検索エンジンで上位に表示されやすくなるSEO対策に有効なのです。それと、ファイルサイズが軽く済みます。CSSは、文書構造とレイアウトを切り離しているため、HTMLを一切いじらずデザインを変更することができます。HTMLだと、足りないタグを書き込んだりいらないタグを消去する必要がありましたが、テキストはそのままでレイアウトデザインだけを変更することが可能なため重宝します。ひとつのCSSファイルを変更するだけで、数十ページのレイアウトデザインがすべて変更可能となったため、ページ毎の変更の手間が省けます。
それとHTMLソースがシンプルになるので、構造が分かり易くなり、メンテナンスが容易になるなど、もっときれい・かっこいいデザインのホームページを制作したいならCSSを利用することをおすすめします。HTML・CSSを組み合わせて、自分の思い通りのホームページを制作することができるようになるでしょう。

 

スタイルシートの使い方

スタイルシートの使い方として、「HTML内に直接記述する」方法と「外部ファイルとしてスタイルシートを読み込む」方法があります。「HTML内に直接記述する」方法は可能なのですが、HTML内に直接記述してしまうとスタイルシートの使い回しが出来なくなってしまいます。ひとつつのスタイルシートで複数のページの見栄えを定義できるというスタイルシートの最大のメリットを台無しにしてしまいます。せっかくきれいなレイアウトを制作するためにCSSを活用しましょう。

 

外部スタイルシートの読み込み方

外部スタイルシートを読み込むにはタグ内に以下の１行を記述するだけで読み込むことが出来ます。

<link href="ファイル名.css" rel="stylesheet" type="text/css" />

relはこのファイルから見てリンク先はどのような内容かを指し、typeはリンク先の文書型を指します。終了タグの手前のスラッシュはXHTML固有の記述方法です。HTMLの場合は記述しなくても問題ありません。ちなみに以下のように記述することで複数のCSSファイルを同時に読み込むことができます。

<link href="header.css" rel="stylesheet" type="text/css" />
<link href="content.css" rel="stylesheet" type="text/css" />
<link href="footer.css" rel="stylesheet" type="text/css" />

例のようにCSSファイルをヘッダー用、コンテンツ用、フッター用と分けると管理がしやすくなるので効果的です。それとTOPページは他のページとレイアウトが異なる場合が多いので、TOPページ用にCSSファイルを用意するのも良いかと思います。また、大規模なサイトの場合はコンテンツのカテゴリごとにスタイルシートを用意したほうが良いかもしれません。また、以下のようにmedia属性を指定すると、CSSを適用するメディアを指定できます。

<link href="print.css" rel="stylesheet" type="text/css" media="print" />

この例では「print」すなわち印刷物に対してスタイルを適用しています。media属性を指定しない場合は全てのメディアに対してスタイルが適用されます。

 

CSSの基本文法

HTMLに基本文法があるように、CSSにも同じように基本文法があります。CSSの場合、「セレクタ｛プロパティ:値;}」と記述します。さほど難しい記述ではないと思います。、「プロパティ」の後ろの記号がコロンで「値」の後ろの記号がセミコロンです。ちなみに見やすくするために途中途中にスペースを入れていますが、本来は入れる必要はありません。

 

セレクタ

スタイルを適用させたい要素・ID・クラスを指します。

 

プロパティ

どのようなスタイルを適用させたいか

 

値

プロパティの値

プロパティの複数指定

セレクタ{
プロパティ1 : 値1 ;
プロパティ2 : 値2 ; }

このように複数プロパティを指定する場合はその節々で改行することをオススメします。１行で書くことも可能ですが見づらくなってしまいますからね。ちなみに、HTMLもそうですが、セレクタ、プロパティ、値は半角英数字で記述してください。全角文字だと動作しません。CSSは、このように記述するということを覚えておきましょう。