Repolode
投稿する
vladocar

vladocar/Sumi.css

クラスをほとんど使わずに素のセマンティックHTMLをスタイリングでき、ビルド工程なしで単一ファイルとして使えるミニマルなCSSフレームワークです。

GitHub で見る公式サイト
スター
128
フォーク
0
未解決の Issue
2
最終コミット
昨日

これは何？

Sumi.cssは、クラスなしのスタイリングを基本とするCSSフレームワークです。見出し、フォーム、テーブル、カード、アコーディオン、モーダル、ナビゲーションは素のHTML要素をもとにスタイリングされ、クラスが必要なのは個別の調整を行う場合だけです。圧縮・gzip後で約6.7 KBの単一ファイルとして提供され、JavaScriptも依存関係もありません。ダウンロードするか、jsDelivr CDNから読み込めます。

システム設定に従うライトモードとダークモードに対応し、data-theme属性でどちらかのモードを指定できます。色、フォント、サイズ、角丸は--s-で始まるCSSカスタムプロパティとして公開されているため、テーマを全体または要素ごとに調整できます。要素のスタイルは詳細度がゼロなので、!importantを使わずにカスタムCSSで上書きできます。

グリッドとフレックスのレイアウトクラス、aria-invalidによるフォームの検証状態、ローディングスピナー、ツールチップ、流動的な文字サイズのスケールも備えています。コンポーネントのリファレンスページと手順を追ったチュートリアルが用意されており、Chrome、Edge、Firefox、Safariの現行バージョンを対象としています。

主な機能

  • 01クラスを必要とせず、素のセマンティックHTML要素をスタイリングできます。
  • 02JavaScriptや依存関係のない単一のCSSファイルです。
  • 03ライトモードとダークモードを自動で切り替えられ、data-themeで上書きできます。
  • 04--s-で始まるCSSカスタムプロパティでテーマを設定できます。
  • 05詳細度ゼロの要素スタイルにより、簡単に上書きできます。
  • 06グリッド、フレックス、コンテナのレイアウトクラスを備えています。
  • 07フォーカスリング、ARIAの状態、動きを抑える設定など、アクセシビリティに対応しています。

ユースケース

  • ビルドパイプラインを使わず、静的サイト、ドキュメントページ、個人のホームページを手早くスタイリングする。
  • マークアップの変更を最小限に抑えながら、フォームやテーブルの多い社内ツールをプロトタイプする。
  • 手書きのHTMLがすでにあるプロジェクトに、一貫したテーマの見た目を加える。
  • 共通の色と余白のトークンを使って、カスタムコンポーネントを構築する。

クイックスタート

  1. 1

    sumi.min.css をプロジェクトにダウンロードします

  2. 2

    HTML の head 内でスタイルシートを読み込むか、jsDelivr CDN から読み込みます

使う前に知っておきたいこと

  • 最新の CSS 機能に依存しているため、古いブラウザーではホバー時やフォーカス時の色がシンプルに表示されます。

トピック

#css#css-framework#classless#minimalist#dark-mode#theming#responsive-design#css-grid

よくある質問

Sumi.css とは？
クラスをほとんど使わずに素のセマンティックHTMLをスタイリングでき、ビルド工程なしで単一ファイルとして使えるミニマルなCSSフレームワークです。 Sumi.cssは、クラスなしのスタイリングを基本とするCSSフレームワークです。見出し、フォーム、テーブル、カード、アコーディオン、モーダル、ナビゲーションは素のHTML要素をもとにスタイリングされ、クラスが必要なのは個別の調整を行う場合だけです。圧縮・gzip後で約6.7 KBの単一ファイルとして提供され、JavaScriptも依存関係もありません。ダウンロードするか、jsDelivr CDNから読み込めます。
Sumi.css は無料で使えますか？ライセンスは？
Sumi.css は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
Sumi.css は今もメンテナンスされていますか？
活発にメンテナンス中。Sumi.css の最終コミットは 2026年10月21日 です。
Sumi.css は何に使えますか？
ビルドパイプラインを使わず、静的サイト、ドキュメントページ、個人のホームページを手早くスタイリングする。 マークアップの変更を最小限に抑えながら、フォームやテーブルの多い社内ツールをプロトタイプする。 手書きのHTMLがすでにあるプロジェクトに、一貫したテーマの見た目を加える。 共通の色と余白のトークンを使って、カスタムコンポーネントを構築する。
Sumi.css のインストール方法は？
sumi.min.css をプロジェクトにダウンロードします HTML の head 内でスタイルシートを読み込むか、jsDelivr CDN から読み込みます
Sumi.css はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/vladocar/Sumi.css

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト