シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css

その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。

シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。

Simple.css
Simple.css -GitHub

• Simple.cssとは
• Simple.cssのデモ
• Simple.cssの使い方

Simple.cssとは

Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。
MITライセンスで、商用プロジェクトでも無料で利用できます。

classのないプレーンなHTMLを使用しているからといって、便利な機能がないという意味ではありません。

• 見栄えが良いサンセリフのローカルフォントスタック
• タイポグラフィのベストプラクティス
• ダークモードへの自動切り替え
• レスポンシブに完全対応
• 標準的なHTML要素をフォーマットするデフォルト
• 4kB以下の超軽量サイズ

先日、v2.0にアップデートされました！

Simple.css Version 2

主な変更点は、下記の通り。

• 古いdisplay: block;をやめて、CSS Gridを採用（これによりレスポンシブが向上、全幅コンテンツのハックもなしに）
• スタイルシート全体を整理し、シンプルに
• UI/UXの微調整を行い、全体的に改善

CSSファイルはv1を個別に公開したので、必要に応じてプロジェクトで引き続き使用できます。HTMLの構造を変更する必要のある変更は加えられていない、とのことです。

Simple.cssのデモ

デモでは、HTMLのさまざまな要素のスタイルを確認できます。

デモページ: Simple.css: 基本のタイポグラフィ

デモページ: Simple.css: リンクとボタン

デモページ: Simple.css: その他のテキスト関連・インラインコード・キーボード

デモページ: Simple.css: ナビゲーション

デモページ: Simple.css: アコーディオン、テーブル

デモページ: Simple.css: フォーム

ショーケースでは、実際にローンチされているサイトが掲載されています。

ショーケース: Simple.css

Simple.cssの使い方

Step 1: HTML

HTMLを用意します。

Step 2: 外部ファイル

あとは、当スタイルシートを外部ファイルとして記述するだけです。

Step 1のHTMLだけの時は、下記のように表示されます。

HTMLだけの表示

これに外部ファイルを記述するだけで、下記のように表示されます。

外部ファイルを記述

さらに詳しくは、下記のドキュメントをご覧ください。

ドキュメント: Simple.css