Web関連で何かを作る際に悩むこととして、どのCSSフレームワークを採用するのか？ ということがあります。近年なら取り敢えずTailwind CSSが採用されるかと思いますが、必ずしもそれが最適解であるとは限りません。
というわけで同じHTMLを基に異なるCSSフレームワークを当ててみた「CSS Framework Compare」を 2時間で 作成してみました。何かの参考になれば幸いです。
結論
- CSSフレームワークを比較するサイトを作った
- 2時間で簡単に
- 現状は
class-lessなものだけ
CSSフレームワーク
BootstrapやTailwind CSSに代表されるCSSフレームワークは、整ったデザインを持ったWebアプリケーション・Webサイトを作成するのに極めて有用なものです。しかしながら様々なフレームワークがあり、そのプロジェクトにとって最適なものがどのようであるかは不明瞭であると言わざるを得ません。また良いフレームワークを選定することは骨の折れる作業であると言えます。
多数存在するCSSフレームワークを比較するために有用なものとして「Awesome CSS Frameworks」が存在します。これはCSSフレームワークを特徴ごとに分類したもので、適切なCSSフレームワークを選定する助けとなります。しかしながら実際にそのフレームワークが適用された状態で確認するためには各フレームワークの公式ページに飛び、例を調べる必要があります。これは面倒ですし同一条件で比較することは出来ません。
CSS Framework Compare
同一条件で様々なCSSフレームワークを比較するためには、同一条件で様々なCSSフレームワークを比較できるサイトを作ればいいわけです。以下のHTMLをベースとして各種のCSSフレームワークを適用したサイトをAstroで簡単に作成しました。
<header>
<h1>「CSS Framework Compare」へようこそ！</h1>
<p>このサイトは各種CSSフレームワークを同一の画面に適用し、これを比較できるようにしています。</p>
</header>
<main>
<section>
<h2>タイトル</h2>
<a href="/">
<button>ボタン</button>
</a>
</section>
<section>
<h2>フォーム</h2>
<form>
<div>
<label for="name">
お名前
</label>
<input type="text" name="name" id="name" required />
</div>
<div>
<label for="area-select">
お住まいの地域
</label>
<select name="area" id="area-select">
<option>北海道</option>
<option>本州</option>
<option>四国</option>
<option>九州・沖縄</option>
</select>
</div>
<input type="submit" value="登録" />
</form>
</section>
</main>
<footer>
<p>Produced by <a href="https://www.osumiakari.jp">Osumi Akari</a> with Love.</p>
<hr>
<span><a href="/">Top</a></span>
<span><a href="/list">List</a></span>
<span><a href="https://github.com/oageo/cssframeworkcompare">Source Code</a></span>
</footer>
現状はこのリストにある class-less なもののリストとなっています。今後やる気があれば追加しておこうかと思います。
関連リンク
最後に
前回の技術関連の記事: Firefishと私
2時間で簡単に作ったので参考になっているか分からないのですが、何かの参考になっていただければ幸いです。PRも全然歓迎しているので、よろしければ送っていただければと思っています。
