最近のウェブ界隈 〜CSS〜

こんにちは。
第3回は最近のウェブ界隈 〜CSS〜についてです。
CSSは、ウェブサイトで見ている色、配置、文字など、ページを構成するための要素を決めている重要なものになります。

CSSの歴史

簡単ですがCSSについての歴史ってどんな感じ？というところをまとめてみます。

ウェブ黎明期（1990-1993）

当初HTML文書はスタイリングの機能を持っていませんでした。
ウェブ創始者のティム・バーナーズ・リーという方が開発した初期のウェブブラウザでは、文書の見た目はブラウザが決定しており、この頃は文書構造とプレゼンテーションが分離されておらず、文書の見た目を変更する手段は限られていました。

CSSの誕生（1994-1996）

1994年、ホーコン・ウィウム・リーとバート・ボスが Cascading Style Sheets（CSS）の概念を提案しました。これは文書の構造（HTML）と見た目（CSS）を分離するという革新的なアイデアで、1996年12月、W3C（World Wide Web Consortium）が CSS Level 1（CSS1）仕様を勧告として発表しています。

CSS1は以下の機能を含んでいました：

• フォントプロパティ
• テキストの色と背景
• テキストの配置
• マージン、ボーダー、パディング
• 基本的な位置指定

CSS2の登場（1998-2000）

1998年5月、W3Cが CSS Level 2（CSS2）を勧告として発表しました。

CSS2では以下の機能が追加されました：

• 絶対位置指定、相対位置指定、固定位置指定
• Z-index によるレイヤリング
• メディアタイプ
• 双方向テキストのサポート
• 新しいフォントプロパティ

しかし、ブラウザの実装は不完全で一貫性がなく「ブラウザ戦争」時代には各ブラウザがそれぞれ独自の解釈でCSSを実装していて、ウェブデザイナーは様々なハックやワークアラウンドを使用してクロスブラウザ互換性を確保していました。

CSS2.1と標準化の努力（2000-2007）

CSS2の問題を解決するため、W3CはCSS2.1の開発を開始し、2004年に勧告候補となりました。

CSS2.1は以下を目指していました：

• CSS2の誤りの修正
• ブラウザの実装に合わせた調整
• 一部の実装が難しい機能の削除または変更

この頃はWeb標準運動が盛り上がり、標準に準拠したブラウザ実装の重要性が認識されるようになりました。

CSS3への移行（2005-2011）

CSSの開発アプローチが変わり、巨大な単一仕様ではなくモジュール化されたアプローチが採用され、これからは単一の仕様ではなく、複数のモジュールの集合として開発されるようになりました。

主要なCSS3モジュールが段階的にリリースされました：

• 2007年：Selectors Level 3
• 2009年：Media Queries
• 2011年：Color Module Level 3
• 2011年：2D Transforms
• 2012年：3D Transforms
• 2012年：Animations
• 2012年：Transitions

モダンブラウザの台頭とCSS3の実装（2008-2014）

Google Chrome ブラウザ（2008年）の登場と、Mozilla Firefox、Apple Safari、そしてMicrosoft Internet Explorer 9以降（2011年）の開発により、CSS3機能のサポートが大幅に向上しました。
ブラウザベンダーは新機能を実験的に導入するためにベンダープレフィックス（-webkit-、-moz-、-ms-、-o-）を使用し、これにより開発者は新機能を試しつつも、ブラウザ間の互換性を確保できるようになりました。

CSS3の完全普及とその後（2014-現在）

2014年頃からほとんどのモダンブラウザが CSS3 の主要機能をサポートするようになりました。Internet Explorer 11（2013年）も CSS3 機能の多くをサポートし、後に Microsoft Edge に置き換えられました。

CSS3 の主要な改善点には以下が含まれます：

• アニメーションとトランジション
• 複数の背景画像
• グラデーション
• テキストの影と円角（角丸）
• フレックスボックスとグリッドレイアウト
• メディアクエリによるレスポンシブデザイン
• 変数（カスタムプロパティ）
• カラーグラデーションと透明度

現代のCSS開発

CSS開発は「CSS3」という単一のバージョンのコンセプトから離れ、継続的に発展するモジュール化されたアプローチへと移行しました。

現在、CSSには以下のような新技術が含まれています：

• CSS Grid Layout
• CSS Custom Properties (変数)
• Flexbox
• CSS Shapes
• CSS Containment
• CSS Houdini（ローレベルAPI）

この歴史的発展により、CSSは単純なスタイリング言語から、複雑なレイアウト、アニメーション、視覚効果を制御できる強力なツールへと進化しました。ウェブ標準とブラウザの実装の改善により、かつて必要だった多くのハックやワークアラウンドは不要になり、より直感的なウェブデザイン開発が可能になりました。

Tailwind CSS

CSS3で刷新された状況の中でさまざまなフレームワークも出てきましたが、現在モダンスタックで使用頻度が高く覚えておくと良いのがTailwind CSSです。

概要

Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、2017年にアダム・ワタンによって作成されました。従来の Bootstrap や Foundation などのフレームワークとは異なるアプローチを取っており、ウェブ開発の方法に革新をもたらしました。

基本概念と特徴

ユーティリティファーストのアプローチ

Tailwind CSSは、あらかじめ定義された小さなユーティリティクラスをhtml要素に直接適用することで、CSSを記述することなくスタイリングができます。例えば

<div class="flex items-center justify-between p-4 bg-blue-500 text-white rounded-lg shadow-md">
  <!-- コンテンツ -->
</div>

このアプローチにより、新しいCSSファイルを作成せずに直接html内でデザインを構築できます。

Tailwind CSSの利点

1. 開発速度の向上：CSSファイルを作成・管理する代わりに、htmlに直接クラスを追加するだけでスタイリングできるため、開発プロセスが速くなります。
2. 一貫性の維持：事前に定義された値のセットを使用するため、デザインの一貫性を保ちやすくなります。例えば、mt-4 は常に同じマージントップを表します。
3. ファイルサイズの最適化：本番環境ではPurgeCSSと組み合わせて使用することで、実際に使用されているクラスのみを含む最小限のCSSファイルを生成します。
4. チーム開発での利点：クラス名の命名に関する議論が減り、コンポーネント間のスタイルの競合も少なくなります。

Tailwind CSSは従来のCSSアプローチとは異なりますが、開発効率、一貫性、カスタマイズ性のバランスを取りながら、モダンなウェブ開発のニーズに対応しています。特に小〜中規模のプロジェクトや、迅速に開発する必要があるプロジェクトで高い効果を発揮します。

ただし、htmlが長くなりやすい点や、最初の学習曲線がやや急な点はデメリットとして挙げられます。それでも、一度使い方を理解すれば、従来のCSS記述方法よりも効率的にスタイリングができるようになるでしょう。

以上です、次回もよろしくお願いします。