eclairのブログ 
今の自分のCSS力を計測するためのチェックシートをつくってみました。足りていない知識やトピックに気付けるよにと作成しています。知らないトピックがあれば、適宜調べながら知識を補っていきましょう。この記事は、定期的に整理して更新していきます。
CSS中級者〜上級者向けの内容が多いかと思いますが、全然わからないという人はこれを元にひとつひとつ調べて理解を深めていきましょう。
- リセットCSSを活用している
- ::before、::afterを使いこなせる
- min-width、max-widthを使いこなせる
- メディアクエリーの意味を理解して使いこなせる
- vw、vhの単位を使いこなせる
- line-height、letter-spacingを使いこなせる
- overflow:hidden、overflow-x、overflow-yを使いこなせる
- word-breakの使い方がわかる
- padding-topを用いて縦横比を維持して拡大・縮小する要素をつくれる（最近はaspect-ratioのプロパティもあります）
- flexレイアウトを用いた要素の上下左右中央揃えができる
- positionとtransformを用いた要素の上下左右中央揃えができる
- emのrem単位を理解している
- margin: 0 auto;を使いこなせる
- transition、animationを使ったことがある
- transformを一通り理解している
- :hover、:active、:focusの意味がわかる
- フクロウセレクタ（* + *）の意味がわかる
- :not(:first-child)の意味がわかる
- :not(:nth-of-type(3n-2))の意味がわかる
- flex-direction: column;やflex-wrap: wrap;を日頃から使っている
- flex: none;、flex: auto;などの使い方がわかる
- Sass(SCSS)、Less、Stylusのいずれかの使い方がわかる
- クラスの命名規則（BEMなど）について理解がある
- CSS設計について調べたことがある（OOCSS、SMACSS、ECSSなど）
- 印刷用CSSを書いたことがある
- calc()を使ったことがある
- counter-reset、counter-increment、counter()を知っている
- CSSのminifyをしたことがある
- 文章の縦書きをCSSで設定できる
- cursorプロパティを使える
- pointer-events、visiblity、opacity、display: none;の挙動の違いがわかる
- rgba（）を使っている
- CSSで三角形が作れる
- background-size、background-repeat、background-imageがわかる
- linear-gradient、radial-gradientがわかる
- https://caniuse.com/を知っている
- flexレイアウト内のmarginの挙動が理解できている
- position: relative;とposition:absolute;とposition: fixed;の違いがわかっている
- CSSにData URIで画像を埋め込んだことがある
- box-sizingの挙動を理解している
- list-style: none;を使ったことがある
- font-familyの設定の仕方がわかる
（英字と日本語フォントを分けて指定する、句読点や括弧を文字づめするなど） - Gridレイアウト、gapを使える
- Purge CSSを知っている
- stylelint、またはCSS combを知っている
- border-radius: 9999pxの使い方がわかる
- ウェブフォント（Google Fonts、Adobe Fontsを使ったことがある）
- Tailwind CSS、Bootstrapを使ったことがある
- Fontawesomeでアイコンを使用したことがある（Bootstrap Iconsなどでもよい）
- SVGを操作するfillプロパティやclip-pathを知っている
- filterプロパティを知っている
CSSスプライトがわかる（最近のプロジェクトでは使われることはほぼないため、取り消しておきます。）
