Webエンジニアに転生したらCSS魔導士になった件

MIERUNE BBQ #01 発表スライド 2023/05/31
https://mierune.connpass.com/event/284183/

Transcript

1. ©OpenStreetMap contributors
   Webエンジニアに転生したら
   CSS魔導士になった件
   Satoshi　Komatsu
   

   View Slide

2. ©Project PLATEAU / MLIT Japan
   小松 聖
   自己紹介
   KOMATSU Satoshi
   CSS好きです。
   フロントエンドエンジニア
   

   View Slide

3. ©OpenStreetMap contributors
   01　私の転生エピソード
   02　CSS魔導士の誕生秘話
   03　CSS魔法発動(DEMO)
   ０４　CSS魔導士の心得
   目次
   

   View Slide

4. ©OpenStreetMap contributors
   01 私の転生エピソード
   

   View Slide

5. © 地理院地図 全国最新写真（シームレス）
   今から３年前の異世界の話
   私の転生エピソード
   

   View Slide

6. 異世界
   2020年
   岐阜で造園業（庭師）をやってた。
   

   View Slide

7. 異世界
   2020年
   岐阜で造園業（庭師）をやってた。
   林業やりたいな・・・
   

   View Slide

8. 異世界
   林業の職業訓練校に入学。
   2７歳から２年間学生生活を送る。
   

   View Slide

9. 異世界
   が、入学直後に未知のウイルスによ
   り一時休校。
   2ヶ月間自粛生活を送る
   

   View Slide

10. 異世界
    自粛期間中に興味本位でVBAとかGASとか
    触ってた。
    プログラミング楽しくなった
    そのうちにjavascriptとか触り始めるように
    なった。
    

    View Slide

11. 異世界
    林業を学びながら空き時間プログラミングする学生生活を送る
    

    View Slide

12. 異世界
    木を切るよりコード書く方が面白いな・・・
    林業を学びながら空き時間プログラミングする学生生活を送る
    

    View Slide

13. 異世界
    2022年
    卒業研究で校内のWEB地図ア
    プリを独学で作った。
    Web開発の楽しさを味合う。
    

    View Slide

14. 異世界
    2022年
    林業への就活をせず、Qiitaの
    記事で知った今の会社のメン
    バーに加わりました。
    

    View Slide

15. 転生
    転職
    等世界（札幌のWebエンジニア）
    異世界（岐阜の庭師）
    異世界から等世界へ
    

    View Slide

16. ©OpenStreetMap contributors
    02 CSS魔導士の誕生秘話
    

    View Slide

17. CSS魔導士の誕生秘話
    もともと趣味でイラスト描いてた
    

    View Slide

18. CSS魔導士の誕生秘話
    図形をペンで表現するかコードで表現するかの違いだけなので
    CSS
    デジタルイラスト
    ≒
    CSSでなにかを表現することが割と好き
    

    View Slide

19. CSS魔導士の誕生秘話
    ある日、遊び半分でCSSだけで魔法陣を描いて社内に公表した。
    

    View Slide

20. CSS魔導士の誕生秘話
    CSS魔導士誕生。
    社内で「魔法使い」のあだ名がついた。
    

    View Slide

21. ©OpenStreetMap contributors
    03 CSS魔法発動（DEMO）
    

    View Slide

22. © 地理院地図 全国最新写真（シームレス）
    魔法発動リンク
    CSS魔法発動（DEMO）
    https://satoshi7190.github.io/CSS-Magic-Circle/
    

    View Slide

23. 解説
    JavaScript無使用。
    アニメーションはanimationプロパ
    ティと@keyframesで実装。
    

    View Slide

24. 解説
    魔法陣の線はborderプロパティ。
    それぞれの太さを変えて線の強弱をつ
    けている。
    

    View Slide

25. 解説
    使用フォント
    「RuneAssignMN Series Fonts」
    古代のルーン文字を再現するフォント群
    http://michinarinukazawa.github.io/Rune
    AssignMN_Series_Fonts/
    ※A〜Zのアルファベットをただ羅列してるだけ。
    

    View Slide

26. 解説
    CSSのcos(),sin()関数でピクセル座標を計算
    して文字を円に配置。
    --angle: calc(360deg / 52 * var(--index));
    --x: calc(cos(var(--angle)) * 30px);
    --y: calc(sin(var(--angle)) * 30px);
    translate: calc(var(--x) - 50%) calc)var(--y) - 50%);
    

    View Slide

27. perspective: 2000px;
    perspective-origin: center;
    ３D効果
    

    View Slide

28. 解説
    filter: drop-shadow(0px 0px 10px #913513)
    drop-shadow(0px 0px 10px #913513)
    drop-shadow(0px 0px 20px #913513);
    グロー効果
    

    View Slide

29. こだわりポイント
    filter: drop-shadow(0px 0px 10px #913513)
    drop-shadow(0px 0px 10px #913513)
    drop-shadow(0px 0px 20px #913513)
    drop-shadow(0px 0px 20px #FFF);
    filter: drop-shadow(0px 0px 10px #913513)
    drop-shadow(0px 0px 10px #913513)
    drop-shadow(0px 0px 20px #913513);
    さらに白い影を重ねることでより光る表現に。
    

    View Slide

30. こだわりポイント
    filter: blur(10px);
    opacity: 0.1;
    filter: blur(10px);
    一層目のdiv要素
    二層目のdiv要素
    外側にはさらにぼかし効果をつけたdiv要素を重ねて表現。
    

    View Slide

31. ©OpenStreetMap contributors
    04 CSS魔導士の心得
    

    View Slide

32. CSS魔導士の心得
    この心得を実践することで
    今日からあなたもCSS魔導士になることができます。
    

    View Slide

33. © 地理院地図 全国最新写真（シームレス）
    「目的」　「手段」　「追求」
    CSS魔導士の心得
    

    View Slide

34. CSS魔導士の心得
    目的
    自分が達成したいビジュアルの「目的」を明確にする。
    

    View Slide

35. CSS魔導士の心得
    魔法少女アニメの魔法陣を考察することで明確なビジョン(目的)も持った。
    画像出典：「魔法少女リリカルなのは」シリーズより
    ⚫ 線は白くてグロー効果に色がある
    ⚫ 魔法陣の動きがパーツごとにバラバラ
    ⚫ フォントがギリシャ文字っぽい
    ⚫ 線に太さの違いがある
    目的
    

    View Slide

36. CSS魔導士の心得
    手段
    コードを書くスキルだけではなく、ビジュアルを理解し、
    それを表現する。
    

    View Slide

37. CSS魔導士の心得
    手段
    魔法陣の特性を理解し、それをコードに落としこんだ。
    +
    魔法陣は光っている・・・
    光らせるには
    filter: drop-shadow(）だな
    

    View Slide

38. CSS魔導士の心得
    追求
    ディテールへのこだわりと、より良いビジュアルを追求するための
    持続的な努力。
    

    View Slide

39. CSS魔導士の心得
    追求
    魔法陣らしさのアニメーションにこだわった。
    （その分、今回のスライド作成の時間が減った。）
    @keyframes
    animation-duration
    animation-timing-function
    animation-delay
    animation-fill-mode
    animation-name
    animation-iteration-count
    

    View Slide

40. まとめ
    「目的を理解し、手段を選び、そして追求する」
    あなたのCSSはただのコードから素晴らしい魔法になります
    

    View Slide