MVP.css

当サイトで使用しているクラスなしCSSフレームワーク「MVP.css」について。

【v1.6対応版】

Go Back Home

Japanese media

コリス 2020/03/30

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

日本ではまずコリスが「必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css」という見出しで紹介しました。

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

このニュース記事には、はてなブックマークが現時点で330usersと大きな反響があり、おもに「一行加えるだけ」という見出しが悪いことについてツッコミが入っています。

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

はてなブックマークのコメントの中で見落としてはいけないのが、「MVP志向なデフォルトCSSライブラリなのにコンセプトがまったく伝わってない」という指摘です。

MOONGIFT 2020/04/19

MVP.css - 素のHTMLでもいい感じの表示に | MOONGIFT ↗

MVP志向とは？　MOONGIFTの記事を引用します。

“いきなり大掛かりなサービスを作るのではなく、ミニマムなコンセプトが分かる小さなモデルを作ってみる、それがMVP（Minimum Viable Product）と呼ばれる考え方です。MVPで仮説検証を行い、確信してからサービス開発に入ると失敗が少なくなります。”

MVP.cssを使っていくとさまざまな問題にぶつかりますが、本記事では修正方法についてあえて深追いしていない箇所がいくつかあります。それは私の未熟さもありますが、このCSSフレームワークが短時間でコンセプトモデルを作るMVP開発のために作られたものであるということを忘れてはならないと思ったからです。GitHubで作者に改善要望を出す場合にも注意が必要でしょう。

かちびと.net 2020/03/26

classやidを使わないセマンティックなHTMLによるWeb開発をサポートするスタイルシート・「MVP.css」 | かちびと.net ↗

かちびと.netではMVP志向というコンセプトを抜きに、CSSフレームワークとしての特徴のみを簡潔にまとめています。

“MVP.cssはclassやidを使わないセマンティックなHTMLによるWeb開発をサポートするスタイルシートです
（中略）
この手のCSSやフレームワークは他にもありますがMVP.cssではCSSカスタムプロパティが採用されているので極力コードも少なく設計されています”

このように、classやidを使わないCSSフレームワークは「No-Class CSS Frameworks」（クラスなしCSSフレームワーク）と呼ばれ、海外にまとめ記事があります。

No-Class CSS Frameworks | CSS-Tricks ↗

既存のクラスなしCSSフレームワークと比較すると、MVP.cssはトップナビゲーションや流行りのアウトラインボタン、Flexbox対応のカードなど見栄えの良さが特徴と言えます。

ただ、tacit ↗をのぞいて長期間メンテナンスが停止しているものが多く、MVP.cssもいずれそうなってしまうのでは？　という不安はあります。

ミニマムなCSSフレームワークなので大きな問題はないでしょうけれど。

Webクリエイターボックス 2020/05/11

CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ | Webクリエイターボックス ↗

MVP.cssが話題になったことで、日本でもクラスなしCSSフレームワークをまとめるメディアが出てきました。

この記事では、同一のHTMLが5種類のクラスなしCSSフレームワーク（Water.css、MVP.css、Writ、Sakura、Tacit）でどのように表示されるのかCodePenを使って比較していますが、トップナビゲーションなどMVP.cssだけが対応しているタグもあり、ややMVP.css贔屓な内容です。

“BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK！学習コストもかからずとっても便利です。”

クラスなしCSSフレームワークは学習コストが下がるだけでなく、MVPから本格的な開発に移行する際、クラスなしCSSフレームワークに手を加えながら使い続けるにしても、別のCSSフレームワークに切り替えるにしても、全く新規にWebデザインを制作するにしても、HTMLをほぼそのまま利用可能であるという特徴があります。

そのためクラスなしCSSフレームワークは見た目も重要ですが、よりセマンティックなコーディングができるかどうかが選択のカギとなるでしょう。

Web Design Trends 2020/06/09

2020年版：おすすめの人気CSSフレームワークと特徴の総まとめ | Web Design Trends ↗

この記事では、2020年おすすめのCSSフレームワークは「しっかりスタイリングするためのCSSフレームワーク」と「最低限のデザインを整えるためのCSSフレームワーク」に分けられ、後者にはクラスなしCSSフレームワークを含み、その一例としてnew.cssやMVP.cssを取り上げています。

