CSS

Cascading Style Sheet の略です。HTML のレイアウトデザインに使います。
更新日 2016-02-13

概要

CSS はHTML のタグによる装飾(decoration) を廃止し、新たに設けられたスタイル定義の仕組みです。以下のメリットが あります。

外部ファイル化

CSS は外部ファイル.css として保存できます。複数のページから参照できるのです。逆に考えれば、.css を変更すれば、 それを参照する全てのページに反映する事ができます。各ページを統一したデザインとする事は、情報とデザインの分離を 明確にし、読者にとっても見やすいページになります。

ファイルサイズの削減

class属性で管理するので、ページが増えるほど対サイズ削減の効果が得られます。また.css はブラウザ側でキャッシュされうる ので、ブラウズ速度・サーバー負担も改善されます。

サンプル

sample.html とsample.css を作成します。

sample.css

CSS ファイル
body  {width:100%;color:#ffdddd;background-color:#000055;}

.top  {width:500px;height:200px;background-color:#ffaaff;border:solid 1px #cb5566;}

sample.html

head 内でlink タグを使って割り当てます。
<html>
    <head>
    <link rel="stylesheet" href="sample.css" type="text/css" />
    </head>
    <body>
		<div class="top">
.top のCSS が適用されてます。
		</div>
    </body>
</html>