LoginSignup
0
0

More than 3 years have passed since last update.

@k_p_g(k_ p_g)

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

Posted at

おそらく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>

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0