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