CSSファイルを読み込むだけ！クラスなしCSSフレームワークいろいろ
BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK！学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。
↑私が10年以上利用している会計ソフト！
デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてくださいね！
Water.css
クラスなし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">
日本語デモ
ライトテーマ
See the Pen
Classless CSS Framework – Water.css Light by Mana (@manabox)
on CodePen.
ダークテーマ
See the Pen
Classless CSS Framework – Water.css Dark by Mana (@manabox)
on CodePen.
new.css
Bootstrapを彷彿する装飾のnew.css。ダークモードにも対応していて、特に追加の記述をしなくても、ユーザーがダークモード設定中は背景が黒くなります。
導入方法
head 内に追加：
<link rel="stylesheet" href="https://newcss.net/new.min.css">
日本語デモ
See the Pen
Classless CSS Framework – new.css by Mana (@manabox)
on CodePen.
MVP.css
MVP.cssはこれだけでWebページとして表示されるよう設計されています。header 要素のテキストは中央揃えにしたり、nav 要素の中にサブメニューがある場合はドロップダウンメニューとして表示されたり。このCSSだけで完結させたい場合はよさそうです。
導入方法
head 内に追加：
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
日本語デモ
See the Pen
Classless CSS Framework – MVP.css by Mana (@manabox)
on CodePen.
Writ
明朝体がエレガントなWrit。フォームパーツにはスタイルが当てられておらず、単純に文章主体のページをまとめたい時におすすめ。body に余白が入っているので大きい画面でも読みやすいよう設計されています。
導入方法
head 内に追加：
<link rel="stylesheet" href="//writ.cmcenroe.me/1.0.4/writ.min.css">
日本語デモ
See the Pen
Classless CSS Framework – Writ by Mana (@manabox)
on CodePen.
Sakura
色違いやダークテーマも用意されているSakura。ブックマークレットが用意されていて、ブラウザーのブックマークバーにドラッグしておくと、1クリックで他のページをこのSakuraスタイルで表示できます。
導入方法
head 内に追加：
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">
日本語デモ
See the Pen
Classless CSS Framework – Sakura by Mana (@manabox)
on CodePen.
Tacit
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"/>
日本語デモ
See the Pen
Classless CSS Framework – Tacit by Mana (@manabox)
on CodePen.
DreamCSS
柔らかい色合いが特徴のDreamCSS。フォームや表は調整が必要かも。section などにはふんわりシャドウがつきます。
導入方法
head 内に追加：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/MystPi/dreamcss/src/dream.css">
日本語デモ
See the Pen
Classless CSS Framework – DreamCSS by Mana (@manabox)
on CodePen.
その他
他にもたくさんのクラスなしCSSフレームワークが存在しました。海外では「No-Class CSS Framework」や「Classless CSS」などと呼ばれているので、それで検索してみると見つかるかと思います。構成を確認して勉強にもなりますね。
単一のCSSファイルのみを使用しているので、フレームワークというより、テーマとかスタイルって言葉の方が合う気がしますが、まぁそこは置いておきましょう。
サクッと文章を公開したい、デザイナーに渡す前に動作確認だけしたい（けどデフォルトのスタイルは見づらい）なんて時に役立ちますね。
