CSS
Web ページの見た目を定義する言語。レイアウト・色・装飾を担う
CSS とは
CSS (Cascading Style Sheets) は、Web ページの見た目を定義するための言語だ。HTML が文書の「構造」を表すのに対し、CSS は色・フォント・余白・レイアウトといった「装飾と配置」を担う。構造と見た目を分離することで、同じ HTML に異なるデザインを適用したり、デザインだけを一括変更したりできる。
役割分担
| 言語 | 担当 |
|---|---|
| HTML | 文書の構造・意味 |
| CSS | 見た目・レイアウト |
| JavaScript | 動き・振る舞い |
この 3 つが役割を分け合うことで、Web ページは成り立つ。構造と装飾を分けるのは、保守性を高めるための基本原則だ。
進化したレイアウト
かつて CSS でのレイアウトは技巧的で難しかったが、Flexbox や Grid といった仕組みの登場で、複雑な配置を宣言的に記述できるようになった。画面サイズに応じて見た目を変える「レスポンシブデザイン」も、CSS の機能で実現する。古い知識のまま CSS を語ると、現在の効率的な手法とずれる点に注意したい。
学ぶうえでの勘所
CSS は「とりあえず見た目が整う」までは易しいが、大規模になると管理が難しくなる言語だ。スタイルが意図せず他の箇所に影響する、上書き関係が複雑化する、といった問題が起きやすい。命名規則やコンポーネント単位での管理など、破綻を防ぐ設計が重要になる。また、アクセシビリティ (文字の見やすさ、コントラスト) への配慮も、見た目を扱う CSS の責任範囲だ。見た目を整えるだけでなく、誰にとっても使いやすいページを目指したい。
学習には関連書籍が役立つ。
この記事は役に立ちましたか?
関連用語
HTML
Web ページの構造を記述するマークアップ言語。Web を成り立たせる基礎技術
フロントエンド
ユーザーが直接触れる画面側の開発領域。ブラウザ上の見た目と操作を担う
JavaScript
Web ブラウザで動作する言語として生まれ、今やサーバーやアプリ開発まで担う汎用言語
CSS Grid
2 次元のグリッドレイアウトを宣言的に定義する CSS のレイアウトシステム
CSS Modules
CSS ファイルのクラス名を自動的にスコープ化し、名前衝突を防止する CSS のモジュール化手法
Tailwind CSS
ユーティリティファーストの CSS フレームワークで、クラス名の組み合わせでスタイルを構築する