CSSとは？Webデザインの基本

ざっくりと

CSS（Cascading Style Sheets）＝ カスケーディングスタイルシート

CSSはWebページを美しくデザインするスタイルシート言語です。

概要説明

CSSはWebデザインのツール。なぜなら色、フォント、レイアウトなどを制御できるから。

例えば、背景色を青にしたり、フォントを大きくしたりできる。そして、これによりユーザー体験は大幅に向上する。

つまり、CSSはWebページを自由自在にカスタマイズできる道具である。だから、美しいWebページを作るためにはCSSが必須。

職業・職種

プログラミング言語ではなく、スタイルシート言語です。

そしてHTMLはマークアップ言語。

企業・製品

•  Adobe Systems
  Adobe SystemsはCSSの普及に貢献した企業。なぜなら、DreamweaverというWebデザインツールを開発したからだ。例えば、これによりデザイナーはCSSを視覚的に操作できるようになった。
•  Google
  GoogleはCSSを活用したサービスを提供。なぜなら、Google Web FontsというWebフォントのライブラリを提供しているからだ。例えば、これを使うとWebページに豊かなフォントを追加できる。
•  エリック・マイヤー
  エリック・マイヤーはCSSのエキスパート。なぜなら、CSSの普及と標準化に対して貢献した人物だからだ。例えば、彼は多くのCSS関連の書籍を書いている。

手順例

類似語

• SASS
  SASSは、CSSの拡張言語である。なぜなら、変数やネスト、ミックスインなどを使用でき、CSSよりも効率的にスタイルを記述できるから。例えば$font-size: 16px;。
• LESS
  LESSは、CSSのプリプロセッサ言語である。なぜなら、変数やネストなどの機能を利用でき、CSSの再利用性と可読性を向上させるから。例えば@color: #4D926F;。
• Stylus
  Stylusは、CSSのプリプロセッサ言語である。なぜなら、Pythonのようなインデントによるスコープ定義や、変数の使用などを可能にし、CSSよりも柔軟な記述を可能にするから。例えばfont-size: 12px;。

反対語

• インラインスタイル
  インラインスタイルは、CSSの反対語である。なぜなら、HTMLの各要素に直接スタイルを記述する方法であり、CSSの原則である「スタイルと構造の分離」に反するから。例えば、<div style="color: red;">。
• ハードコーディング
  ハードコーディングは、CSSの反対語である。なぜなら、特定の値を直接コード内に記述する方法であり、CSSのように一箇所で変更を行えば全体に反映するという効率性がないから。例えば、各HTML要素に直接スタイルを適用すること。
• テーブルレイアウト
  テーブルレイアウトは、CSSの反対語である。なぜなら、レイアウトをテーブル要素で制御する古い方法であり、CSSによる柔軟なレイアウト制御には対照的だから。例えば、<table>を用いたページレイアウト。

会話例

注意点