Web Survive

Webで生きる道を模索するブログ

CSSとは

Webページの見た目を設定するための言語が「CSS」です。
セレクタやプロパティの役割をきちんと押さえることはもちろん、
基本的な考え方や仕組みをしっかりと理解することが、
効率的・効果的なスタイル設定に不可欠です。
ほかの人にもわかりやすい設計や書き方を意識することが、
メンテナンス性の向上にも役立ちます。

CSSとは

HTMLで制作したWebページは、
そのままでもデバイスやブラウザで表示できますが、
CSS(Cascading Style Sheets、カスケーディングスタイルシート)を利用することで、
見た目を詳細に設定することができます。
スタイルシート言語にはいくつか種類があるのですが、
Webデザインの世界で「スタイルシート」といえば「CSS」を指すのが一般的です。

建物を例に例えてみましょう。
HTMLは「骨格や外壁などハードな部分」を、
CSSは「壁の色、入り口の照明、周りに植える木などの部分」を担当します。

いわば、HTMLは「コンクリート打ちっぱなしの建物」であって、
たくさんの人々が魅力的に感じる建物ではありません。
そこで、CSSを利用して見栄えのよい建物にするのおです。
もちろん単に派手に装飾すればよいわけではなく、
利用する人が心地よく感じるような建物にすることが大切です。

CSSの仕組み

css-about-example

Webページの大半はコンテンツにあります。
しかし、単にHTMLを構造化しただけのページでは、内容が理解しにくかったり、
使いにくいことがほとんどです。
コンテンツの範囲が色分けされていないので、
どこからどこまでが何の内容なのかわからなかったり、
クリックできる部分がどこなのかすぐに判断できなかったり、
文字のサイズや色にメリハリがなく単調に感じたり、といったことです。

このように、見た目は「読みやすさ」や「使いやすさ」にも大きく影響します。
ほかの人に利用してもらってはじめて、
webページとしての価値が生まれるのですから、
常にユーザーの立場で適切なデザインを考え、
CSSでスタイリングすることが大切です。

Webサイトはたくさんのページで構成することがほとんどでしょう。
この場合、ページごとにCSSを用意する必要はなく、
1つのCSSファイルを全てのページに適用できます。
「すべてのページの背景色を変更したい」という場合でも、
CSSをたった1行変更するだけで済むのです。

CSSファイルの分割

css-about-file-divide

実務的には、CSSを複数のファイルに分けて制作し、
読み込み専用のCSSファイルを用意してHTMLに適用する方法がよく利用されます。

1枚のCSSファイルにソースコードが500行も1000行も書いてあると、
見通しが悪くなって管理しにくいからです。