classやidを使わない超軽量CSSフレームワーク「MVP.css」でSoundCloud風のサイトを作ってみました。
本記事の加筆修正版を公開しました。MVP.css | Moetsukiro（最終更新日：2020年8月12日）
kaguyadepthウェブサイトにCatalpaを組み込みブログサイトにリニューアルしました。その際に下記SoundCloud風のサイトの内容を統合したためNot Foundとなっております。ご了承ください。
http://kaguyadepth.jp/moetsukiro/kaguyadepth.jp
いきさつ
告知が遅くなりましたが、4月1日に約3ヶ月かけて全面リニューアルしたkaguyadepthウェブサイトを公開しました。
CSSフレームワークは引き続きRin（Bootstrap3）を使用していますが、ちょうどその頃Bootstrap5がリリース間近であるという話題とともに、classやidを使わない超軽量CSSフレームワーク「MVP.css」が出たというニュースが飛び込んできました。
MVP.cssは、かつてWindows標準のメモ帳でHTMLを編集してホームページを作っていた感覚で、パソコン・スマホ両対応のスタイリッシュなウェブサイトが作れるCSSフレームワークです。
近年SNS疲れからインターネット黎明期を懐古する風潮があり、またWordPressなどのCMSに対して高速な静的サイトが見直されつつある中、私は個人のホームページ作りが再び盛り上がることを期待しています。
しかし、ホームページテンプレートは衰退しました。私のBootstrap3ノウハウをまとめることも考えましたが時代遅れ感は否めず、もしMVP.cssが使えるのであればそちらをオススメしたいと思ったのです。
なお、SoundCloud風のサイトを自作するきっかけとなった出来事については過去記事をご参照ください。
MVP.cssについて
MVP.cssはAndy Brewer氏が作りました。4月24日リリースのv.1.5が最新版です。公式サイト（GitHub Pages）はこちら。
日本ではまずコリスが「必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css」という見出しで紹介しました。
このニュース記事には、はてなブックマークが現時点で330usersと大きな反響があり、おもに「一行加えるだけ」という見出しが悪いことについてツッコミが入っています。
はてなブックマークのコメントの中で見落としてはいけないのが、「MVP志向なデフォルトCSSライブラリなのにコンセプトがまったく伝わってない」という指摘です。
MVP志向とは？ MOONGIFTの記事を引用します。
いきなり大掛かりなサービスを作るのではなく、ミニマムなコンセプトが分かる小さなモデルを作ってみる、それがMVP（Minimum Viable Product）と呼ばれる考え方です。MVPで仮説検証を行い、確信してからサービス開発に入ると失敗が少なくなります。
https://www.moongift.jp/2020/04/mvp-css-%e7%b4%a0%e3%81%aehtml%e3%81%a7%e3%82%82%e3%81%84%e3%81%84%e6%84%9f%e3%81%98%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%81%ab/www.moongift.jp
私は最優秀選手（Most Valuable Player）やマツダMPV（Multi Purpose Vehicle；ミニバン）と勘違いしていたので、なんとなくMVPな感じのCSSフレームワークなのかな？ と思っていましたが、ちゃんとしたコンセプトがあったんですね。
かちびと.netではMVP志向というコンセプトを抜きに、CSSフレームワークとしての特徴のみを簡潔にまとめています。
MVP.cssはclassやidを使わないセマンティックなHTMLによるWeb開発をサポートするスタイルシートです
（中略）
この手のCSSやフレームワークは他にもありますがMVP.cssではCSSカスタムプロパティが採用されているので極力コードも少なく設計されています
とあるように、classやidを使わないCSSフレームワークは「No-Class CSS Frameworks」と呼ばれ、海外にまとめ記事があります。
既存のNo-Class CSS Frameworksと比較すると、MVP.cssはナビゲーションや流行りのアウトラインボタン、Flexbox対応のカードなど見栄えの良さが特徴と言えます。
ただ、tacitをのぞいて長期間メンテナンスが停止しているものが多く、MVP.cssもいずれそうなってしまうのでは？ という不安はあります。
ミニマムなCSSフレームワークなので大きな問題はないでしょうけれど。
さて、コリスでは「CSSリセットとしても使える」ような紹介がありました。
MVP.cssはすべてのブラウザとデバイスで見栄えするようにデザインされています。CSSリセットの拡張版みたいなもので、さまざまなプロジェクトで利用できます。
これも大いに疑問です。例えばMVP.cssは現時点で定義リストタグ（dl・dt・dd）に対応していません。
<details>と<summary>の組み合わせでコンテンツを開閉できるコラプス（アコーディオン）になりますが、地味に不便です。
MVP.cssを使ってみて
トップナビゲーションやテキストボックスが紫色なのは、同じく軽量CSSフレームワークで人気のMilligramと似た印象ですね。
MVP.cssはセマンティックなHTMLを謳っていますが、実際にサイトを作ってみるとコーディングにちょっとクセがあるなと思いました。
特定タグの組み合わせでUIコンポーネントになる
先程<details>と<summary>の組み合わせでコラプス（アコーディオン）になると書きましたが、MVP.cssでは次のようなタグの組み合わせでUIコンポーネントになります。
- <a><i>でアウトラインボタン
- <a><b>でソリッドボタン
- <article><aside>でテキストボックス
- <section><aside>でカード
- <sup>でラベル
<article>と<section>の役割
MVP.cssでは、<article>は左寄せ、<section>は中央寄せ（センタリング）になっています。
<article>と<aside>の組み合わせでテキストボックスになり、<section>と<aside>の組み合わせでFlexbox対応で横に最大3枚並ぶカードになります。
カードの横幅は決まっていてパソコンでもスマホでも同じ大きさで表示されます。スマホは1枚ずつ、パソコンは1～3枚がセンタリングで並びます。
つまり<section>の中にテキストボックスを、<article>の中にカードを配置することはできないわけで、<section>の中に<article>を入れる文書構造というのは推奨されていません。
<article>
<p>テスト</p>
<aside>
<p>テスト</p>
</aside>
<section>
<p>テスト</p>
<aside>
<p>テスト</p>
</aside>
</section>
</article>上記のように<article>の中に<section>を入れる文書構造にしても、<article><aside>の背景色が<section><aside>にも継承されてしまう不具合があります。
CSSで修正するのは簡単にできそうな気もしますが、本当に不具合なのか、MVP開発のスピードアップのために複雑な階層構造になるのを意図的に回避しているのかが不明なため、現状そのままにしてあります。
<section>のレイアウト崩れ
<section>と<aside>の組み合わせでFlexbox対応のカードになりますが、同一<section>内にボタンなどを並べて配置するとClearfixされずにレイアウトが崩れます。
そのため一旦<section>を閉じてボタンだけ別の<section>に入れてやる必要があります。
<section>
<aside>カード</aside>
<a href="#"><i>ボタン</i></a>
</section>
ではなく
<section>
<aside>カード</aside>
</section>
<section>
<a href="#"><i>ボタン</i></a>
</section>
にすることまた、Green Audio Playerはwidth:100%ではみ出してしまったのですが、<section>内では問題ありませんでした。
ただ、カードが<section>と<aside>の組み合わせなのに、その中にさらに<section>を入れるのはどうかと思い、そこはstyle.cssで修正しました。
トップナビゲーションのレイアウト崩れ
なお、トップナビゲーションで<ul>を入れ子にしてドロップダウンメニューにした場合、大見出しより小見出しが長いと盛大にデザインが崩れます。
今回はドロップダウンメニューを使わないことにしましたが、注意が必要かもしれません。
簡単なCSSで修正できました。
nav ul li ul li a {
white-space: nowrap;
}
また、ドロップダウンメニューはデフォルトでは重なって表示されてしまいます。
半透明ではなくて完全に重なっています。z-indexで修正できます。
nav ul li ul {
z-index: 1;
}
なお、右端のドロップダウンメニューが画面外にはみ出してしまう場合は、leftを-100%以上に調整するとよいようです。
nav ul li:last-child ul {
left: -125%;
}
<hr>の有無によるレイアウト崩れ
MVP.cssのデザインは余白が多い印象ですが、<hr>の有無で結構レイアウトが崩れるので、意味もなく<hr>がある箇所が出来てしまったのはちょっと気になったところです。
デザインに<hr>を使うのもあまりよくないことでしょうし。
画像のレスポンシブ対応
<figure><img>でレスポンシブ対応になります。<img>そのままでは画像サイズが変わらないためスマホでデザインが崩れます。
なお、カード内の<img>は<figure>に入れなくてもレスポンシブ対応になります。また、カード内の<img>は<p>でくくる必要はありません。
シェアボタンのアイコン
公式サイトでは、
↗
で↗（右斜め上矢印）を表示させているので、今回はそのまま使いました。
公式サイトではマージン代わりに<br>を使っている
<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>MVP.cssの公式サイトでは<br>をマージン代わりに使ってますが、それはセマンティックなHTMLと言えるのでしょうか？（汗）
今回は必要に応じてstyle.cssを追加しましたが、MVP.cssのままでもいい感じのサイトがサクッと作れることがわかりました。
<header>と<section>は中央寄せ（センタリング）になりますが、<section>はウィンドウサイズが狭まると左寄せになります。
サンプル画像は<audio>要素の下のグレーのテキストがウィンドウサイズによって中央寄せから左寄せに変わっていることを示しています。
この仕様はスマホで見たときにセンタリングによるデザイン崩れがなくて便利なのですが、動作確認時にはこの仕様を把握しておかないとまずい気がします。
作ったサイトについて
http://kaguyadepth.jp/moetsukiro/kaguyadepth.jp
私のホームページということにしました。大まかなサイトマップは次のとおり。
- Home
- Tracksリスト
- 曲単位のシェアページ ※曲数分（リンク先は1曲目）
- Albumsリスト
- Biography
Home、Tracksリスト、Albumsリスト、アルバム単位のシェアページに共通した試聴カードを配置することにより、どのページからも試聴して曲単位のシェアページにアクセスできるようになっています。
静的サイトなので、登録する曲数分のページを作成する必要がありますが、表示項目を必要最小限にとどめることでメンテナンスコストを抑えています。詳しい情報は特設サイトにありますので。
Twitterカードは今までsummary_large_imageしか使ってなかったのですが1200x630pxの画像を用意するのが意外と手間なので正方形の画像が使えるsummaryに変えてみました。
ただしFacebookでは正方形でも画像サイズが大きいとsummary_large_image扱いになるようです。
※5/9バイオグラフィーを追加しました。
おわりに
MVP.cssの公式サイトにはHTMLテンプレートが用意されており、すぐにデモサイト作りに取り掛かることができます。
https://andybrewer.github.io/mvp/mvp.html
本来であればCSSフレームワークの制作意図を汲んでMVP用途に活用することが望ましいのでしょうが、ホームページテンプレートの代わりとして使っても差し支えないものでしょう。
リスト（liタグ）にリンク（aタグ）を入れた場合、複数行になるとマークが下にずれる不具合があります。
<ul>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</li>
<li>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</li>
</ul>
<ul>
<li><a>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</a></li>
<li><a>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</a></li>
<li><a>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</a></li>
</ul>
原因はaタグがdisplay: inline-block;になっているため。
修正CSSは次のとおりです。
li a {
vertical-align: top;
}