ここでは WEB サイトを作成するための言語の一つである CSS について分かりやすく説明します。また、Dreamweaver CC ではソースコードと共に CSS ファイルを簡単に編集することができます。

CSS とは

CSSはカスケーディング・スタイル・シート(Cascading Style Sheets)といい、WEBサイトの装飾(スタイル)を指定するための言語です。
HTMLで見出しや段落、テーブルなど、ページとってこの情報はどういう構成要素であるかを定義したら、CSSでフォントの種類や大きさ、線の色や画像の配置など見栄えを整えることができます。
HTML(HTML4.01やXHTML1.0)にもスタイルを指定する要素(タグ)が存在しますが、推奨されていません。次世代バージョンであるHTML5では一部廃止する予定になっているものもあります。

CSS を使う利点

CSSを使用することによって以下の利点があります。

更新のしやすさ

HTMLとCSSを分けて指定すると必要なタグの総数を減らすことができます。例えばページに使われている HTML の p タグ(段落の要素)すべてに、同じ文字の種類と大きさと色を指定したい場合、CSSなら一括で指定することができます。これによって、ソースコードの視認性が向上し、目的のタグや属性を探しやすくなります。

また1つの外部スタイルシートで複数のページを装飾した場合は、スタイルシートを編集することによって、リンクしているページすべてに更新内容を反映させることができます。
※「外部スタイルシート」とは HTML と CSS を別ファイルで作成した CSS ファイルのことです。HTML側に CSS のリンクを指定することによって、2つのファイルが1つの構成として関連付けられます。

表示速度の向上

最近では高速・大容量のデータ通信が可能な回線が普及してきたため意識しなくなりましたが、ダイアルアップ接続など通信速度の遅い回線を使用していると、HTML を使ったテーブルレイアウトの WEB サイトなどは、表示速度が遅い場合があります。1ページの情報が多ければ多いほど、ブラウザが構成を理解(情報処理)するのに時間がかかるためです。CSS を使用すれば、別の箇所で同じ装飾を施したい場合など一括指定ができるので、必要なタグを減らし読み込みの負担を軽くすることができます。

また、外部スタイルシートを使用すると、ブラウザのキャッシュに残る(一時保存)ため、同じスタイルを指定した別のページを表示させる場合は格段に速度が早くなります。

アクセシビリティ

誰もが同様に情報を取得できるように、また取得しやすいようにした状態のことです。
HTMLは情報構成を定義する言語のため、装飾も指定してしまうと情報の順序や構成が正しく検索エンジンや音声読み上げソフトなどに認識されない可能性があります。
※「音声読み上げソフト」とは視覚障害者の方がWEBサイトの情報を音声で聞くことができるソフトのことです。

そのため見栄えといった情報(コンテンツ)として意味のない指定は、CSSに任せることでアクセシビリティの向上につながります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー