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
Zeit für Klarheit
arnekittler
0
140
#CMC_Meetup コミュニティの主体がCSからマーケに変わって気づいた良さの違い
ktkn1129
0
300
株式会社アーバンエックステクノロジーズ 会社・製品説明資料
urbanxtechnologies
0
170
Value Driven DevOps Team
kakehashi
13
3.7k
ジンジニアのキャリア ~てぃーびーの場合~ / Tb's career
tbpgr
0
450
インキュデータ会社紹介資料
okitsu
1
20k
解説カンバン方式
pokotyamu
1
130
Smartwill Company Profile
1129panda
0
580
AHV環境で利用できるネットワーク/セキュリティ
kuze_k
0
120
Pictoria 会社紹介・採用資料
pictoria
3
610
株式会社Gakken LEAP 会社紹介資料
gakkenleap
1
610
linkマクロが使いたい/smart knowledge management with link macro
kakehashi
2
900
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Raft: Consensus for Rubyists
vanstee
133
6.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Designing with Data
zakiwarfel
96
4.8k
Ruby is Unlike a Banana
tanoku
96
10k
A designer walks into a library…
pauljervisheath
201
23k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Clear Off the Table
cherdarchuk
85
310k
How STYLIGHT went responsive
nonsquared
92
4.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
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 なしじゃ生き ていけない
ご清聴ありがとうございました。