Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webエンジニアに転生したらCSS魔導士になった件
Search
Satoshi Komatsu
June 01, 2023
Programming
3
3.8k
Webエンジニアに転生したらCSS魔導士になった件
MIERUNE BBQ #01 発表スライド 2023/05/31
https://mierune.connpass.com/event/284183/
Satoshi Komatsu
June 01, 2023
Tweet
Share
More Decks by Satoshi Komatsu
See All by Satoshi Komatsu
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
350
新宿ダンジョンを可視化してみた
satoshi7190
3
650
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
900
Other Decks in Programming
See All in Programming
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.6k
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.7k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
240
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
offers_20241022_imakiire.pdf
imakurusu
2
360
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.3k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
What's new in Ruby 2.0
geeforr
342
31k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
How GitHub (no longer) Works
holman
311
140k
Building an army of robots
kneath
302
42k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Testing 201, or: Great Expectations
jmmastey
38
7k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Visualization
eitanlees
144
15k
Optimizing for Happiness
mojombo
376
69k
Transcript
©OpenStreetMap contributors Webエンジニアに転生したら CSS魔導士になった件 Satoshi Komatsu
©Project PLATEAU / MLIT Japan 小松 聖 自己紹介 KOMATSU Satoshi
CSS好きです。 フロントエンドエンジニア
©OpenStreetMap contributors 01 私の転生エピソード 02 CSS魔導士の誕生秘話 03 CSS魔法発動(DEMO) 04 CSS魔導士の心得 目次
©OpenStreetMap contributors 01 私の転生エピソード
© 地理院地図 全国最新写真(シームレス) 今から3年前の異世界の話 私の転生エピソード
異世界 2020年 岐阜で造園業(庭師)をやってた。
異世界 2020年 岐阜で造園業(庭師)をやってた。 林業やりたいな・・・
異世界 林業の職業訓練校に入学。 27歳から2年間学生生活を送る。
異世界 が、入学直後に未知のウイルスによ り一時休校。 2ヶ月間自粛生活を送る
異世界 自粛期間中に興味本位でVBAとかGASとか 触ってた。 プログラミング楽しくなった そのうちにjavascriptとか触り始めるように なった。
異世界 林業を学びながら空き時間プログラミングする学生生活を送る
異世界 木を切るよりコード書く方が面白いな・・・ 林業を学びながら空き時間プログラミングする学生生活を送る
異世界 2022年 卒業研究で校内のWEB地図ア プリを独学で作った。 Web開発の楽しさを味合う。
異世界 2022年 林業への就活をせず、Qiitaの 記事で知った今の会社のメン バーに加わりました。
転生 転職 等世界(札幌のWebエンジニア) 異世界(岐阜の庭師) 異世界から等世界へ
©OpenStreetMap contributors 02 CSS魔導士の誕生秘話
CSS魔導士の誕生秘話 もともと趣味でイラスト描いてた
CSS魔導士の誕生秘話 図形をペンで表現するかコードで表現するかの違いだけなので CSS デジタルイラスト ≒ CSSでなにかを表現することが割と好き
CSS魔導士の誕生秘話 ある日、遊び半分でCSSだけで魔法陣を描いて社内に公表した。
CSS魔導士の誕生秘話 CSS魔導士誕生。 社内で「魔法使い」のあだ名がついた。
©OpenStreetMap contributors 03 CSS魔法発動(DEMO)
© 地理院地図 全国最新写真(シームレス) 魔法発動リンク CSS魔法発動(DEMO) https://satoshi7190.github.io/CSS-Magic-Circle/
解説 JavaScript無使用。 アニメーションはanimationプロパ ティと@keyframesで実装。
解説 魔法陣の線はborderプロパティ。 それぞれの太さを変えて線の強弱をつ けている。
解説 使用フォント 「RuneAssignMN Series Fonts」 古代のルーン文字を再現するフォント群 http://michinarinukazawa.github.io/Rune AssignMN_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 contributors 04 CSS魔導士の心得
CSS魔導士の心得 この心得を実践することで 今日からあなたもCSS魔導士になることができます。
© 地理院地図 全国最新写真(シームレス) 「目的」 「手段」 「追求」 CSS魔導士の心得
CSS魔導士の心得 目的 自分が達成したいビジュアルの「目的」を明確にする。
CSS魔導士の心得 魔法少女アニメの魔法陣を考察することで明確なビジョン(目的)も持った。 画像出典:「魔法少女リリカルなのは」シリーズより ⚫ 線は白くてグロー効果に色がある ⚫ 魔法陣の動きがパーツごとにバラバラ ⚫ フォントがギリシャ文字っぽい ⚫
線に太さの違いがある 目的
CSS魔導士の心得 手段 コードを書くスキルだけではなく、ビジュアルを理解し、 それを表現する。
CSS魔導士の心得 手段 魔法陣の特性を理解し、それをコードに落としこんだ。 + 魔法陣は光っている・・・ 光らせるには filter: drop-shadow()だな
CSS魔導士の心得 追求 ディテールへのこだわりと、より良いビジュアルを追求するための 持続的な努力。
CSS魔導士の心得 追求 魔法陣らしさのアニメーションにこだわった。 (その分、今回のスライド作成の時間が減った。) @keyframes animation-duration animation-timing-function animation-delay animation-fill-mode animation-name
animation-iteration-count
まとめ 「目的を理解し、手段を選び、そして追求する」 あなたのCSSはただのコードから素晴らしい魔法になります