CSSフレームワークについて
ちょっとしたウェブサイトやウェブアプリのデザインを自分でするの面倒くさい…というときのためのCSSフレームワークについて。
☕ CSSフレームワークというのは、どこか遠くに住んでいる賢くてセンスのよい人たちが作ってくれた素敵なデザインやアニメーションをCSSファイルやJavaScriptファイルを読み込むだけで使えるようにしてくれる代物です。
CSSフレームワークは以下の3つに分けられます（私の主観）。
・普通のやつ … 決められたルールに従ってclass名を付けていく
・class-lightなやつ … 付けるclass名がちょっとでいい
・class-lessなやつ … class名を付ける必要がない
この中ではclass-lessなものが一番ラクなのですが（<head>でCSSを読み込むだけでおしまい）、思ったようなデザインではないときに一部だけ省いたりカスタマイズするということができなかったり、ちょっと特殊なHTML構造で作っているとレイアウトが崩れたりします。
なので、このブログの隠れたターゲット（＝うちのゼミ生）にはClass-lightなフレームワークのほうがいいのかな…と思ったり。まあ、せっかくなので普通のやつをマスターしてくれるのが一番いいとは思うのですが。
以下、フレームワークへのリンクとともに、2020年11月時点のCDN（HTMLファイルの<head></head>の間に貼り付けるだけで動くやつ）を掲載しておきますが、ファイルをダウンロードして普通にCSSファイルとしてリンクしたほうが動作は軽いと思います。
あと、いくつかの大きめのCSSフレームワークはCDNだとフル機能使えないみたいです。そういうやつでフル機能を使おうとするとnpmとかでインストールしなくちゃなりません。
また、特に明記はしていませんがレスポンシブル対応なのがほとんどなので、以下のmetaタグも<head></head>の間に入れておく必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Class-lessなCSSフレームワーク
超手軽なclass-lessやclass-lightなフレームワークはカスタマイズがあまり効かないこともあって使用者が少なく、作りっぱなしで放置されているフレームワークが多いようです。
奇特な方がGithubに一覧を作ってくれていました（この一覧自体はメンテナンスされているようです）。
フレームワークの紹介のすぐ下に「Repository」というリンクがあるのですが、その横にある「stars contributors last-commit」の数値を見れば、そのフレームワークがちゃんとメンテナンスや更新されているかがなんとなくわかります。
この指標を元にGithub Starsが1k超えのプロジェクトをいくつかピックアップしておきます（Starの数順です）。
名称にはGithubへのリンクが貼ってあります。公式ページよりもGithubのREADME.miのほうが詳しいやつもあるので（READMEというのは「これ最初に読んでね！」っていう文章です）。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">日本語の「おすすめCSSフレームワーク」にはあまり登場しないんだけども、2019年に登場して（class-lessでは）最多のGithub Starsを獲得しているし、GithubでのIssueでもちゃんと最近までコメントがやりとりされているので、class-lessで迷ったらこれでいいのかも。モノトーン＆ブルーなデザインが気に入るなら…だけど。
Star数は2番目に多いものの、「本」っぽいデザインにするちょっと特殊なやつですね。Edward Tufteさんという人が提唱した（？）本やハンドアウトのデザインみたいです。
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">2020年に作られた新しいフレームワークで日本語での紹介も多いんだけど、2020年の夏前くらいまでにガッと開発されたあとは放置されている感じ…？（それともメンテの必要がない？）
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">「桜」という名前だけども日本人が作ったわけではないみたい。2016年に作られた比較的古いフレームワークだけども継続的にメンテされてるっぽい。mvp.cssよりもStar数が多いのはプロジェクトが古くからあるからかな…？
<link rel="stylesheet" href="https://unpkg.com/mvp.css">new.cssと同じく2020年登場の新しいフレームワーク。MVPというのは「Most Valuable Player」のことではなく「Minimum Viable Product（実用最小限の製品）」とのことで、『リーン・スタートアップ』という本で提唱されたみたいです（読んでない）。日本語での紹介も多いです。
2015年からあるフレームワークのようですが、日本語ではあまり紹介されているのをみたことがない気が。ここから下に紹介するものはすべて同じですが、5年前に登場してStar数がそれほど伸びていないというのは…
CDN（貼り付けるだけで使えるリンク）はなく、ここからダウンロードしてファイルリンクする仕様っぽい。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css-1.5.1.min.css"/>こちらも2015年からあるフレームワークで、メンテナンスも細々と続いているようです。なぜか日本語での紹介が多い。主に2人体制で開発してるっぽいです。
LaTeX CSS
Star数多くないんだけど、変わりネタとしてLaTeXっぽい見た目になるやつも挙げておく。
class-lightなCSSフレームワーク
class名をあまりがっちり書かなくてよいフレームワークを紹介します。前述の一覧にはclass-lightフレームワークがあまり紹介されていなかったので、一覧にないものも追加しています。
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-4ZPLezkTZTsojWFhpdFembdzFudphhoOzIunR1wH6g1WQDzCAiPvDyitaK67mp0+" crossorigin="anonymous">class-lessやclass-lightなフレームワークの中ではGithub Starsが断トツに多い（21.2k stars）フレームワークです。Yahooの開発ということになるのかな。2016年に登場。長く使われています。必要なコンポーネントだけ読み込む感じ？
後述の「State of CSS 2020」だと2020年はフレームワーク全体でも2番手につけているみたいですね。このブログの隠れたターゲット（＝うちのゼミ生）にはこれがよさそう。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">普通のCSSフレームワークとしても時々名前を聞くやつです。お勧めしているサイトも多いような？
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">ネーミングどうなん？って感じですが、独自ドメインの公式サイトもちゃんと用意されています。公式サイトは当然このPicnic CSSが使われているのだと思いますが、原色っぽいフラットデザインで個人的には結構好きな感じ。
<link rel="stylesheet" href="https://unpkg.com/wingcss"/>いかにも軽そうなCSSフレームワーク来ました。モノトーンな感じ？
普通のCSSフレームワーク
何をもって普通なのかはよくわからなくなってきましたが、普通のやつです。
このブログよりも ↓ を見てもらったほうがいいと思います。
Bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>もう紹介する必要はないようなやつです。Github Stars 145kの絶対王者。
日本語で入手できる情報も多く、書籍もあるので勉強はしやすいですが、ここでターゲットにしているペライチのウェブアプリには重すぎるでしょう。アプリよりもたぶん重い。
Bootstrapと同様に本格的なFoundationとUIkitとSemantic CSSは割愛します。
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">ウェブアプリの開発者がよく使用しているフレームワークで、State of CSS 2020でも2019年からトップに君臨しています。（ウェブデザイナではなく）アプリ開発者としては迷ったらこれなんでしょうね。
CDNからリンクするだけではかなりの制約があるようです。開発者ならnpmでインストールせよ…と。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.css">State of CSS 2020で3位につけているフレームワーク。npmパッケージのダウンロード数では PureCSS を超えているようです。最近インターネット情報でもよく見かける気がします。
でも発音が日本語的にはちょっとアレですよね…
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>GoogleのマテリアルデザインチックなCSSフレームワークみたいなので、ウェブアプリにはマッチするかも。Google公式ではありません。Version 1.0.0まで到達して、あとはメンテナンスモードなのかな…というGithubの様子です。
まとめ
「2020年おすすめCSSフレームワークまとめ」みたいなブログサイトを見たら掲載されているような内容ですが、広告を見せられるのは癪なので自分でまとめておきました。
class名を付けることすらしたくないんだ…という人には class-less なフレームワーク。開発や議論が比較的活発という意味では Water.css が生き残りそうな気がします。
さすがにスタイルを適用する箇所は自分で選びたいけど、できるだけシンプルなものがよい…という人には class-light なフレームワーク。このジャンルなら PureCSS がよさそうです。
いや、私はしっかりやりたいぞ…という人には本格的なフレームワーク。アプリ開発者なら Tailwind CSS に挑戦するのもよいでしょう。
そして、Bulma は PureCSS と Tailwind CSS のちょうど間くらいの複雑さのようです。FlexboxベースなのでCSSをベタで書いてきた人にも馴染みやすそうなので、Bulmaも（名称はあれだけど）有力な候補になると思います。
この記事が気に入ったらサポートをしてみませんか？