“HTMLのタグの本来の使い方とは少し離れてしまっていますが、クラス名を考えずに最低限のデザインを整えられるという点では便利かもしれません。”

inglow 2020/04/14

CSSフレームワークの新勢力「mvp.css」を試してみました | inglow ↗

名古屋のマーケティングオートメーション・Webプロモーション専門会社inglowは、MVP.cssの作例としてシステム画面を掲載しています。サブメニューなどのクラスとFont Awesome ↗を追加しており、コーディングの参考になるでしょう。

MVP.cssはCSSリセットとしても使える？

さて、コリスでは「CSSリセットとしても使える」ような紹介がありました。

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

これは大いに疑問です。詳しくは後述しますが、例えばMVP.cssは現時点で定義リストタグ（dl・dt・dd）に対応していません。

もちろんCSSリセットが100種類以上あるHTML5タグのすべてに対応しているわけではありませんし、MVP.cssが対応していないタグは使えないというわけでもありませんが、よく使うタグでもデザインされていないものがあるということに留意しておいたほうがよいでしょう。

Getting started

Official Site ↗ GitHub ↗ Official Twitter ↗

MVP.css公式サイトにはHTMLテンプレートが用意されており、すぐにWebサイト制作に取り掛かることができます。

公式HTMLテンプレート ↗

ただし、v1.6からMVP.cssの参照先が相対パスに変更されたため、ダウンロードしたHTMLテンプレートはそのままでは使えなくなりました。

（おそらく、前述の「一行加えるだけ」に公式が反応したものと思われます）

CSSをダウンロードする場合はパスを適宜書き換えてください。MVP.cssの最新版ダウンロードはこちら。

MVP.css最新版 ↗

CDNを利用する場合は、次のようにコードを書き換えてください。

<link rel="stylesheet" href="./mvp.css">
⇩
<link rel="stylesheet" href="https://unpkg.com/mvp.css">

また、HTMLテンプレートは<html lang="en">（英語）なので<html lang="ja">（日本語）への変更をお忘れなく。

💡 Tips

MVP.cssではCSSカスタムプロパティ（変数）を採用しており、:root内の変数値を変更するだけでサイト全体の色やデザインを簡単に変更することができます。

Example
					
:root {
    --border-radius: 5px; /* 角丸 */
    --box-shadow: 2px 2px 10px; /* 影 */
    --color: #118bee; /* 基調色（青） */
    --color-accent: #118bee15; /* 基調色（透明度21％） */
    --color-bg: #fff; /* 背景色1（白） */
    --color-bg-secondary: #e9e9e9; /* 背景色2（銀） */
    --color-secondary: #920de9; /* 主調色（紫） */
    --color-secondary-accent: #920de90b; /* 主調色（透明度11％） */
    --color-shadow: #f4f4f4; /* 影色 */
    --color-text: #000; /* 文字色1（黒） */
    --color-text-secondary: #999; /* 文字色2（灰） */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* フォント */
    --hover-brightness: 1.2; /* ホバー時の明るさ */
    --justify-important: center; /* フレックスコンテナの揃え位置（中央寄せ） */
    --justify-normal: left; /* フレックスコンテナの揃え位置（左寄せ） */
    --line-height: 1.5; /* 行の高さ */
    --width-card: 285px; /* 幅（カード小） */
    --width-card-medium: 460px; /* 幅（カード中） */
    --width-card-wide: 800px; /* 幅（カード大） */
    --width-content: 1080px; /* 幅（コンテンツ） */
}

変数は独自のクラスを追加する際にも使えます。例えば、このTipsを囲っている.exampleクラスでは--color-bg-secondary変数と--border-radius変数を使っています。

					
.example {
    border: solid 1px var(--color-bg-secondary);
    border-radius: var(--border-radius);
    margin: 1rem 0;
}

LessやSassといったCSSプリプロセッサ（CSS拡張メタ言語）がわからなくてもサイト全体のデザイン変更が容易なのは便利ですね。

💡 Tips

CodePen ↗でもHTMLテンプレートを試すことができます。

