VScodeの「Emmet」が鬼早い

VScodeの「Emmet」が鬼早い
Emmet早すぎる
先に教えてくれ!こういうのは!涙

HTMLには基本構造なるものがあり、

「意味とかじゃないから!こういうものだから!」

的なものを毎回入力しなくてはならない。

たとえばこれ

はい。

学び始めたばかりの自分は毎回毎回「これも修行ぞ!」と思って入力しておりましたさ。

んでソラで入力できないと「まだまだ甘い!」とか無意味に自分を叱っておりました。

Emmetとは?

Emmetの概要

Emmet(旧:Zen Coding)は既定形式の入力補完機能によりHTMLXMLXSL等を素早く編集できる、テキストエディタプラグインである。 2008年にVadim Makeevが開発を始め[1]、Sergey Chikuyonokと利用者によりMIT Licenseオープンソースとして継続して開発されている[2]。 多くの著名なエディタに実装されているが、特定のソフトウェアに特化して開発されておらず、どのテキストエディタにも偏向していない[3]

Wikipediaより引用

うーんどうもコーディング関連の記事は小難しくていけませんね。もっと口語体で書いてくれ…

要はプラグインの一種で、毎度毎度入力すると面倒な同じ文句をパパッと入力できるようにしてくれる便利機能ということか。

VScodeには標準装備

我らがVScodeには嬉しいことに標準で搭載済み!ありがてぇ!

白紙の状態で「!」(=半角のビックリマーク)をいれ、「TABキー」押下。

すると一瞬で上記の基本構造のコードが…

今までの苦労は無駄だった!涙

デフォルトではlang=enなので、ここはjaに変更しておきましょう。

補足

meta name=”veiwport” content=”width=device-width”, initial-scale=1.0″

とはなんぞや?

どうやらスマホやタブレットで表示する際に推奨されているタグのようです。

参考URL→ https://seolaboratory.jp/48581/

meta http-equiv=”X-UA-Compatible” content=”ie=edge”

とはなんぞ?

どうやらInternet Explorerを使用している人のバージョンを指定する、という意味だそうですが…

参考URL→ https://www.creativevillage.ne.jp/2819

レスポンシブデザインに関する重要な値の様だが、考察は次回に譲る(わからんので)。

おすすめレンタルサーバー

つくったHTMLもオフラインじゃ果たして本当に思った通りのデザインかアヤシイもんです。

お手軽&安全なLOLIPOPサーバーがお試しやってるので、仕組みを知るにはうってつけかと。

written by Tatsuya.F

codingカテゴリの最新記事