シンプルなHTMLで、レスポンシブとライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリ -matcha.css
Post on:2024年6月11日
sponsors
シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。
シンプルなWebページやポートフォリオ、プロトタイプなどをすばやく作成したい時に便利で、ベースにしてリセットCSSの拡張版としても利用できます。
matcha.cssの特徴
matcha.cssは、classレスでHTMLのあらゆる要素にシンプルで読みやすいスタイルを設定するように設計されたCSSライブラリです。ライト・ダークモード対応で、テキストはユーザー設定が尊重された適切なスペースで配置され、ナビゲーションやフォームなども非常に見栄えがします。
HTMLで作成された静的ページ、高速プロトタイピング、Markdownで生成されたドキュメントなど、面倒なCSSのワークフローを合理化し、利用可能なHTML要素を活用したいデベロッパーに最適です。
- 簡単に使用できます（ビルドの手順はなし）。
- 依存関係はありません。
- JavaScriptも必要ありません。
- 設定は不要です。
- リファクタリングも不要です。
- gzip圧縮で8.82KBと超軽量。
ライセンスはMITライセンス、個人でも商用プロジェクトでも無料で利用できます。
matcha.cssのサポートブラウザは、デスクトップとスマホの主要ブラウザすべてです。
matcha.cssの使い方
matcha.cssの使い方は、簡単です。
使用するHTMLページに外部ファイルとしてmatcha.cssを設定するだけです。
|
1 2 3 |
<head> <link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css"> </head> |
npmやnpmパッケージを配布するCDNサービスでも利用できます。
ホストされているmatcha.cssは、サブディレクトリも利用できます。たとえば、デフォルトのビルドやカスタムビルドを使用せずに@syntax-highlightingを含める場合は、下記のように記述します。
|
1 2 3 |
<head> <link rel="stylesheet" href="https://matcha.mizu.sh/styles/@syntax-highlighting/mod.css"> </head> |
matcha.cssで利用できるCSSファイルは、下記の通りです。
- Default: matcha.css(8.82kB)
- Lite: matcha.lite.css(5.59kB)
- Utility classes: matcha.utilities.css(3.41kB)
- Istanbul coverage: matcha.istanbul.css(1.94kB)
matcha.cssのデモ
matcha.cssのサイト自体がmatcha.cssで実装されています。ライト・ダークモードの切り替えは、上部から。
「Preview a Website」では、URLを入力して任意のWebページにmatcha.cssを適用することもできます。下記は当ブログをmatcha.cssにしたものです。
matcha.cssにどのようなスタイルが用意されているか見てましょう。
matcha.cssには、レスポンシブに対応したレイアウトが用意されています。
ナビゲーションは、menuとnavが用意されており、menuを入れ子にするとサブメニューが生成されます。
セクションもすべてレスポンシブ対応で、headerやfooterをはじめ、sectionやarticleやasideも用意されています。
見出しは下線があるスタイルで、hngroupで左端にボーダーが表示されます。
フローはpなどのテキストやfigureなどの画像を成り行きに配置するもので、デフォルトでは適切なスペースが確保されるようになっていますが、スペースなしとかも簡単に設定できます。
フォームに使用されるさまざまな要素のスタイルも用意されています。
メディアはimgの画像をはじめ、videoの動画やiframeもサポートしています。
ユーティリティは利便性を高めるユーティリティのクラスが用意されています。
@media (prefers-color-scheme)を尊重し、highlight.jsと完全に互換性のある構文強調表示クラスも用意されています。
sponsors
