はじめに

「bootstrap」に代表されるCSSフレームは、とても便利ですので利用してきました。普段から使い倒しており、もう身についた、という方であれば問題ないと思いますが、たまにしか使わない私のようなものにとっては、指定するclassを調べながら指定していくのは少々面倒だな、と思っていました。（簡単なHTMLを作成するときなどは、特にそう思いました）

classやidを指定しなくてもよい方法があるということを知りましたので試してみました。
classless CSS framework というそうです。

用意するのはHTMLのみで、class/idの指定は必要ありません。とにかく簡単で、HTMLのheadタグに1行追加するだけでいい感じにしてくれます。

①new.css

②mvp.css

①new.css

追加するコード

sample.html

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
</head>

デモサイト

npm/yarnにも対応している。

npm i @exampledev/new.css
yarn add @exampledev/new.css

また、テーマもありナイトモードやターミナルモードがあり、爆速で変更・適用が可能。

ナイトテーマを適用

samle.html

<head>
  <link rel="stylesheet" href="https://newcss.net/theme/night.css">
</head>

ターミナルテーマを適用

sample.html

<head>
  <link rel="stylesheet" href="https://newcss.net/theme/terminal.css">
</head>

②mvp.css

追加するコード

sample.html

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

デモサイト

サンプルサイトはこちら

まとめ

classless CSS frameworkは、簡単なHTMLでスタイルを整えたい場合、とても便利だと思いましたので、積極的に使っていきたいなと思いました。

おまけ

CSSフレームワークを適用して確認するのは、レスポンシブに対応できているかどうかだと思います。同時にデバイスを確認するサイト・ツールは、こちらが便利です。（IDの登録などは不要）

everysize

参照URL

new.css

公式ページと参考URL

mvp.css

公式ページと参考URL