【中級者〜上級者向け」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を用いて縦横比を維持して拡大・縮小する要素をつくれる
  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. CSS combを知っている
  24. クラスの命名規則(BEMなど)について理解がある
  25. CSS設計について調べたことがある(OOCSS、SMACSS、ECSSなど)
  26. 印刷用CSSを書いたことがある
  27. calc()を使ったことがある
  28. counter-reset、counter-increment、counter()を知っている
  29. ウェブフォント(Google Fonts、Adobe Fonts)を使ったことがある
  30. CSSのminifyをしたことがある
  31. 文章の縦書きをCSSで設定できる
  32. cursorプロパティを使える
  33. pointer-events、visiblity、opacity、display: none;の挙動の違いがわかる
  34. font-familyの設定の仕方がわかる
  35. rgba()を使っている
  36. CSSで三角形が作れる
  37. background-size、background-repeat、background-imageがわかる
  38. linear-gradient、radial-gradientがわかる
  39. https://caniuse.com/を知っている
  40. flexレイアウト内のmarginの挙動が理解できている
  41. position: relative;とposition:absolute;とposition: fixed;の違いがわかっている
  42. CSSスプライトがわかる
  43. CSSにData URIで画像を埋め込んだことがある
  44. box-sizingの挙動を理解している
  45. list-style: none;を使ったことがある

コメントを残す

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