コードのケアレスミスに悩むカメ
気がついたらあっという間に時間が過ぎてたよ
時短にもなるしコードを書くならよく使うパターンだけでも覚えおきたいね
VS CODEには元々Emmetが入っているからすぐに使うことができるよ〜♪
学び続けるウサギ
コードのケアレスミスに悩むカメ
「コードを書くのにとにかく時間がかかる…」
「なんか動かないと思ったらタイプミスしてた..」
上記のように思われる方に役立つ記事になってます。
VS CODEには、元々Emmetが入っているのですぐに使うことができます。
それぞれの記号などを打ち込んでから、return（enter）やtabをクリックすると出てきます。
コードを打ち間違えて修正すると、思ったよりも時間がかかってしまうこともありますよね。
Emmetを使うと楽々コードの予測が出てきて、閉じタグも出てくるので間違えにくくなります。
今回は、VS CODE（Visual Studio Code）でhtmlやcssに使える便利なEmmetをご紹介していきたいと思います。
目次
VS CODEでコードを書くときに役に立つEmmet一覧
| html | htmlコード |
|---|---|
!もしくはhtml:5 |
<!DOCTYPE html>から続くHTML5のひな型 |
link:c |
<link rel="stylesheet" href="style.css"> |
ul>li*3 |
<ul> <li></li> <li></li> <li></li></ul> |
nav>ul>li*4>a |
<nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul></nav> |
dl>(dt+dd)*3 |
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd></dl> |
#header |
<div id="header"></div> |
.header |
<div class="header"></div> |
p{文字が入る} |
<p>文字が入る</p> |
im |
<img src="" alt=""> |
| css | cssコード |
m0-a |
margin: 0 auto; |
tac |
text-align: center; |
c#f |
color: #fff; |
bc#f |
background-color: #fff; |
bi |
background-image: url(); |
fz16 |
font-size: 16px; |
fz1.6r |
font-size: 1.6rem; |
w100% |
width: 100%; |
ma100% |
max-width: 100%; |
df |
display: flex; |
jcsb |
justify-content: space-between; |
aic |
align-items: center; |
上記のように便利なEmmetがたくさんありますね。
左側の記号のショートハンドを打ち込んで、tabやenterキーを押すと、右側のコードが展開されて出てきます。
今回は全部書ききれないので、実際にEmmetを使用して「便利だな♪」と思ったものを書いておきました。
<!-- !と記述してtabやenter(return)キーで展開 -->
<!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>!もしくはhtml:5でHTML５のひな型（テンプレート）を呼び出すことができます。
!の方が一文字なので時短ですね。
わざわざドックタイプ宣言から記述しなくて良いので楽です。
最初に使ってみたときは感動して呪文を唱える魔法使いのような気持ちになりました笑
言語が英語になっているので「en」を「ja」に変えます。
必要のないmetaタグがある場合は削除します。
<!-- link:c -->
<link rel="stylesheet" href="style.css">cssを読み込むタグを呼び出すことができます。こちらは、head内に記述します。
<!-- ul>li*3 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>親要素のulタグの中に子要素のliタグを３つほど呼び出すことができます。
リストタグも便利なのでよく使用しますね。
＊は×（掛け算）を意味するので数字を変えればその分が出てきます。
その後に>aでリストタグの中にaタグを入れることもできます。
ナビメニューなどでよく書くと思うので手間が省けますね。
olタグなどでも同じように呼び出すことができます。
VS CODEでid名やclass名をつける時の時短法
<!-- div#contactもしくは#contactと記述 -->
<div id="contact"></div>
<!-- .sectionと記述 -->
<div class="section"></div>例として、今回はdivで囲んでます。
contactの名前やクラス名はその箇所に適した名前にしてあげます。
id名やclass名をつけるだけで、VS CODEでは標準でdivに変換してくれるようになっているので、divで囲みたい時は、上記例のように、div#contactや#contactと.sectionなどで反映されますね。
コードのケアレスミスに悩むカメ
divじゃなくて例えばh2タグにクラス名を付けたいときは、
h2.titleと入力してtabもしくはenterキーを押すと
<h2 class="title"></h2>と変換されます。文字をタグ内に入れる方法
<!-- p{こんにちは} -->
<p>こんにちは</p>
<!-- a{アクセス} -->
<a href="">アクセス</a>
<!-- a.btn{ボタン} -->
<a href="" class="btn">ボタン</a>波カッコ{}を使うと文字がセットで表示されます。
タグと入力したい文字を一気に入力することができるので便利ですよね。
CSSファイルで時短に使えるEmmet
/* m */
margin: ;
/* m0-a */
margin: 0 auto;マージンといちいち書かなくて良いので楽ですね。
m10と書けばmargin: 10px;になります。
mb10と書けばmargin-bottom: 10px;になります。
上下10px、左右20pxにしたい時は、
m10-20とつなげて書くと、margin: 10px 20px;になります。
m0-aと書くと、margin: 0 auto;になります。
上下が0で左右が自動のauto設定は結構使われると思いますので便利です。
m10r-0-10rと書くと上と左右と下の順で記述できます。
margin: 10rem 0 10rem;/* p */
padding: ;マージンと同様にパディングも内側の余白調整などでよく使うので、アルファベット一文字で出てくれるのが楽ですね。
/* tac */
text-align: center;テキストや画像などの水平方向を中央揃えにするプロパティもよく使いますね。
私はタックという風に覚えました笑
Emmetを使用すると時短だけでなく記述ミスを減らすこともできるところが良いですね。
Emmetを覚えたカメ
まとめ：Emmetでらくらくコードを書こう！
今回は、VS CODE（ブイエスコード）で役に立つEmmetについてご紹介・記述してきました。
Emmetを覚えておくと、時短になりケアレスミスも減らすことができるので重宝します。
徐々に覚えて使用してみてください。
VS CODEをさらに快適に使う方法については、【エディタ】VS CODEの快適な使い方【Microsoft】の記事を参考にしてみてください。
- Techacademyのはじめての副業コース ※実力判定テスト合格後案件100%紹介
- デイトラのWeb制作コース
※１年間質問し放題・WordPressも学べる
