CSS で
MS を作る

CSS で書ける
”複雑なスタイル”
とは？？？🤔

どんなものがあるのか調べてみました。

つよい・・・

CSS で静止画を描くためは

• 描きたい絵をパーツとして分解して考える
  • 最小のパーツを 1div として考える
• 線と面という認識で絵を見る

head という div タグの中に

各パーツがある

灰色の部分が面、

黒い部分が線として考える

• border
   
• box-shadow
• border
• background-color

線 →

面 →

CSS に向いている静止画って
どんなもの？

• パーツとして分割しやすい

• 曲線よりも直線のほうが多い

• 左右対称だとなおよし

では、

これらを描くために
最適な題材は...？

実際に
やってみた。

まずは各パーツの位置を potision で指定する。

下に z-index: -1; で img 画像をひくと便利。

各パーツごとに線を実装していく。

このとき SCSS で実装すると色々便利だった。

疑似要素（before, after）は最大限活用した。

初期値の設定は

• 各カラーの変数
• position: absolute;
• content: '';

疑似要素をたくさん使うので

全てに content をつけた。

開発するときはホットリロードが便利なので Nuxt.js で開発した。

頭を実装し終わった段階で、コーディングするときのポイントが見えてきた。

• 末端の div に名前はつけない
  • 線の一本一本に名前なんか考えつかなかった
  • div:nth-child(n) {} をたくさん使っていく
     
• 親要素の div は rotate() しないこと
  • 子要素の top と left を動かすときに
    ​直感で動かしにくくなるため
     
• border は基本 top か left しか使わない
  • こうすることで witdh と height を変更しても
    要素自体の位置が変わらないため楽ちんになる

そんなこんなで、
あとは色をつけて

完成した。

完成した

ガンダムがこちらです。

これ全部 CSS

まとめ

• 実際に手を動かしたことで
  CSS 力が格段に上がった

• とはいえ業務レベルで使う機会はないかも？

  • 次は SVG アニメーションを
    使っていきたい機運

• 絵を描くのと同じ要領でガンダムが作れる！
  という自信がついた

  • 思っていたよりも簡単にできた

  • 工数でいうと4日くらいで作れた

以上、

「CSS で MS を作る」

でした。ご静聴ありがとうございました！
😉