Visual Studio CodeでHTMLの雛形を一瞬で書く方法

PHPはHTMLに埋め込んで使うことができる言語です。HTMLの雛形を1から手入力するのは時間がかかり、面倒だと思いませんか?

この記事ではVisual Studio CodeでHTMLの雛形を一瞬で書く方法をお伝えします。

MacでVisual Studio Codeをインストールする方法はこちらで紹介しています。

あわせて読みたい
MacでVisual Studio Codeをインストールする方法【初心者向け】 PHPの開発環境を整えるには、MAMPだけではなく、テキストエディタと呼ばれるメモ帳のようなアプリが必要となります。 まだMAMPをインストールできていない方は、【初心...
目次

Emmetを使って雛形を一瞬で作成

今回HTMLの雛形を一瞬に書くにはEmmetという機能を使っていきます。

Visual Studio Codeには最初からEmmetがインストールされているので、設定は特にありません。

最初の準備として.htmlのファイルを作成しておきます。今回はtest.htmlで作成済みとします。

!

Htmlファイルが出来上がったら、!を入力します。

!が入力できたら、tabを押します。

すると、一瞬でHTMLの雛形が完成です。

lang属性のenをjaに変更する方法

<!DOCTYPE html>
<html lang="en"> //enになっている
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

デフォルトではlang属性がenになっています。これをjaに変更していきます。

⚙マークをクリック。

設定をクリック。ショートカットキーとして、Macの場合は「cmd + ,」でも可能です。

検索フォームに「emmet.variables」と入力。

「settings.jsonで編集」をクリック。

"emmet.variables":{
 "lang" : "ja"
},

上記のコードを入力して、保存。

もう1度、htmlファイルで!を入力してtabを押すと、lang属性がjaになっていると思います。

よかったらシェアしてね!

この記事を書いた人

コメント

コメントする

目次
閉じる