【CSS】スタイルシートとは

CSS

WEBサイト制作にかかせないCSSとは簡単に言えばブラウザに表示される見た目を装飾する設定です。正式にはCSS（Cascading Style Sheets／カスケーディング・スタイル・シート）という名称ですが、普段は「シーエスエス」や「スタイルシート」と読まれています。

CSS単体では機能しなく、必ずHTMLと合わせて利用されます。流れとしてはHTMLの開発が先で始めは原始的なWEBページでしたが、CSSの登場と共にWEBサイトがどんどん進化していきました。

今もCSSは開発が進んでおり日々新しい指定方法が増えたりしています。

CSSの導入例

まずはCSSが使われていないHTMLのサンプルを見てみましょう。

See the Pen
ただのHTML文 by pecoegg (@pecoegg)
on CodePen.dark

特徴のない普通の文章ですね。CSSは使っているブラウザの中にも入っているので、上記のテキストはブラウザ毎に多少違って見えます。

では上記のHTMLにCSSを指定してみます。

See the Pen
ただのHTML文にCSSを適用 by pecoegg (@pecoegg)
on CodePen.dark

HTMLそのものは何も触っていませんがこのように装飾をつけることができます。今回は非常に単純なことしかやっていませんがアニメーションを付けたりなども可能です。

CSSは見た目を調整するだけ

CSSはプログラムではありません。完全に見た目だけを調整するためだけのスタイルシート言語です。Wordなどのテキスト作成アプリで文字サイズを変えたりした経験がある方もいると思います。それを手書きで指示する感じです。CSSで習得するために必要なのはCSSの記述の仕方とデザインや機能に必要なCSSプロパティを使えるようになることです。

CSSの記述は非常にシンプルなものですが、アニメーションを付けたりメニューの開閉などユーザーの操作に合わせたアクションなども作ることが可能です。複数のCSSのプロパティを組み合わせて感心するような独特の作り方をされる方もいます。

シンプルだけれどもかなり複雑なことができてしまうため難しい部分があるのも事実です。しかし基本的なことは非常に簡単で１〜２日もあれば習得できるレベルのものでもあります。

CSSの習得はプログラマーにも重要

WEBページはPHPを始めとするプログラミング言語で組まれることも多々あります。プログラムほど難しくは無いですがJavaScriptと呼ばれる非常に便利なスクリプト言語もよく使われます。昔はCSSでできなかったことをプログラムやスクリプトで補っていたのですがCSSの進化のおかげでCSSだけで完結できることも多くなってきました。

CSSだけで完全に実現できるわけではないですが、プログラミングやスクリプトにCSSも導入することで非常に楽に実現できるようになることがあります。そのためプログラマーを目指す人もCSSの基本的なことは抑えておけば開発する上で有利に働きます。