Help us understand the problem. What is going on with this article?

【HTMLのみでOK】class/id必要なしの超手軽で軽量なCSSを利用する

はじめに

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

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

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

①new.css

追加するコード

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

デモサイト
https://newcss.net/demo/

01.png

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>

ターミナルテーマを適用したサンプルサイトはこちら

02.png

②mvp.css

追加するコード

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

デモサイト
https://andybrewer.github.io/mvp/

03.png

サンプルサイトはこちら

04.png

まとめ

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

おまけ

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

everysize

https://everysize.kibalabs.com/
05.png

参照URL

new.css

mvp.css

yoshi_yast
個人開発初学者です。「1か月後の自分は他人である」・「自分の"やったこと"や"つまずき"はきっと誰かの役に立つ」・「アウトプットは最後は自分に返ってくる」ということを意識して個人の記録をOUTPUTしていきたいと思います。
https://anotherskyjp.site/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした