スタイルシートでサイトをデザイン

ウェブページのデザインは「CSS」という言語を使って作っていきます。

以上のような感じですが「color」「font-size」「float」などをプロパティと言います。
「#000000」「14px」「left」などを値と言います。

では、具体的に文字の色やサイズなどを指定する対象を決めて、CSS命令文を書いてみます。

h1{color: #00000;}

上は、見出しタグのひとつ「h1」に対して『文字の色を黒に』指定した命令文です。
さらに

h1{
color: #00000;
font-size: 14px;
}

とすると『文字の色を黒に、サイズは14pxに』と指定する命令文になります。

ここで出て来た「h1」のことをセレクタと言います。

CSSの命令文は セレクタ・プロパティ・値 の3つによって構成します。

一般的によく使われるセレクタとプロパテイを例示すると次のようなものがあります。

見出しタグ
h1,h2,h3,h4,h5

margin(要素間の離れ)

padding(要素内の余白)

background(背景)

color(文字色)

font-size(文字のサイズ)

段落
div,p

margin(要素間の離れ)

padding(要素内の余白)

background(背景)

color(文字色)

font-size(文字のサイズ)

float(左右の位置)

リンク
a

color(文字色)

text-decoration(文字の装飾)

表
table,th,tr,td

width(表やセルの巾)

margin(要素間の離れ)

padding(要素内の余白)

border(枠線)

このようなCSS言語で作ったファイルをCSSファイルとかスタイルシートと呼びます。

実戦的なCSSファイルの作り方は中級編で改めてお伝えしますので、スタイルシートの大雑把な概要だけ覚えておきましょう。