[CSS]シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css

シンプルなWebサイトをすぐに構築したい時、デモページを簡単に作成したい時、CSSでスタイルするのに時間をかけたくない時に便利なCSSのフレームワークを紹介します。

class付与を一切必要としないスタイルシートで、HTMLページを用意したら、head内に外部CSSとして加えるだけで、すぐに利用できます。

サイトのキャプチャ

water.css
water.css -GitHub

water.cssの特徴

water.cssはシンプルな静的Webサイトを少しだけ美しくするためのスタイルシートのコレクションです。

  • classは一切無しで、スタイルシートを適用。
  • レスポンシブ対応。
  • 高品質なコード。
  • 幅広いブラウザのサポート(kindleでも動作します)。
  • 2Kbで、超軽量。

water.cssのデモ

water.cssには、ダークテーマとライトテーマの2種類が用意されています。
ボタンやフォームなどには、邪魔にならない美しいアニメーションが適用されています。

サイトのキャプチャ

デモページ(ダークテーマ)

サイトのキャプチャ

デモページ(ダークテーマ)

サイトのキャプチャ

デモページ(ダークテーマ)

ライトテーマは、デモページの「Switch theme」から変更できます。

サイトのキャプチャ

デモページ(ライトテーマ)

water.cssの使い方

Step 1: HTMLページを用意

使用するHTMLページを用意します。

Step 2: 外部ファイル

あとは、当スタイルシートを外部ファイルとして記述するだけです。
ライトテーマ用の「light.css」も用意されています。

カスタマイズ

water.cssはSassで構築されているので、カスタマイズも簡単です。ダーク・ライト以外のカラーを使用したい場合は、下記の変数を変更します。

  • $background
  • $background-alt
  • $text-main
  • $text-bright
  • $links
  • $focus
  • $border
  • $code
  • $button-hover
  • $animation-duration
  • $form-placeholder
  • $form-text

テーマを一から作る時は、下記のように変数を定義します。

sponsors

top of page

©2019 coliss