クラスを利用しないnoクラスのCSSフレームワーク「Water.css」を使用する手順

クラスを利用しないnoクラスのCSSフレームワーク「Water.css」を使用する手順

一般的なCSSフレームワークのようにクラスを指定して利用するのではなく、クラスを利用せずにスタイルを適応するnoクラスのCSSフレームワークWater.cssの簡単な使い方を記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43

※windows10にApacheのインストールはこちら

HTML作成

まずは通常のhtmlを作成してみます。

レイアウト結果

Water.css導入

作成したhtmlに「Water.css」を適応してみます。作成したhtmlに以下を追加するだけ利用できます。

さきほどのコードに追加してみます。

レイアウトが適応されていることが確認できます。

ダークモードを利用したい場合は、以下のコードに変更します。