Title Author MVP.css Note
Classless CSS Framework - MVP.css ↗ Mana CDN 日本語
MVP.css demo ↗ jasper CDN
HTML - CSS - Basic ↗ mayccoll v1.5
MVP.css ↗ Avaz Bokiev v1.0

このほかにもさまざまな作例があるので検索してみてください。

🔍 Search ↗

以下の解説は、公式サイトのHTML Reference ↗をBootstrapに倣ってLayout、Content、Componentsに分類したものです。

各要素の上下余白にも注目して、レイアウトの参考にしてください。

Layout

					
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ページタイトル | サイト名</title>
    <meta name="description" content="ページの要約文">

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

<body>

    <header>
        <nav>
            <a href="/">サイト名</a>
            <ul>
                <li>メニュー</li>
            </ul>
        </nav>
        <h1>ページタイトル</h1>
    </header>

    <main>
        <hr>
        <section>
            <header>
                <h2>見出し（中央寄せ）</h2>
            </header>
        </section>
        <hr>
        <article>
            <h2>見出し（左寄せ）</h2>
        </article>
    </main>

    <footer>
        <hr>
        <p>フッター</p>
    </footer>

</body>

</html>

HTMLテンプレート ↗

💡 Tips

<section>はflex-wrap: wrap; justify-content: center;で中央寄せ（センタリング）になっているため、スマートフォンなど横幅がせばまって文章が改行するとその段落は左寄せになります。

Example

パソコン（横幅800px）

ひるすぎみんなは楽屋に円くならんで今度の町の音楽会へ出す第六交響曲の練習をしていました。

トランペットは一生けん命歌っています。

スマートフォン（横幅460px）

ひるすぎみんなは楽屋に円くならんで今度の町の音楽会へ出す第六交響曲の練習をしていました。

トランペットは一生けん命歌っています。

					
<section>
    <p>ひるすぎみんなは楽屋に円くならんで今度の町の音楽会へ出す第六交響曲の練習をしていました。</p>
    <p>トランペットは一生けん命歌っています。</p>
</section>

この仕様はスマートフォンで閲覧したときにセンタリングによるデザイン崩れがなくて便利なのですが、動作確認時にはこの仕様を把握しておかないとまずい気がします。

💡 Tips

MVP.cssではレイアウトが崩れるため<article>に<section>をネスト（入れ子）する文書構造は推奨されていません。

Example

テスト

テスト

					
<article>
    <p>テスト</p>
    <aside>
        <p>テスト</p>
    </aside>
    <section>
        <p>テスト</p>
        <aside>
            <p>テスト</p>
        </aside>
    </section>
</article>

また、<section>に<article>をネストする文書構造も推奨されていません。レイアウト崩れはこちらの方がひどいです。

Example

テスト

テスト

					
<section>
    <p>テスト</p>
    <aside>
        <p>テスト</p>
    </aside>
    <article>
        <p>テスト</p>
        <aside>
            <p>テスト</p>
        </aside>
    </article>
</section>
Cause

原因は<aside>の入れ子構造が想定されていないためです。

Help

入れ子構造にせず、<article>、<section>、<section><aside>を分けることでこの問題を回避できます。

Example

テスト

テスト

					
<article>
    <p>テスト</p>
    <aside>
        <p>テスト</p>
    </aside>
</article>
<section>
    <p>テスト</p>
</section>
<section>
    <aside>
        <p>テスト</p>
    </aside>
</section>
IMHO

<div>のかわりに<article>や<section>を多用することがセマンティックHTMLなのかは疑問ですが、MVP開発のスピードアップのために複雑な文書構造になるのを意図的に回避しているのではないでしょうか。

💡 Tips

MVP.css公式サイト ↗には<br>を行間を空けるために使っている箇所がありますが、それはセマンティックなHTMLと言えるのでしょうか？ 🤔

					
<section id="testimonials">
    <blockquote>
        <img alt="Quote" src="./img/icon-quote.svg" height="80"><br>
        "By far the easiest stylesheet I've ever used.
        It integrates easily into <s>one</s> all of my startup projects."
        <footer>
            <img alt="MVP.css" src="./img/brand.png" height="36"><br>
            <br>
            <i>- Andy Brewer, Author of MVP.css</i>
        </footer>
    </blockquote>
