HTML / CSS

【超簡単】VSCodeでHTML5の雛形(headの部分)を一瞬で生成する方法

こんにちは、テルプロです!

「head要素に何を書けばいいの?」「HTMLをもっと効率的にコーディングにしたい。」とお悩みではないでしょうか?

テルプロ

本記事ではそんな悩みを解決していきます!

HTML5の雛形を生成する手順

  1. htmlファイル用意し、VSCodeに読み込む。
  2. !(ビックリマーク)を入力して Tab 押す。
  3. html lang=”en”を”ja”に書き換える。

たったこれだけです。すごく便利です。

私もこれを知った時「こんな便利な方法があったのか!」と思いました。(笑)

これはVSCodeに標準搭載されているEmmetという機能が働いています。

他のエディターでは面倒な導入作業をしなければいけないのですが、VSCodeはこのような便利な機能が標準搭載されています。

このEmmetを使った便利なコーディング方法がたくさんあります。

公式が用意しているEmmetのチートシートがあるので参照して見てください。

Emmet チートシート 

https://docs.emmet.io/cheat-sheet/

Emmetをマスターして、効率的なHTMLコーディングを身につけていきましょう!

最後までご覧いただきありがとうございました。ではまた!

ABOUT ME
テルプロ
東京都在住のアプリエンジニア。大学では、ソフトウェア開発の研究に取り組む。長期のエンジニアインターンシップを経て、実務スキルを磨き、現在はフリーランスエンジニアとしても活動中。メインはモバイルアプリ開発。IT関連の記事監修も行い、技術の共有と普及に励んでいます。 監修実績(レバテックフリーランス
Flutter関連の書籍を出版しました!