Emmetの省略記法、HTML/CSSでのコーディングの時に
知ってると作業効率がむっちゃ上がる。
HTML・CSSでのコーディングする際、何度も同じコードを
書いていきますよね。
VScodeでやってる場合は、単語入れると、候補が表示されるので
それをクリックして選択すれば時間短縮にもなります。
その方法でも十分早いですが、さらにコーディングが楽になる方法
を書いていきます。
私は、最初にこの方法で書いてるの見た時、なんじゃこりゃ！！って感じで
スゴイ衝撃を受けました。
その後検索で、Emmetの省略記法に辿り着きました。
Emmetの省略記法とは
Emmetは、HTMLやCSSでコーディングする時に、省略記法で簡単に
記述するツールになります。
プラグインでエディターに挿入して使用する形になります。
EmmetはVScodeには標準で入ってるので、VScodeを使ってる
場合はすぐに、使用可能です。
ぜひ使ってみてください。作業効率がめっちゃよくなりますよ。
Emmetの使い方
Emmetの使い方は、とても簡単！
省略記法で記載した後に、TabキーをクリックでOKです。
これで、HTML・CSSでコード等が自動で記載されます。
例えば div 記入して Tab クリックで
⇒ <div></div>と表示されます。
HTMLでの記入例
↓
↓
↓
<li></li>
</ul>
↓
↓
↓
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
</div>
こんな感じでclass名なども対応してます。
いろんな方法があるのでいろいろ試していきましょう。
この方法はＣＳＳでも使えるので、そっちもいくつか
表示してみます。
ＣＳＳでの記入例
↓
↓
↓
↓
↓
↓
height: 100vh;
margin: 0 auto;
↓
ＣＳＳではこんな感じで使用出来ます。
他にもいろんな使い方が出来るので、試していきましょう。
width height などはよく間違えやすいので使うと楽
また、justify-contentやbackground はよく使う
長い単語なんで、Emmetの省略記法で記入すると、
時間短縮になりますよ。
 |
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 |
コメント