</section>

Content

Typography

Headings

Example

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading
					
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

Body copy

Example

Paragraph

					
<p>Paragraph</p>

Inline text elements

Marked text
Example
Text highlighting 
					
<mark>Text highlighting</mark>
Small text
Example
Smaller text 
					
<small>Smaller text</small>

Blockquotes

Example
"Quote"
Attribution
					
<blockquote>
    "Quote"
    <footer>Attribution</footer>
</blockquote>

Lists

Unordered
Example
  • List item 1
  • List item 2
					
<ul>
    <li>List item 1</li>
    <li>List item 2</li>
</ul>
Ordered
Example
  1. List item 1
  2. List item 2
					
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
</ol>

💡 Tips

<li><a>で複数行の場合、リストマークの表示位置が下にずれる不具合があります。

Example
					
<ul>
    <li><a>ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。</a></li>
</ul>
Cause

原因は<a>がdisplay: inline-block;になっているためです。

Help

修正CSSはこちら。

					
li a {
	vertical-align: top;
}
Example

Code

Inline code

Example

Inline code snippets

					
<p>Inline <code>code</code> snippets</p>

Code blocks

Example
						
// Preformatted code block
						
					
					
<pre>
    <code>
        // Preformatted code block
    </code>
</pre>

Sample output

Example

Inline computer output

					
<p>Inline <samp>computer</samp> output</p>

Tables

Example
Col A Col B Col C
Row 1 Cell A1 Cell B1 Cell C1
Row 2 Cell A2 Cell B2 Cell C2 
					
<table>
    <thead>
        <tr>
            <th></th>
            <th>Col A</th>
            <th>Col B</th>
            <th>Col C</th>
        </tr>
    </thead>
    <tr>
        <td>Row 1</td>
        <td>Cell A1</td>
        <td>Cell B1</td>
        <td>Cell C1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Cell A2</td>
        <td>Cell B2</td>
        <td>Cell C2</td>
    </tr>
</table>

Figures

Example
Stock photo
Image caption
					
<figure>
    <img alt="Stock photo" src="https://via.placeholder.com/640x360?text=Amazing+stock+photo">
    <figcaption>Image caption</figcaption>
</figure>

Components

Alerts

Example
					
<article>
    <aside>
        <p>Text callout</p>
    </aside>
</article>

Badges

Example

Text with notification

					
<p>Text <sup>with notification</sup></p>

💡 Tips

<sup>は途中で改行します。

Example
					
<section>
    <aside>
        <p>ゴーシュは町の活動写真館でセロを弾く係りでした。<sup>けれどもあんまり上手でないという評判でした。</sup></p>
    </aside>
</section>

💡 Tips

MVP.cssはセマンティックHTMLを標榜していますが、<sup>を「単に文字が上付きになるという表示の見栄えを目的として」使っているのです。本当にこれをセマンティックHTMLと言ってしまっていいんでしょうか？

“<sup>は、特定の意味を持つ表記方法のために使用する要素です。単に文字が上付きになるという表示の見栄えを目的として<sup>を使用してはいけません。”

とはいえ<sup>が「raised text (notification bubbles)」（Bootstrapで言うところのBadges）として定義されている以上、実際のウェブ制作では都合よく使っていかざるを得ないのが現状です。

それでは上付き文字を使いたいときはどうしたらいいのでしょうか？

二乗や三乗などの上付き文字は実体参照（エンティティ）で表示することができます。

引用元：文字に対するXML実体の定義(第2版) ↗
Glyph Entity Name
¹ &sup1; SUPERSCRIPT ONE（上付き1）
² &sup2; SUPERSCRIPT TWO（上付き2）
³ &sup3; SUPERSCRIPT THREE（上付き3）
ª &ordf; FEMININE ORDINAL INDICATOR（女性序数標識）
º &ordm; MASCULINE ORDINAL INDICATOR（男性序数標識）
™ &trade; TRADE MARK SIGN（商標記号）
™ &TRADE; TRADE MARK SIGN（商標記号）
ˆ &circ; MODIFIER LETTER CIRCUMFLEX ACCENT（サーカムフレックス）

