こんにちは。
inglowの開発担当です。

今回は、cssフレームワークの新勢力「mvp.css」を試してみましたのでまとめました。

mvp.cssって？

「mvp.css」は、classを使用しないシンプルなcssフレームワークです。
現在代表的に使用されている「bootstrap」では、たくさんのクラスが設定されており、いろんなレイアウトデザインのコーディングが柔軟にできるようになっています。
しかし、bootstrapはクラスの命名規則が多く、使いこなすのに少し前勉強が必要でした。
mvp.cssでは、クラスでの定義はなく、css変数も駆使して最小限でシンプルにコーディングができるフレームワークになっています。

導入

さっそくmpv.cssを導入してみましょう！
といっても、公式サイトからダウンロードし、HTMLにcssを読み込むだけでOKです。

1. 公式サイト「https://andybrewer.github.io/mvp/」にアクセスします
2. 「MVP.css」と書いてある青いボタンがありますので、クリックします。ファイルのダウンロードが始まります。
3. HTMLに読み込みをします

<link rel="stylesheet" href="./css/mvp.css">

以上で導入は完了です！さっそくコーディングしてみましょう

さっそくコーディング！

本当にシンプルです。まずはヘッダー部分を作ってみます。

headerタグの中にnavタグをいれ、その中にロゴ用のリンクとulを入れました。
クラス名を指定することなく、よく見るヘッダーメニューが完成しました。
次はコンテンツ部分をいろいろ試してみます。

よく使う要素を試してみました。

ボタンっぽいみためのリンク

よく見るボタンっぽい見た目のリンクは、aタグの中にstrongタグでテキストを囲います。
また、白抜きデザインのリンクは、aタグの中にiタグでテキストを囲うことで表示できます。

テーブル

普通に、普段つかうtableタグを使用するだけです。
一番上のtdの部分は、theadタグで囲います。

ここまでクラスをまったく指定していませんが、きれいな見た目のページが作成できています…！！

リセットcssとして使ってみる

mvp.cssをベースにシステム画面っぽいものを試しに作ってみました。
使用したクラスはすべて自分で追加したものと、font-awesomeを使用しました。

aタグの中のiタグにスタイルが当たっている関係ですこしfont-awesomeのためにcssを自分で上書きする必要がありました…。
まだまだ調整が必要が部分はありますが、すっきりとしたみためのものがそこまで悩まず作成できました。

さいごに

font-awesomeと併用する際に少しテクニックが必要ではありますが…。
基本的なHTMLタグをしてッていればある程度ととのったサイトがぱぱっと作れることと、mvp.cssのファイル自体が軽量でいいなと思いました。
ドキュメントも簡単なものだけなので、自分なりに試してみて活用の仕方をマスターしていきたいと思います
興味をもたれた方はぜひ一度試してみてください