• プログラミング

CSSの歴史を知る

前記事『マークアップの由来と歴史と役割を解説。HTMLの起源を知ろう』ではマークアップ＝HTMLの歴史を学びましたね。

今回はHTMLと双璧をなす「CSS」の歴史について解説していきます。

プログラミングの学習、エンジニアのキャリアをスタートした以上は一生お付き合いする言語になるので、HTMLと並んでその誕生の背景をつかんでおきましょう。

CSSの誕生はいつ？

CSSとは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略。

CSSは1994年、WWW（World Wide Web）生誕の地である欧州原子核研究機構（CERN：Conseil Européen pour la Recherche Nucléaire）に勤務するホーコン・ウィウム・リーにより提唱されました。

（ホーコン・ウィウム・リー氏：wikipediaより画像引用）

ホーコン氏はウェブブラウザでも著名な「Operaソフトウェア」の最高技術責任者でもあります。

CSSの特長は？

CSSはWEBサイトの「見栄え」担当。もうちょっと専門的に言うと「スタイル」を指定するための言語です。

HTMLやXMLのコードをどのように装飾するかの役割を持ちます。

CSSはHTMLと組み合わせて使う言語で、ページを表示するメディアにあわせてその表示を変化させることができる。

HTMLだけでは素っ気ないテキストの羅列になってしまうところを、CSSが組み合わさることで色・サイズ・レイアウトなどの見栄えが加味され、デザイン性や機能性がアップするんですね。

HTMLはあくまで文書の構造を担う役目であり、HTMLだけで装飾を施そうとすると文書構造が乱れます。また、ブラウザごとに異なる表示になる危険性も。

そこで、CSSの登場です。

CSSで見栄えを制御することで、ロジカルで正しい構造のWEBサイトを作ることができるんです。

CSSの仕様は「Level」で

HTMLはアップデートによる変化を「バージョン」で呼びますが、CSSは「レベル（Level）」で区分けされます。

その「レベル」ごとのCSSのアップデートの軌跡を見てみましょう。

1996年：Level 1（CSS 1）

フォントの装飾変更やホームページの背景、テキストやリスト、ボックスのプロパティが指定可能。

1998年：Level 2（CSS 2）

CSS1の上位互換がこの「Level2」です。表示する媒体によって自動的にスタイルシートを変更にできるようにするなどの改良が加えられた。仕様書の定義が不明瞭であったことから、実用的ではないという結果に。

2011年：Level 2.1（CSS 2.1）

Level2の改訂版。ユーザー側で相互運用を認められなかった機能は削除され、汎用性の高い言語へと進化。具体的には「音声ブラウザの対応」「自動スタイルシート変更」」「印刷用端末への対応」など。

Level 3（CSS 3）

「モジュール（まとまり）」といった概念が導入され、ユーザーはモジュールを選択可。2018年時点で15のモジュールが公開中。2021年時点ではほとんどのWEBサイトがこのLevel3のCSSを使用している。

Level 4（CSS 4）

2021年時点において、Level3のモジュールでも勧告に至ってないものも数多く、あくまでLevel4は草案段階。いくつかの草案はすでに公開中。

CSSの書き方は？

CSSはマークアップ文書の中に直接記述することもできますが、スタイルシート言語の特長を最大限に活かすため、別ファイルで展開することが推奨されています。

無理やりHTMLに記述すると文書構造的にもおかしくなるため、別にCSSファイルを作成し、取り扱いましょう。

別記事『CSSとは？「基本の書き方」と「6種のセレクタ」を覚えよう。』では、CSSの基本の書き方やCSSの特性である「セレクタ」についても紹介していますので、基本構造やセレクタについて知りたい方はチェックしてみてくださいね。

CSSを実際に書いてみよう

CSSは単位ではその機能を発揮しきれません。そのため、HTMLとの組み合わせで覚えていくと、相互の互換性を俯瞰できます。

別記事『【初心者向け実践】HTMLとCSSの環境構築「8つの手順」』では演習として、HTMLとCSSの基礎的な使い方を紹介しています。

実際に手を動かしてマークアップ言語とスタイルシート言語を扱ってみましょう。

自分が使う言語の歴史を知る重要性

今回のCSS，またHTMLやその他の言語でもそうですが「いま自分はどんな言語を扱っているのか」を知るのはとても大事なことです。

たった5分、10分でもその言語の誕生の背景や現在のステイタスを把握しているだけで知見が広まります。

例えば本記事を読んだ後ならば「Level3」のCSSで新たなモジュールが勧告されれば「新しいのが追加されたんだな、どんなものだろう？」と反応ができますね。

増してやCSSがもし「Level4」に正式にアップデートされW3Cからの勧告が出た際には、いったいそのニュースがどれだけのインパクトであるかもわかるでしょう。しかしこれも、知識がなければ1ミリも驚くことはできませんよね。

ITに明るくなる、詳しくなるというのは「情報の積み重ね」。情報に敏感になるには、まず下地の基本を知らなければなりません。その下地が、今回のようなお話なんですね。

単純に初心者が「プログラミングの情報についてアンテナを立てよう」というのは無理があります。まだ、そもそもの下地がないからです。そのため、アンテナを立てるためには「基礎的な理解＝基本情報」が必要となってきます。

CSSやマークアップの歴史を学ぶというとなんだか大層にも聞こえますが、これらは受験勉強のような詰め込み型の暗記モノではなく、あくまで「実務にも間接的に活きてくる基本情報」として捉えておきましょう。

本記事のシリーズとしてHTMLの歴史や役割について解説した『マークアップの由来と歴史と役割を解説。HTMLの起源を知ろう。』もチェックしていない方は、ぜひそちらも目を通しておくと良いです。

メンターを「借りて」手堅い学習法を

当サイト「メンタレ」は、メンターを「一時レンタル」できるサービス。

質問だけOKというのではなく「いまのあなたが求める講座」をメンターが実施します。

弱点補強や基礎の復習、応用課題などご要望は人それぞれ。

途中の挫折率が非常に高いプログラミングだからこそ「メンタレ」を活用してみてください。メンタレならではの手堅いレッスンで上手に成長していきましょう。

独学だけどピンポイントで活用したい方、これからプログラミングを学ぼうと思っている方、迷っているが少しは試したい方、自分は文系だからと敬遠している方などなど、まずはお気軽にご相談ください。