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

Post on:2020年3月30日

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ファイルと同じ階層に設置してください。

<html>
  <head>
    <link rel="stylesheet" href="mvp.css">
  </head>
<body>
  ...
  コンテンツ
  ...
</body>
</html>

<html>

<head>

</head>

<body>

...

コンテンツ

...

</body>

</html>

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

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

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

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

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

:root {
  --border-radius: 5px;
  --box-shadow: 2px 2px 10px;
  --color: #118bee;
  --color-accent: #118bee0b;
  --color-bg: #fff;
  --color-bg-secondary: #e9e9e9;
  --color-secondary: #920de9;
  --color-secondary-accent: #920de90b;
  --color-shadow: #f4f4f4;
  --color-text: #000;
  --color-text-secondary: #999;
  --hover-brightness: 1.2;
  --justify-important: center;
  --justify-normal: left;
  --line-height: 150%;
  --width-card: 285px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
}