【中級者・上級者向け】CSSの理解度チェックシート

中級者から上級者向けCSS理解度チェックシート

今の自分のCSS力を計測するためのチェックシートをつくってみました。足りていない知識やトピックに気付けるよにと作成しています。知らないトピックがあれば、適宜調べながら知識を補っていきましょう。この記事は、定期的に整理して更新していきます。

CSS中級者〜上級者向けの内容が多いかと思いますが、全然わからないという人はこれを元にひとつひとつ調べて理解を深めていきましょう。

  1. リセットCSSを活用している
  2. ::before、::afterを使いこなせる
  3. min-width、max-widthを使いこなせる
  4. メディアクエリーの意味を理解して使いこなせる
  5. vw、vhの単位を使いこなせる
  6. line-height、letter-spacingを使いこなせる
  7. overflow:hidden、overflow-x、overflow-yを使いこなせる
  8. word-breakの使い方がわかる
  9. padding-topを用いて縦横比を維持して拡大・縮小する要素をつくれる(最近はaspect-ratioのプロパティもあります)
  10. flexレイアウトを用いた要素の上下左右中央揃えができる
  11. positionとtransformを用いた要素の上下左右中央揃えができる
  12. emのrem単位を理解している
  13. margin: 0 auto;を使いこなせる
  14. transition、animationを使ったことがある
  15. transformを一通り理解している
  16. :hover、:active、:focusの意味がわかる
  17. フクロウセレクタ(* + *)の意味がわかる
  18. :not(:first-child)の意味がわかる
  19. :not(:nth-of-type(3n-2))の意味がわかる
  20. flex-direction: column;やflex-wrap: wrap;を日頃から使っている
  21. flex: none;、flex: auto;などの使い方がわかる
  22. Sass(SCSS)、Less、Stylusのいずれかの使い方がわかる
  23. クラスの命名規則(BEMなど)について理解がある
  24. CSS設計について調べたことがある(OOCSS、SMACSS、ECSSなど)
  25. 印刷用CSSを書いたことがある
  26. calc()を使ったことがある
  27. counter-reset、counter-increment、counter()を知っている
  28. CSSのminifyをしたことがある
  29. 文章の縦書きをCSSで設定できる
  30. cursorプロパティを使える
  31. pointer-events、visiblity、opacity、display: none;の挙動の違いがわかる
  32. rgba()を使っている
  33. CSSで三角形が作れる
  34. background-size、background-repeat、background-imageがわかる
  35. linear-gradient、radial-gradientがわかる
  36. https://caniuse.com/を知っている
  37. flexレイアウト内のmarginの挙動が理解できている
  38. position: relative;とposition:absolute;とposition: fixed;の違いがわかっている
  39. CSSにData URIで画像を埋め込んだことがある
  40. box-sizingの挙動を理解している
  41. list-style: none;を使ったことがある
  42. font-familyの設定の仕方がわかる
    (英字と日本語フォントを分けて指定する、句読点や括弧を文字づめするなど)
  43. Gridレイアウト、gapを使える
  44. Purge CSSを知っている
  45. stylelint、またはCSS combを知っている
  46. border-radius: 9999pxの使い方がわかる
  47. ウェブフォント(Google FontsAdobe Fontsを使ったことがある)
  48. Tailwind CSSBootstrapを使ったことがある
  49. Fontawesomeでアイコンを使用したことがある(Bootstrap Iconsなどでもよい)
  50. SVGを操作するfillプロパティやclip-pathを知っている
  51. filterプロパティを知っている
  52. CSSスプライトがわかる(最近のプロジェクトでは使われることはほぼないため、取り消しておきます。)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です