5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MDCAdvent Calendar 2020

Day 4

ClasslessCSSで手軽に綺麗なページを作ろう

Last updated at Posted at 2020-12-03

概要

  • CSSライブラリはBootstrapなどが有名ですが、それらはライブラリが定義してくれたCSSに沿って以下のサンプルのように自分でHTMLタグにClass名をつけて使うというものです
<button class="btn btn-primary">ボタン</button>
  • ちゃんとしたアプリケーションを作る際はこれで特に問題はないですが、ちょっとしたサンプルアプリだったりレイアウトにこだわらない簡単なWebページを作るときはちょっと面倒くさくなりますよね
  • 今回紹介するClasslessCSSはそのようなケースで簡単に綺麗なUIを実現できるライブラリです

ClasslessCSS

  • ClasslessCSSはライブラリが提供するCSSのセレクタが全てタグ名で定義されています
    • なので単にHTMLを書くだけでライブラリが適用されるため、セマンティックなHTMLを書いていくだけで綺麗なレイアウトを実現することができます
  • 当然タグ名で定義されてるので気に入らないレイアウトを適用したくないといったケースでは面倒なことになりますが、それを気にするようなケースはClasslessCSSではなく通常のCSSライブラリを使うと良いでしょう

ライブラリの紹介

  • ClasslessCSSライブラリはdbohdan/classless-css: A list of classless CSS themes/frameworks with screenshotsというリポジトリでまとめられています
    • ClasslessCSSライブラリが24種類に加えて、少量のClass属性の定義で使えるClass-lightなライブラリ7種類が紹介されています
    • READMEの中で各ライブラリのレイアウトのキャプチャも掲載されているので好みのライブラリを探すのも簡単ですね

スクリーンショット 2020-12-03 18.42.37.png

  • その中で私が使ったことのあるライブラリを2つ紹介します

new.css

  • 1つめはnew.cssとういうライブラリです
  • 癖がなくてシンプルな感じがいいですね
  • そして特徴的なのがデバイスのテーマ設定に応じて自動でライトモードとダークモードが切り替わるところです
  • 以下の2行をheadタグに入れるだけで使えます
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css">

スクリーンショット 2020-12-03 18.44.54.pngスクリーンショット 2020-12-03 18.45.34.png

sakura.css

  • 2つめはsakura.cssです
  • カラーバリエーションが4種類用意されていますが、どれも柔らかい感じの色合いで気に入っています
  • 以下の1行をheadタグに入れるだけで使えます
    • 他のテーマを使いたい場合はsakura.cssの部分をsakura-earthly.csssakura-vader.csssakura-dark.cssといった感じで変更すればOKです
<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css">

スクリーンショット 2020-12-03 18.55.43.pngスクリーンショット 2020-12-03 18.56.15.pngスクリーンショット 2020-12-03 18.56.44.pngスクリーンショット 2020-12-03 18.57.03.png

まとめ

  • ClasslessCSSは読み込むだけで使えるのでとてもお手軽で便利です
  • 自分的にはちょっとしたデモアプリの見た目を整えたい時などの必須アイテムになっています
  • みなさんも機会があれば是非使ってみてください
5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?