Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
Post on:2024年5月28日
sponsors
CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。
CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。
チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。
チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。
では、どんなチートシートがあるのか紹介します。
まずは、CSS Flexboxのチートシート。Flexboxの各プロパティと値でレイアウトがどのようになるか一目できます。チートシートは英語ですが、プロパティと値を使用してレイアウトがどうなるのか分かればよいので、英語が苦手な人でも問題ないと思います。
Flexboxの各プロパティの詳しい説明は、下記の記事をご覧ください。
続いて、CSS Gridのチートシート。
CSS Gridの各プロパティと値でレイアウトがどのようになるか一目で確認できます。
CSS Gridの基本的な使い方は、下記の記事をご覧ください。
知っておくと便利なCSSのセレクタがまとめられたチートシート。単純なセレクタをはじめ、セレクタのコンビネーション、疑似クラス、疑似要素、属性セレクタなどがまとめられています。
セレクタの中でもよく使うのが、nth-child()かもしれません。最初だけ、最後だけ、何番目だけ、何番目と何番目、何番目おきに、奇数番目、偶数番目など、ぱっと見て分かると思います。
CSS 疑似クラス:nth-child() のチートシート（高解像度版）
:nth-child()の使い方は、下記の記事をご覧ください。
CSSのdisplayも重要なプロパティです。値にflex, gridを設定したり、ブロックやインラインにしたい時にはblock, inlineを設定します。
displayプロパティは他にも便利な値があります。
- 「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック
- CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
CSSのpositionも欠かせません。fixedで固定配置にしたり、absoluteで絶対配置にしたり、stickyで追従させることもできます。
positionの使い方は、下記の記事をご覧ください。
- position: sticky;の仕組みや実際の使い方をやさしく解説
- モダンCSSによる絶対配置（position: absolute;）の削減
- CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
VS Codeのチートシートもあります。Windows, macOS対応のよく使用する操作のショートカットをまとめたものです。
最後は、Gitの基本的なコマンドをまとめたチートシート。
sponsors