Buttons

Example

Text link Outlined link button Solid link button ↗ 

					
<p>
    <a>Text link</a>
    <a><i>Outlined link button</i></a>
    <a><b>Solid link button &nearr;</b></a>
</p>

💡 Tips

シェアアイコンは実体参照（エンティティ）で表示することができます。

引用元：文字に対するXML実体の定義(第2版) ↗
Glyph Entity Name
↗ &nearr; NORTH EAST ARROW（北東向き矢印）
↗ &nearrow; NORTH EAST ARROW（北東向き矢印）
↗ &UpperRightArrow; NORTH EAST ARROW（北東向き矢印）
⇗ &neArr; NORTH EAST DOUBLE ARROW（北東向き二重線矢印）

また、テキストリンクにUnicode絵文字を使うことでボタンを作ることもできます。ただしOSによってグリフ（字形）が変わるので注意。

🔙 🔝 🆗

引用元：Let’s EMOJI ↗
Glyph Entity Name
🔙 &#x1f519; BACK ARROW（BACKと左矢印）
🔝 &#x1f51d; TOP ARROW（TOPと上矢印）
🆗 &#x1f197; OK BUTTON（OKボタン）

Cards

Example
					
<section>
    <aside>
        <h3>Card heading</h3>
        <p>Card content</p>
    </aside>
</section>

💡 Tips

カードの<img>に<p>は必要ありません。上パディングが広がるだけです。

Example
					
<section>
    <aside>
        <img alt="Image" src="https://via.placeholder.com/285x160?text=Image">
        <h3>Card heading</h3>
        <p>Card content</p>
    </aside>
    <aside>
        <p><img alt="Image" src="https://via.placeholder.com/285x160?text=Image"></p>
        <h3>Card heading</h3>
        <p>Card content</p>
    </aside>
</section>

💡 Tips

カード枚数と画面幅でレイアウトが変わります。

Example

パソコン（1枚）（横幅1080px）

パソコン（2枚）（横幅1080px）

パソコン（3枚）（横幅1080px）

タブレット（3枚）（横幅800px）

スマートフォン（3枚）（横幅460px）

Collapse

Example
Expanable title

Revealed content

Another expanable title

More revealed content

					
<details>
    <summary>Expanable title</summary>
    <p>Revealed content</p>
</details>
<details>
    <summary>Another expanable title</summary>
    <p>More revealed content</p>
</details>

💡 Tips

「見せたいものは隠さない」ページづくりを心がけましょう。

CSSフレームワークにはCollapseのほか、Carousel、Modal、Tab、Popoverといった、通常は非表示display: none;で、ボタンクリック時やマウスオーバー時に表示display: block;になるコンポーネントがあります。特にModalとTabはページ遷移なしで全く別のコンテンツを表示することが可能です。

これらのコンポーネントは便利な反面、多用は禁物です。隠れているコンテンツが多くなるとHTMLのファイルサイズが大きくなりますから、ページ表示が遅くなるだけでなく、その情報を必要としていないユーザーの通信容量をムダにしてしまいます。また、HTMLも複雑になりますし、表示させないと内容確認ができないのでメンテナンスコストも膨れ上がります。

このように、隠す系コンポーネントを使っても実はあんまりいいことがありません。ですが、実際のページづくりでは隠すことで1ページにたくさん情報を詰め込めることにメリットを感じがちになります。ユーザーに見せたい情報は隠さずに済むページ構成を考え、隠す系コンポーネントは必要最小限で効果的に使いたいものですね。

Forms

Example

Form title

					
<section>
    <form>
        <header>
            <h2>Form title</h2>
        </header>
        <label for="input1">Input label:</label>
        <input type="text" id="input1" name="input1" size="20" placeholder="Input1">
        <label for="select1">Select label:</label>
        <select id="select1">
            <option value="option1">option1</option>
            <option value="option2">option2</option>
        </select>
        <label for="textarea1">Textarea label:</label>
        <textarea cols="40" rows="5" id="textarea1"></textarea>
        <button type="submit">Submit</button>
    </form>
</section>

Navbar

Example
					
