非依存で設定等もJavaScriptも不要、HTML要素にクリーンなプリセットスタイルを適用するCSSフレームワーク・「matcha.css」

matcha.css

matcha.cssは非依存で設定等もJavaScriptも不要、HTML要素にクリーンなプリセットスタイルを適用するCSSフレームワークです。説明が上手くできないのですが、柔軟性のあるCSSリセットというイメージです。

デフォルトのブラウザスタイルシートと同様にHTML要素のスタイルを広範囲に設定したものですが、極力疑似要素を使うなど導入しても既存サイトに影響が出にくい配慮がなされており、多くのブラウザに対応できるようになっています。それだけでなく、カスタムビルドツールが用意されていて、自分のオリジナルmatcha.cssを作る事も可能です。

例えば以下のようなHTMLの場合

<nav>
  <ol>
    <li><a href="#">Viennoiseries</a></li>
    <li><a href="#">Tartelettes</a></li>
    <li><a href="#">Aux mûres</a></li>
  </ol>
</nav>

matcha.cssでは以下のように表示され

olをulに変更すると

<nav>
  <ul>
    <li>
      <a href="#">Viennoiseries</a>
      <ul>
        <li><a href="#">Croissant</a></li>
        <li><a href="#">Éclair</a></li>
        <li>
          <a href="#">Tartelettes</a>
          <ul>
            <li><a href="#">Aux mûres</a></li>
            <li><a href="#">Aux framboises</a></li>
            <li class="disabled"><a href="#">Aux fraises</a></li>
          </ul>
        </li>
        <li><a href="#">Pain au chocolat</a></li>
      </ul>
    </li>
    <li class="selected"><a href="#">Macarons</a></li>
    <li class="disabled"><a href="#">Pain perdu</a></li>
  </ul>
</nav>

以下の様に表示されます。

他、殆どすべてに近いHTML要素に独自のCSSリセットを設定できるCSSフレームワークとなっており、前述したようにピュアCSS、設定やビルドステップ及びJavaScript等も不要、非依存、不要で且つ軽量で自分用のmatcha.cssもすぐに作れるカスタムビルダーも用意されています。

説明が下手でよく分からん、という方もいると思いますので使ってみるのが早いと思います。

<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">

上記を読み込めばすぐに試せます。微妙に感じた点はカスタムビルダーで自分用に直せばOKですね。結構良いんじゃないかなと思います。余談ですが、matchaは「抹茶」の事みたいです。ライセンスはMITとの事。

matcha.cssGithub