必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css

用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。

また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。

MVP.css
MVP.css -GitHub

• MVP.cssの特徴
• MVP.cssのデモ
• MVP.cssの使い方

MVP.cssの特徴

MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。

• 用意するのは、HTMLだけ

  MVP.cssはHTMLの各要素にスタイルを与えるので、すぐにWebページが完成します。
  CSSの他のフレームワークや命名規則を学ぶ必要はありません。

• モバイルフレンドリーのUI

  MVP.cssはすべてのブラウザとデバイスで見栄えするようにデザインされています。CSSリセットの拡張版みたいなもので、さまざまなプロジェクトで利用できます。

• MITライセンス

  MITライセンスでリリースされているので、個人でも商用のプロジェクトでも自由に無料で利用できます。

MVP.cssのデモ

デモページでは、MVP.cssを使用したページを楽しめます。

MVP.cssのデモページ

ナビゲーション・ボタンをはじめ、カード、フォーム・アコーディオン・テーブルなど、シンプルなHTMLで実装されたコンポーネントがクリーンなデザインで表示されています。

MVP.cssのデモページ

MVP.cssの使い方

使い方は、簡単です。
使用するページに外部ファイルを一行加えるだけです。
mvp.cssは、下記の記述だとHTMLファイルと同じ階層に設置してください。

例えば、リンク要素（<a>）だと、下記のようになります。

• <a>は、通常のテキストリンク
• <a><strong>は、ソリッドのボタン
• <a><em>は、アウトラインのボタン

各要素がどのようにスタイルされるかは、一覧をご覧ください。

MVP.cssがサポートするHTML要素の一覧

カスタマイズにも対応しています。
CSSの変数を編集すると、スタイルがグローバルに変更されます。