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

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

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

クラスレスの超軽量CSSフレームワーク -Simple.css

Simple.css
Simple.css -GitHub

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だけの表示

HTMLだけの表示

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

デモのキャプチャ

外部ファイルを記述

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

サイトのキャプチャ

ドキュメント: Simple.css

sponsors

top of page

©2022 coliss