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

BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK!学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。

デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「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">

日本語デモ

ライトテーマ

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


GitHubデモ

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


GitHubデモ

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


GitHubデモ

明朝体がエレガントな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


GitHubデモ

色違いやダークテーマも用意されている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


GitHubデモ

Tacitbody に余白が入っているので、このCSSだけでWebページとして完結させたいときなどに使えます。codepre タグが緑色できれい。ただし 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.

その他

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


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

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

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)