CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ

デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてくださいね！

Water.css

GitHub｜デモ

クラスなし CSS フレームワークとして最初に目立っていたのがこのWater.css。ダークテーマとライトテーマがあるので、コンテンツにあわせて変えたり、ダークモードに対応したりできますね。a タグのリンク先に mailto: や tel: がついていると疑似要素で絵文字を表示します。

導入方法

head 内に追加：

ライトテーマ

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css"
/>

ダークテーマ

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css"
/>

日本語デモ

ライトテーマ

ダークテーマ

new.css

GitHub｜デモ

Bootstrap を彷彿する装飾のnew.css。ダークモードにも対応していて、特に追加の記述をしなくても、ユーザーがダークモード設定中は背景が黒くなります。

導入方法

head 内に追加：

<link rel="stylesheet" href="https://newcss.net/new.min.css" />

日本語デモ

MVP.css

GitHub｜デモ

MVP.cssはこれだけで Web ページとして表示されるよう設計されています。header 要素のテキストは中央揃えにしたり、nav 要素の中にサブメニューがある場合はドロップダウンメニューとして表示されたり。この CSS だけで完結させたい場合はよさそうです。

導入方法

head 内に追加：

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

日本語デモ

Writ

GitHub｜デモ

明朝体がエレガントなWrit。フォームパーツにはスタイルが当てられておらず、単純に文章主体のページをまとめたい時におすすめ。body に余白が入っているので大きい画面でも読みやすいよう設計されています。

導入方法

head 内に追加：

<link rel="stylesheet" href="//writ.cmcenroe.me/1.0.4/writ.min.css" />

日本語デモ

Sakura

GitHub｜デモ

色違いやダークテーマも用意されているSakura。ブックマークレットが用意されていて、ブラウザーのブックマークバーにドラッグしておくと、1 クリックで他のページをこの Sakura スタイルで表示できます。

導入方法

head 内に追加：

<link
  rel="stylesheet"
  href="https://unpkg.com/sakura.css/css/sakura.css"
  type="text/css"
/>

日本語デモ

Tacit

GitHub｜デモ

Tacitも body に余白が入っているので、この CSS だけで Web ページとして完結させたいときなどに使えます。code や pre タグが緑色できれい。ただし table タグのスタイルはちょっと見づらいので調整が必要です。

導入方法

head 内に追加：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/yegor256/tacit@gh-pages/tacit-css.min.css"
/>

日本語デモ

その他

他にもたくさんのクラスなし CSS フレームワークが存在しました。海外では「No-Class CSS Framework」や「Classless CSS」などと呼ばれているので、それで検索してみると見つかるかと思います。構成を確認して勉強にもなりますね。

• Basic.css
• Marx
• Bahunya
• AttriCSS
• Tufte

単一の CSS ファイルのみを使用しているので、フレームワークというより、テーマとかスタイルって言葉の方が合う気がしますが、まぁそこは置いておきましょう。

サクッと文章を公開したい、デザイナーに渡す前に動作確認だけしたい（けどデフォルトのスタイルは見づらい）なんて時に役立ちますね。