More than 3 years have passed since last update.

VSCodeの超基本的なショートカット

Posted at 2020-05-19

おそらくVSCodeを使用している人なら誰でも知っていることかもしれないのですが、、、私は知らなかった。

HTMLを書く時のショートカットですが、ショートカットを使用することでコーディングの時間をかなり削減できるんですね。。。

恥ずかしながら知らなかった。。。

<!-- 「!」 を変換すると下記の文書型宣言ができる -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!-- 「#id」　と#から始めて書くとid名を指定したdivタグができます -->
<div id="id"></div>

<!-- 「.cls」　と.から始めて書くとclass名を指定したdivタグができます -->
<div class="cls"></div>

<!-- 「.parent>.child」　例えば左記だと親要素と子要素、セットで書くことができます -->
<div class="parent">
  <div class="cls"></div>
</div>

<!-- もちろんidとclass掛け合わせてもできます　「#parent>.child」　 -->
<div id="parent">
  <div class="child"></div>
</div>

<!-- 「.cls*6」　左記の場合*n文のタグが作れます。 -->
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>
<div class="cls"></div>

他にも沢山あるので、調べながら使っていって覚えていこうと思います！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up