create-react-appで作られた中身からCSSの知識を得る

やっぱり人が作ったコードって最高だな！

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

height: 40vmin;

css.App.css

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

なんだその指定は！

参考：画面からはみ出る!?CSS単位の奥深さを解説！vw、vh、vmin、vmaxの違いと使い方

vminとは

• ビューポート（画面）の幅と高さのうち、短い方を基準にした大きさを表す単位です

vmaxとは

• ビューポートの幅と高さのうち、大きい方を基準にした大きさを表す単位です

おもしろ！確かに画像の大きさがウィンドウ枠の横幅にだけ合わせて変更されるの気になってた。なるほどねぇ～！

pointer-events: none;

css.App.css

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

参考：pointer-events
参考：クリックやタップを無効にするためのCSS「pointer-events: none;」

えっとこれはたしか、くるくる回っているReactのロゴ(.svg)のクラス名だから、この画像へマウスオーバしても指マークとならないようにしているな。ふむ。

@から始まるスタイル

なんだっけ。
確実に学習サイトで学んだ気がする。

App.css

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

参考：アットルール
参考：【CSS-rules】@media

2つ目の参考サイトがわかりやすかった。上記のコードでは省略されているがおそらく初期値のallが指定されていることになるのだろう。で、()の中身は何かというと

prefers-reduced-motion: no-preference

App.css

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

参考：prefers-reduced-motion ※わからん！
参考：アニメーションを望まないユーザーを考えたWeb制作をしよう｜prefers-reduced-motion

世の中、優しさに溢れてるー！

つまりは「アニメーションばっちこいや！(no-preference)」なユーザにだけにアニメーションでReactのロゴをぐるぐる回して見せていたってことかな。
ははぁ～～知らないとできないなこんな配慮。

justify-content: center;

App.css

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

参考：justify-content

う、、、うん。alignとかfloatとかdisplay: frexとか、このあたりは1個記事作ってちゃんと学ぼう。。