LoginSignup
0
0

More than 1 year has passed since last update.

@Ryohei-K(ryohei)

《初心者です》HTML CSS 記述　自動補完についてのメモ

Posted at

VSCode使用時
Emmet 自動補完ツールの使い方 個人memo
知らなくても書けるが知ってたら便利だそう。

"! + tabキー"

<!DOCTYPE html>
<html lang="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>

例: idのついたdivタグを作る

" # + container + tabキー"
" #container + tabキー"

<div id="container"></div>

例: classのついたdivタグを作る

" . + cls + tabキー"
" .cls + tabキー" 

<div id="container"></div>

例: span要素にclass

"span + . + cls + tab キー"
"span.cls + tab キー" 

<span class="cls"></span>

例: divタグの中にspan要素配置

"# + container + > + . + cls + tabキー"
"#container>.cls + tabキー"

<div id="container">
  <div class="cls"></div>
</div>

例: divタグの中にspan要素配置

"# + container + > + . + cls + tabキー"
"#container>.cls + tabキー"

<div id="container">
  <div class="cls"></div>
</div>

例: 複数個のdivが含まれたcontainer作成

"# + container + > + . + cls + * + 個数 + tabキー"
"#container>.cls*5 + tabキー"

<div id="container">
  <div class="cls"></div>
  <div class="cls"></div>
  <div class="cls"></div>
  <div class="cls"></div>
  <div class="cls"></div>
</div>

例: 上記clsに数字をつける

"# + container + > + . + cls + - + $ + * + 個数 + tabキー"

"#container>.cls-$*5 + tabキー"
<div id="container">
  <div class="cls-1"></div>
  <div class="cls-2"></div>
  <div class="cls-3"></div>
  <div class="cls-4"></div>
  <div class="cls-5"></div>
</div>


"#container>.cls-$$*5 + tabキー"
<div id="container">
  <div class="cls-01"></div>
  <div class="cls-02"></div>
  <div class="cls-03"></div>
  <div class="cls-04"></div>
  <div class="cls-05"></div>
</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