ども、しゅうです。
この記事では、プログラミングのコードを書くときに、省略した書き方で大幅な時短を実現する、
【Emmet記法】の、頻繁に使うもので、簡単に覚えられる、費用対効果の高いものに絞って紹介します。
ほとんど使ったことない〜ってひとには、この記事の内容意識するだけでhtmlやcssを書くのがとんでもなく楽になります。
Emmet記法とは
Emmet記法は、HTMLやCSSのコードを書く際に、省略記法を使って記述する方法です。
例えば、
記述が短くなることで、コーディングの効率が上がり、学習の継続もしやすくなります。
ここでは、プログラミング学習を始めたばかり〜半年目くらいで、もっと学習効率を上げたいと思っている人に向けて、頻繁によく使うものから順に並べました。
基本的な要素や属性の記法から、タグと属性の組み合わせ、繰り返しなど、さまざまな記法を紹介しています。
ここの基本的なものいくつか覚えるだけで、毎日のコード書き作業がかなりの時短になります。
ちょっとだけ注意事項：
Emmet記法は、エディターごとにプラグインや設定が異なる場合があります。
詳しくは、ご利用のエディターの公式ドキュメントを確認してください。
一部プログラミング学習サイトのブラウザの中に組み込まれたエディターなどでは、あえて？？（学習のため？？）、Emmet記法がほとんど使えないサイトもあるので確認してみてください。
ポイント
- Emmet記法は、慣れるまでは覚えるのが大変です。まずは、よく使う記法から覚えていきましょう。
- Emmet記法は、エディターごとにプラグインや設定が異なる場合があります。詳しくは、ご利用のエディターの公式ドキュメントをご確認ください。
html：頻出Emmet記法
すべて、= の左の入力をしてエンター！でいけます。
例えば、
「div」とだけ入力してエンターキーを押すと、、、
<div></div>
と「<>」や閉じタグなど、基本的要素まで含めて一発で書けます。
しかもその時カーソルは、次に入力するであろう、divタグの中に自動的に移動します。
基本要素
- div = div要素
- p = p要素
- img = img要素
- a = a要素
- ul = ul要素
- ol = ol要素
- li = li要素
属性
- id = id属性
- class = class属性
- href = href属性
- src = src属性
- alt = alt属性
- style = style属性
タグと属性の組み合わせ
- div.container = div要素で、class属性に"container"を設定
つまり <div class="container"></div> になる。
container部分は何でも可 - div#demo = div要素で、id属性に"demo"を設定
上のclassのid版 - ul>li = 親のul要素と、子要素としてli要素を1ついっぺんに書ける。
繰り返し
- ul>li*5 = 親のul要素と子要素としてli要素を5つまとめていっぺんに書ける。
- div.container>p*3 = contanarクラスを持つdiv要素と、子要素としてp要素を3つ追加。
css：頻出・簡単に覚えられる【1文字】だけ入力のEmmet記法
ここで紹介する記法は、CSSでよく使う基本的なプロパティやサイズ、位置、その他プロパティの省略記法です。
「*」以外すべて、【1文字】だけ入力してエンター！で、プロパティなどの後ろに必要な「: ;」まで含めて入力が完了します。
もちろん、カーソルは、次に入力するであろう「: ;」の間に自動移動。
基本プロパティ
- m = margin
- p = padding
- b = border
- f = font
- c = color
- t = text
- d = display
- v = visibility
一部数値なども省略入力可
【margin】【padding】については、
「m0-8-24-8」=「margin: 0 8px 24px 8px;」
「m0-a」=「margin: 0 auto;」
「m100%」=「margin: 100%;」
「mt16」=「padding-top: 16px;」
（t = top, r = right, b = bottom, l = left）
といったように、数値なども省略して入力可能。
これめっちゃ使います。
サイズ
- w = width
- h = height
- l = left
- t = top
- r = right
- b = bottom
位置
- a = align
- z = z-index
その他
- i = inline
- b = block
- n = none
- v = visible
- h = hidden
- f = fixed
- r = relative
- s = static
繰り返し
- * = 繰り返し
まとめ：最初は、エディターに表示される出力候補見ながらでも
Emmet記法は、プログラミング学習の効率を上げるのに役立つ便利な機能です。
簡単なショートカットを意識するだけで、劇的にコードを書く時間が短縮されます。
VS codeなどのエディターでは、入力したEmmet記法に対する結果の出力候補がエンターを押す前に画面に表示されます。
慣れないうちは、表示された候補確認して使いながら覚えると楽です。
ぜひ、少しずつでも覚えて使ってみてください。
ここに、紹介したのは、覚えやすい・頻出の基本的なものに絞ったので、気になったひとは、追加で調べてみてください。