<nav>
    <a><img alt="Logo" src="https://via.placeholder.com/200x70?text=Logo" height="70"></a>
    <ul>
        <li>Menu Item 1</li>
        <li><a>Menu Item 2</a></li>
        <li><a>Dropdown Menu Item &blacktriangledown;</a>
            <ul>
                <li><a>Sublink 1</a></li>
                <li><a>Sublink 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

💡 Tips

メニュー項目を増やすことはできますが、スマートフォンで大変なことになります。ハンバーガーメニューって便利ですね… 😅

Example

パソコン（横幅1080px）

スマートフォン（横幅460px）

💡 Tips

ドロップダウンメニューが他のメニュー項目と重なって見づらく、操作しにくい不具合があります。

Example
Cause

原因はドロップダウンメニューにz-indexが指定されていないためです。

Help

修正CSSはこちら。

					
nav ul li ul {
    z-index: 1; /* 任意の数値 */
}
Example

💡 Tips

メニュー項目よりドロップダウンメニューの内容が長いと改行され、縦長に表示されてしまう不具合があります。v1.6.2修正済

Example
Cause

原因はドロップダウンメニューがwidth: auto;になっているためです。

Help

修正CSSはこちら。

					
nav ul li ul li a {
    white-space: nowrap;
}
Example

💡 Tips

上記不具合を修正した場合、右端のドロップダウンメニューが画面外にはみ出してしまう不具合があります。

Example
Help

leftを-100%以上に調整するとよいようです。ただし、スマートフォンではみ出す問題は残ります。

参考記事：CSSによるドロップダウンメニュー－水平方向－（サブメニュー幅２倍） ↗

					
nav ul li:last-child ul {
    left: -130%; /* -100%以上で任意の数値 */
}
Example

サンプルが悪い気もしますが、メニュー項目名を長くしすぎないように気をつけたいところですね。

Summary

修正CSSまとめ

					
li a {
    vertical-align: top;
}
nav ul li ul {
    z-index: 1; /* 任意の数値 */
}
nav ul li:last-child ul {
    left: -100%; /* -100%以上で任意の数値 */
}
MVP.css使用サイト

日本

海外

★MVP.css公式サイトと内容が酷似。

MVP.css関連記事

日本

海外

Update history

Postscript

2020年4月1日に約3ヶ月かけて全面リニューアルしたkaguyadepthウェブサイトを公開しました。

kaguyadepth（カグヤデプス）同人音楽サークル

CSSフレームワークは引き続き星空凛ことRin ↗（Bootstrap3）を使用していますが、ちょうどその頃Bootstrap5がリリース間近であるという話題とともに、classやidを使わない超軽量CSSフレームワーク「MVP.css」が出たというニュースが飛び込んできました。

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

MVP.cssは、誤解を恐れずに言えばかつてWindows標準のメモ帳でHTMLを編集してホームページを作っていた感覚で、パソコン・スマホ両対応のスタイリッシュなウェブサイトが作れるCSSフレームワークです。

近年SNS疲れからインターネット黎明期を懐古する風潮があり、またWordPressなどのCMSに対して高速な静的サイトが見直されつつある中、私は個人のホームページ作りが再び盛り上がることを期待しています。

しかし、ホームページテンプレートは衰退しました。私のBootstrap3ノウハウをまとめることも考えましたが時代遅れ感は否めず、もしMVP.cssが使えるのであればそちらをオススメしたいと思ったのです。

MVP.cssはセマンティックなHTMLを謳っていますが、実際にサイトを作ってみるとコーディングにちょっとクセがあるなと思いました。

トップナビゲーションやアラートが紫色なのは、同じく軽量CSSフレームワークで人気のMilligram ↗と似た印象ですね。

本来であればCSSフレームワークの制作意図を汲んでMVP用途に活用することが望ましいのでしょうが、ホームページテンプレートの代わりとして使っても差し支えないものでしょう。

なお、SoundCloud風の当サイトを自作するきっかけとなった出来事については過去記事をご参照ください。

SoundCloud規約変更の予告と撤回に翻弄された1週間 - 萌尽狼グ ↗

2020年4月26日　萌尽狼

🔝

このページをシェアする