ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTMLは自由な表現が可能ですが、素のままでは本当に貧相な表示になります。かといって気の利いたデザインを作るのは大変です。一部の表現が足りないために、全体のバランスが崩れてしまうことも多々あります。

そこで使ってみたいのがWater.cssです。読み込むだけで、Webサイトをそれっぽくしてくれます。

Water.cssの使い方

元のHTMLです。

適用後。良い感じになりました。

ダークモードにも対応しています。

フォーム。

画像、テーブル、アコーディオン式の表示。

リストとタイポグラフィ。

Water.cssは小さいスタイルシートで、シンプルなWebサイトの表示をほんの少しだけ良い感じにしてくれます。素のHTMLだけで作った単純なWebサイトであれば、Water.cssを読み込んでおくだけでちゃんと見られる表示になることでしょう。

Water.cssはCSS製のオープンソース・ソフトウェア(MIT License)です。

Water.css

kognise/water.css: A drop-in collection of CSS styles to make simple websites just a little nicer

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2