タグ: ウェブサイト作成

トップページ > サイト作成 > スタイルシート > ウェブサイトで利用されるスタイルシート（CSS）とは

ウェブサイトで利用されるスタイルシート（CSS）とは

[最新更新] 2021年09月18日
[初回公開] 2013年05月21日

スタイルシートとはフォントや行間など文書の装飾を定義するもので、一部のソフトウエアでも互換性を持たせるために利用されているが、一般的にウェブサイトの制作現場で用いられるスタイルシートについて解説する。

1. スタイルシートとは

スタイルシート（Style Sheet）とは、文章のフォントや行間など見栄えのデザインを指定したものである。
文章内容とデザインの定義が分かれているため、異なるスタイルシートに変更することで文章はそのままで見た目を変えることができる。
Office 製品の Word など文書作成ソフトで利用されていることが多く、他のソフトでも開いて編集できるように互換性を持つために文章とは別にスタイルシートで見栄えが制御されている。

2. ウェブ制作におけるスタイルシート（CSS）とは

ウェブ制作におけるスタイルシートは CSS（Cascading Style Sheet）と呼ばれ、HTML タグに対してデザインを定義することができる。
前述の文書作成ソフトで用いられるスタイルシートとは異なり、文書だけでなくレイアウトや画像のデザイン制御も行うことができる。

CSS は表示しているページ内で特定の一箇所のみにデザインを適用する id 属性、ページ内で複数個所にデザインが適用できる class 属性を HTML タグに記載する。

文章や画像といった掲載内容と、デザインとなる CSS を分けること制作過程で分業することができ、作業の効率化が図れるとともに、デザインだけを変更したい場合に CSS の差し替えだけで済むメリットがある。
また、文章などがある HTML とは別に CSS を用意することが HTML の内容が簡素化され、検索エンジンのロボットが自動巡回した際にページの内容が伝わりやすくなるとともに、音声ブラウザを利用した際に不要な文字列の読み出しを防止することができる。

3. CSS が無い場合のウェブサイトの見え方

CSS でデザインの制御を行っていない無い場合のウェブサイトは下図のように文章または画像が縦並びで表示され、フォントはブラウザ規定のものが適用されるとともに、リンクの色は青で表示されることが多い。

CSS をウェブサイトに適用すると下図のようになり、文章だけでなくレイアウトやサイト全体のデザインも行うことができる。

4. CSS の 3 つの設定方法

ウェブサイトに CSS を適用するためには 3 つの方法がある。
1 つ目はブラウザが表示する HTML ファイルとは別に CSS 用のファイルを用意し、HTML はその CSS ファイルを読み込む手法である。
HTML タグへは class 属性で CSS を定義することで CSS ファイルを修正するだけで全ページにデザインが適用され作業効率が良い。

2 つ目は HTML の HEAD タグ内に CSS を記載する手法である。
べージごとに CSS を用意する必要があるため全ページに修正が必要になった場合は作業が手間だが、ページごとに違うデザインを施したり、他のページへの影響を考慮する必要が無い。
また、CSS が記載されている箇所が HEAD タグ内に固まっているため操作がしやすい。

最後に 3 つ目は HTML タグごとに CSS を記載する手法である。
HTML タグごとに CSS を設定するので非常に手間がかかる点と、ブラウザで表示する際にデータサイズが大きくなり表示に時間がかかるデメリットはあるものの、HTML タグと同じ箇所にデザインの定義があるため後々に修正する場合は修正箇所が限定されて把握しやすいメリットがある。

関連記事