CSS framework 候補一覧 1

REGEX ECMA のドキュメントを Web 上に静的ページで作るため CSS フロントエンドライブラリを探している。

CSS フロントエンドライブラリの候補

CSS framework 候補一覧

Ant Design: React 用 UI ライブラリ

Bootstrap: プロジェクト規模が小さい場合ここまでの充実機能は必要ない

Concise CSS: うーん…

Bulma: CSS だけを提供、(JavaScript不要) ブルマで検索すると検索履歴が汚れる件

Spectre: A Lightweight CSS Framework (JavaScript不要)

SKELETON: 小規模なプロジェクトに向いてる、インストールを必要としない

静的サイトジェネレーター Hugo も良し、これはアップデート入ると互換性一部切られる場合があって、その都度修正対応が必要。マークダウンで本文書けるのでブログ形式で記事作る作業には向いてる。ターミナルで作業完結できる点も良い。prester.org のトップページとかその他静的サイトには Hugo 使ってる。GLSL ES: Shader 48 や Obake Puzzle もそうだけど、静的サイトに随時記事追加する前提だと Hugo 選択は良し。作業環境を構築する気力が無いと無理。一度作ってしまえばサイトを増やすのは容易なのでテーマ毎にどんどんサイトを追加できる。

Bootstrap が出る前は作った後、ほったらかしにする前提の静的サイト作るのには結構苦労してる。Quad FreeCell は PC 用としてサイトが作られたので今見るとひどいことに。ただ WordPress と違ってサイトが見れなくなるトラブルは無い。

ペンタくんと GArR は Bootstrap が利用されている。こちらはモバイル対応がある程度できているが、完璧ではない。

新しくサイト作る気力が薄い中で Hugo は選択肢として弱く、すると SKELETON、Bulma、Spectre が気になる。どれくらい楽をさせてもらえるか、導入と学習コスト低いのが大事なのでサイトの見た目がどっかと似ているとかは、全く気にしない。もちろんモバイル対応は標準で、めんどくさいから JavaScript はもう無くていい。

Skeleton

まず Skeleton 触ってみた。弄り始めて 5 分後、あれこれ絶対どこかで利用したことある。

よく考えたら Hugo のテーマは途中からある程度自作したのだが、ベースになっているのは SKeleton CSS だった気がする。

そしてなんか適当に弄っていたらトップページ的なものは雛形がもう出来てしまった。じゃあとりあえずトップページはこれでいいか的な出来栄え。すばらしい、速いやっぱ。モバイル対応も完璧だしシンプルで良い。学習コストがほぼ無いのも素敵。

公式から提供されているサンプル少ないのだが、むしろこれで良いのだと分かった。機能は少ないのでページレイアウトを工夫してあとはコンテンツ配置するだけなのだ。