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

サイト構築 -CSS

Post on:2019年4月10日

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」も用意されています。

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css'>

1	<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css'>

カスタマイズ

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

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

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

$background: #ff48c2 !default;
$background-alt: #00ff00 !default;

$text-main: #dbdbdb !default;
$text-bright: #ffffff !default;

$links: #ff0022 !default;
$focus: #ffc400 !default;
$border: #00ffff !default;
$code: #001aff !default;

$button-hover: #324759 !default;
$animation-duration: 0.1s !default;

$form-placeholder: #a9a9a9 !default;
$form-text: #ffffff !default;

@import 'parts/core';