CSS CheatBook

このサイトについて

CSS のプロパティを、可能な限り平易な表現で説明することを試みたサイトです。

CSS プロパティは 100 個以上存在し、それらを全て使いこなすことは現実的ではありません。 一方で、全プロパティの数割をマスターしておくだけで、実現したいデザインの大部分はは再現することができます。 そこで、利用頻度や難しさで階層分けし、頻出プロパティや頻出パターンの説明に特化することで、初学者の方々の助けになるのではと思い公開させていただきました。

内容について

可能な限り、正確な説明を心がけています。しかし、実際にほぼ利用されない割に解説が大変、そもそも筆者が理解しきれていない部分などは省略、簡略化しているものもあります。 各ページの下部に MDN へのリンクを付けていますので、より正確な情報を知りたい場合はそちらをご覧ください。

このサイトの使い方

教科書として利用する

利用頻度が高く簡単なプロパティから順に学習することをおすすめします。 学習の順序は考慮していませんので、各々のやりやすい学習方法を見つけていただければと思います。

リファレンスとして利用する

サイドバーの検索ボックスからプロパティを検索することができます。 また、「横並べ」「グラデーション」など、逆引き的な記事もありますのでご活用ください。

開発

こちらのGithub レポジトリ にて開発を行なっています。

Contribution について

私自身、HTML/CSS に精通しているわけではありません。 間違った記述やコードがあるかもしれません。 おかしな部分を見つけましたら、Github の issue などを通じてご連絡いただけますと幸いです。

日本語の言い回しや文法等の改善やリファクタリングも歓迎です。

加えて、技術的な部分の指摘や PR もお待ちしています。 MDX 関連の remark/rehype プラグインや Webpack の loader を自作している部分がありますが、ナイーブな実装すぎてかなりヤバい状態です。 アドバイス、PR 等いただけると嬉しいです。

貢献の方法

  • コンテンツの追加、修正(PR)
  • コンテンツの追加依頼、修正依頼、バグ報告(issue)
  • Web サービスの改善(PR)
  • SNS 等での拡散(現在は未公開のステータスですので、正式な公開までお控えください)

技術スタック

参考に、このサイトで利用している技術です。

  • React, TypeScript, Next.js, Tailwind.css, MDX

免責事項

このサイトの利用やこのサイトで得た情報の利用は自己責任でお願いします。このサイトにある情報の正確性および完全性は保証しません。正確な情報が必要な場合は、然るべき情報源をご参照ください。