MIERUNE BBQ #01 発表スライド 2023/05/31 https://mierune.connpass.com/event/284183/
©OpenStreetMap contributorsWebエンジニアに転生したらCSS魔導士になった件Satoshi Komatsu
View Slide
©Project PLATEAU / MLIT Japan小松 聖自己紹介KOMATSU SatoshiCSS好きです。フロントエンドエンジニア
©OpenStreetMap contributors01 私の転生エピソード02 CSS魔導士の誕生秘話03 CSS魔法発動(DEMO)04 CSS魔導士の心得目次
©OpenStreetMap contributors01 私の転生エピソード
© 地理院地図 全国最新写真(シームレス)今から3年前の異世界の話私の転生エピソード
異世界2020年岐阜で造園業(庭師)をやってた。
異世界2020年岐阜で造園業(庭師)をやってた。林業やりたいな・・・
異世界林業の職業訓練校に入学。27歳から2年間学生生活を送る。
異世界が、入学直後に未知のウイルスにより一時休校。2ヶ月間自粛生活を送る
異世界自粛期間中に興味本位でVBAとかGASとか触ってた。プログラミング楽しくなったそのうちにjavascriptとか触り始めるようになった。
異世界林業を学びながら空き時間プログラミングする学生生活を送る
異世界木を切るよりコード書く方が面白いな・・・林業を学びながら空き時間プログラミングする学生生活を送る
異世界2022年卒業研究で校内のWEB地図アプリを独学で作った。Web開発の楽しさを味合う。
異世界2022年林業への就活をせず、Qiitaの記事で知った今の会社のメンバーに加わりました。
転生転職等世界(札幌のWebエンジニア)異世界(岐阜の庭師)異世界から等世界へ
©OpenStreetMap contributors02 CSS魔導士の誕生秘話
CSS魔導士の誕生秘話もともと趣味でイラスト描いてた
CSS魔導士の誕生秘話図形をペンで表現するかコードで表現するかの違いだけなのでCSSデジタルイラスト≒CSSでなにかを表現することが割と好き
CSS魔導士の誕生秘話ある日、遊び半分でCSSだけで魔法陣を描いて社内に公表した。
CSS魔導士の誕生秘話CSS魔導士誕生。社内で「魔法使い」のあだ名がついた。
©OpenStreetMap contributors03 CSS魔法発動(DEMO)
© 地理院地図 全国最新写真(シームレス)魔法発動リンクCSS魔法発動(DEMO)https://satoshi7190.github.io/CSS-Magic-Circle/
解説JavaScript無使用。アニメーションはanimationプロパティと@keyframesで実装。
解説魔法陣の線はborderプロパティ。それぞれの太さを変えて線の強弱をつけている。
解説使用フォント「RuneAssignMN Series Fonts」古代のルーン文字を再現するフォント群http://michinarinukazawa.github.io/RuneAssignMN_Series_Fonts/※A〜Zのアルファベットをただ羅列してるだけ。
解説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%);
perspective: 2000px;perspective-origin: center;3D効果
解説filter: drop-shadow(0px 0px 10px #913513)drop-shadow(0px 0px 10px #913513)drop-shadow(0px 0px 20px #913513);グロー効果
こだわりポイント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);さらに白い影を重ねることでより光る表現に。
こだわりポイントfilter: blur(10px);opacity: 0.1;filter: blur(10px);一層目のdiv要素二層目のdiv要素外側にはさらにぼかし効果をつけたdiv要素を重ねて表現。
©OpenStreetMap contributors04 CSS魔導士の心得
CSS魔導士の心得この心得を実践することで今日からあなたもCSS魔導士になることができます。
© 地理院地図 全国最新写真(シームレス)「目的」 「手段」 「追求」CSS魔導士の心得
CSS魔導士の心得目的自分が達成したいビジュアルの「目的」を明確にする。
CSS魔導士の心得魔法少女アニメの魔法陣を考察することで明確なビジョン(目的)も持った。画像出典:「魔法少女リリカルなのは」シリーズより⚫ 線は白くてグロー効果に色がある⚫ 魔法陣の動きがパーツごとにバラバラ⚫ フォントがギリシャ文字っぽい⚫ 線に太さの違いがある目的
CSS魔導士の心得手段コードを書くスキルだけではなく、ビジュアルを理解し、それを表現する。
CSS魔導士の心得手段魔法陣の特性を理解し、それをコードに落としこんだ。+魔法陣は光っている・・・光らせるにはfilter: drop-shadow()だな
CSS魔導士の心得追求ディテールへのこだわりと、より良いビジュアルを追求するための持続的な努力。
CSS魔導士の心得追求魔法陣らしさのアニメーションにこだわった。(その分、今回のスライド作成の時間が減った。)@keyframesanimation-durationanimation-timing-functionanimation-delayanimation-fill-modeanimation-nameanimation-iteration-count
まとめ「目的を理解し、手段を選び、そして追求する」あなたのCSSはただのコードから素晴らしい魔法になります