スタイルシートとは

デザインはスタイルシートで

ホームページの構造を記述する言語であるHTMLの基礎知識だけでは白地に集い文字だけが並ぶ単調なページしか作れませんね。そこで、ホームページに色を付けたり、自由なサイズや配置を指定したりする方法を学んでいきましょう。HTMLでも色やサイズを指定したりする仕様もありますが、ホームページの保守性やアクセシピリティなどで弊害も見られるようになってきたため、現在では構造の記述とスタイルを明確に区別することが推奨されています。スタイルを定義するのがスタイルシートで、CSS(Cascading Style Sheets)はその1つですが、現時点で「スタイルシート」といえばほぽCSSのことを指すと考えてよいでしょう。

プロパティと値を設定する

CSSは「プロパティ」に「値」を指定することで使用できます。「プロパティ」とは「フォントのサイズ」「色」など、設定しようとする項目のことを指し、値とは「18ポイント」「黄色」など具体的な設定値を示すものです。CSSではプロパティに値を設定するためにコロン「:」を用います。「何を:どうする」というように覚えておくとよいでしょう。

style属性の値として記述する

「プロパティ:値」というスタイルの設定を記述する方法は3とおりあります。HTMLの知識があれば、一番わかりやすいのほ、スタイルを設定したい要素に、style属性を指定する方法で、「style=”プロパティ:値”」のように「”」(または円を付けて記述します。

headタグ内に記述する

1つのHTML文書内に共通するスタイルは、head部分にstyleタグを用いて指定します。まず、styleタグのtype属性にcssを設定します。これはスタイルシートの種類がcssであることを表しています。スタイル設定対象を指定するものをセレクタといいますが、同ーのタグすべてにスタイルを設定したいときは、タグ名をそのままセレクタとして用います。たとえば、h1タグにスタイルを設定したいときは「h1」を記述し、「{}」で囲んで「プロパティ:値」を記述します。なお、この記述方法を採ると、cssに対応していないブラウザではスタイル指定の文字列がそのままブラウザに表示されてしまうので、それを防ぐためにスタイル指定の部分を「<!ーー!>」でコメント化しておくのが一般的です。

拡張子「.css」のファイルを作成する

スタイルを設定するファイル(外部スタイルシート)を別途作成し、その設定情報をHTML文書から呼び出すようにすることもできます。この方法を採れば、複数のHTML文書に共通のスタイルを設定することが容易にできるようになります。外部スタイルシートファイルは、スタイル設定情報を記述し、拡張子を「.css」で保存します。ここでは例として、h1要素に、「backgroundcolor:yellow」を設定し、「style.css」という名前で保存するものとします。