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
VSCode 箱推しで Emmet 担
Search
Kazuya Takami
April 15, 2023
Business
0
140
VSCode 箱推しで Emmet 担
Webナイト宮崎 Vol.17 〜てげフリーテーマで話したい〜 登壇資料
Kazuya Takami
April 15, 2023
Tweet
Share
More Decks by Kazuya Takami
See All by Kazuya Takami
WordPressをこれから始める人のためのテーマ講座
miiitaka
0
75
HTML栄枯盛衰は世の習い
miiitaka
0
390
GoogleAppsScript入門 vol.2
miiitaka
0
110
GoogleAppsScript入門
miiitaka
0
96
Googleデータポータルで見える化に挑戦vol.2
miiitaka
0
75
Googleデータポータルで見える化に挑戦vol.1
miiitaka
0
440
Other Decks in Business
See All in Business
HRBrain|26卒 新卒向け|会社説明資料
hrbrain
2
520
「強い」エンジニアと働く中で、新卒1年目・未経験プロダクトマネージャーが何に悩み、どこに自分の価値を見出したか
kassy1127
17
7.2k
第24回クラウド女子会 登壇資料
o2mami
1
1.4k
KADOKAWA Connected|会社紹介資料/Corporate Introduction
kadokawaconnected
4
50k
生成AIに個人情報/秘密情報を入力する際の法的論点20240318
kenjisugiura
1
190
akippa株式会社 - 会社紹介資料
akippa
2
44k
【採用サイト公開用】ファーマイノベーション事業部_紹介資料
ubie
0
290
newmo 採用資料 / Join Our Team
newmo
1
1.9k
ラクスル株式会社 会社概要(IR)
raksulrecruiting
5
5.1k
会社説明_採用ページ
arisaiyou
0
14k
Стратегия решает проблемы на всех уровнях компании
alexanderbyndyu
0
140
20240401 新卒研修 - ピクシブにおける技術領域
harukasan
PRO
1
530
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Happy Clients
brianwarren
92
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
A better future with KSS
kneath
231
16k
Being A Developer After 40
akosma
57
580k
Atom: Resistance is Futile
akmur
259
25k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Why Our Code Smells
bkeepers
PRO
331
56k
How STYLIGHT went responsive
nonsquared
92
4.8k
Adopting Sorbet at Scale
ufuk
68
8.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Transcript
VSCode 箱推しで Emmet 担 - Web Night Miyazaki vol.17 -
高見 和也(Takami Kazuya) https://twitter.com/miiitaka https://www.facebook.com/miiitaka { Company: “株式会社まなびと” }, {
Role: “Front-End Developer 兼 代表取締役” } https://github.com/miiitaka
皆さんは推し活してますか?
「推し活」とは、自分が推しているアイドルや俳優、キャラクターなどを愛でた り応援したりする活動のこと。もともとは、アイドルグループのお気に入りメン バーを「推しメン」と呼ぶようになったことから「推し」という表現が広まり、 そこから派生して「推し活」という言葉が生まれた。 特定のメンバーを担当して応援する「〇〇担」、 推す対象を変えることを「推し変(おしへん)」、 グループのメンバー全員をまるごと推すことを「箱推し(はこおし)」 と言う。 推し活(おしかつ) ※出典:Takapedia
\僕はVisual Studio Code を箱推ししています/
\そして Emmet 担です/
Emmet(エメット)※旧芸名:Zen Coding デビュー 2008年 所属グループ VSCode、PHPStorm、Dreamweaver etc… 出身地 アメリカ合衆国 事務所
オープンソース 趣味 入力補完 特技 略記展開 カラオケの18番 残響散歌 ※画像は公式プロフィールページ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> </body> </html>
!
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> <nav> <ul> <li class="list1"><a href="">menu1</a></li> <li class="list2"><a href="">menu2</a></li> <li class="list3"><a href="">menu3</a></li> <li class="list4"><a href="">menu4</a></li> <li class="list5"><a href="">menu5</a></li> </ul> </nav> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> nav>ul>(.list$>a{menu$})*5 </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> <nav> <ul> <li class="list1"><a href="">menu1</a></li> <li class="list2"><a href="">menu2</a></li> <li class="list3"><a href="">menu3</a></li> <li class="list4"><a href="">menu4</a></li> <li class="list5"><a href="">menu5</a></li> </ul> </nav> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title></title> </head> <body> <nav> <ul> <li class="list1"><a href="">menu1</a></li> <li class="list2"><a href="">menu2</a></li> <li class="list3"><a href="">menu3</a></li> <li class="list4"><a href="">menu4</a></li> <li class="list5"><a href="">menu5</a></li> </ul> </nav> </body> </html>
① Visual Studio Code 初期加入メンバーなのでインストールなどが不要 ② 公式ファンブック(チートシート)がある ③ HTML だけでなくCSS
や xsl にも対応 ④ 自分で略記表記をカスタマイズできる ⑤ 爆速でコーディングができるようになるのでさらなる推し活ができる 推しポイント
HTML 略記展開(例) nav>ul>(.list$>a{menu$})*5 nav要素 親子関係 暗黙の li 要素に class=“list”付与 ナンバリング
a要素内に展開する テキスト ×5 (グルーピング)
CSS 略記展開(例) pos:a d:f m ff ta w50 → →
→ → → → position: absolute; display: flex; margin: ; font-family: serif; text-align: left; width: 50px;
略記展開カスタマイズ(例) { "variables": { "lang": "ja" }, "html": { "snippets":
{ "doc": "html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+t itle)+body", "img": "img[src alt width height loadng=lazy]/" } } }
問題!
<table> <tr class="row1"> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> <tr class="row2"> <td><span></span></td>
<td><span></span></td> <td><span></span></td> </tr> <tr class="row3"> <td><span></span></td> <td><span></span></td> <td><span></span></td> </tr> </table> 問題:以下の HTML を略記展開するにはどう Emmet すればよいか?
問題! 全員オープン 指名カンニング ルーレット
問題! 答え
table>(.row$>(td>span)*3)*3
もう Emmet なしじゃ生き ていけない
ご清聴ありがとうございました。