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

by Satoshi Komatsu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

解説 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%);

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

こだわりポイント 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); さらに白い影を重ねることでより光る表現に。

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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