CSSとは【Webディレクターなら知っておきたい基礎用語】

CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、HTMLと同じようなマークアップ言語です。CSSはHTMLと違い、デザイン、装飾のために作られていて、HTMLのタグなどに対してどのような装飾をするのか、サイズ、色、フォントなどを指定することができる言語です。つまりWebページの見た目を整えるための指示言語だということですね。

HTMLはウェブページの土台、骨組みを作るものなのでCSSを使わずにHTMLだけでウェブページを作ってしまうと文字と画像だけが上から下に並んだ単調なページになってしまいますが、CSSを使うことで文字や背景の色の変更、余白の調整、カラフルな線を引いたりなど見栄えをきれいに、デザインやレイアウトを決めることができるのがCSSです。では早速見ていきましょう。

セレクタ・プロパティの理解がCSSの肝

CSSはセレクタ・プロパティ・値と呼ばれる３つの部分を埋めることにより、どこの・何を・どのような見た目に変えるのかを指定することができます。

セレクタにはどの部分のデザインを変えるのかというデザイン変更の適用先を指定することが必要で、タグ名やclass名、id名を書きます。

たとえば、pタグを指定すればpタグ内のデザインを変えるという指定になり、h1と書けばh1タグ内のデザインを変えるという指定になります。次にプロパティ、プロパティではセレクタで指定された部分の何を変えるのかを決めます。

例えば色を変えたい場合は色、線を引きたい場合は線、余白を調整したい場合は余白がプロパティに当たります。値ではどのように見た目を変えるのかを決めます。例えばh1タグの文字色を変えると指定したなら、値では何色に変えるのかを指定します。

現在はCSS3が最新バージョン

現在CSSはCSS３が最新バージョンとして使われています。前のバージョンに比べて新しいプロパティが追加され、デザインに動きを付けたりなど様々なことがcssだけでできるようになっていますが、基本的に書き方は変わらないので気軽に利用できると思います。

Webページの成り立ちを理解するうえで必要なhtmlについても以下を参照し、是非ご理解下さいね。