Visual Studio Codeというテキストエディタをインストールして、標準搭載されているEmmet記法を使ってみたら、コーディングが爆速になったので覚書。
オフラインエディタはVisual Studio Codeをインストール！
手始めにドットインストールのVisual Studio Code入門とEmmet入門を受講したけど、Emmet記法がチート過ぎる！
Emmet記法を知っているのと知らないとでは生産性がまったく違ってくるね！https://t.co/ooUgwsF2j2https://t.co/0qs1FN3Bm2
— トネリコ (@toneliko11) February 10, 2020
オフラインエディタはVisual Studio Codeをインストール！
手始めにドットインストールのVisual Studio Code入門とEmmet入門を受講したけど、Emmet記法がチート過ぎる！
Emmet記法を知っているのと知らないとでは生産性がまったく違ってくるね！
備忘録として、Visual Studio CodeのショートカットとEmmet記法の中でも、とくによく使うものを紹介します。
Visual Studio Codeのショートカット
まずは、Visual Studio Codeで知っておくと得するショートカットをまとめてみました。基本的には行のどこかにカーソルを置くだけでOK！なお、Windowsの標準的なショートカットも含まれています。
| ショートカット | 動作 |
|---|---|
| Ctrl+X | 行ごとカット |
| Ctrl+C | 行ごとコピー |
| Ctrl+V | 貼り付け |
| Alt+ ↑ / ↓ | 行を上下に移動 |
| Shift+Alt + ↓ / ↑ | 行を上下にコピー |
| Ctrl+Shift+K | 行を削除 |
| Ctrl+Enter | 下に空行挿入 |
| Ctrl+Shift+Enter | 上に空行挿入 |
| Home | 行頭へカーソル移動 |
| End | 行末へカーソル移動 |
| Ctrl+Home | ファイルの先頭へカーソル移動 |
| Ctrl+End | ファイルの末尾へカーソル移動 |
| Ctrl+↑ / ↓ | 上下にスクロール（カーソル移動なし） |
| Ctrl+/ | 行コメントの切り替え |
| Ctrl+Z | 元に戻す |
| Ctrl+A | すべて選択 |
| Ctrl+F | 検索 |
| Ctrl+H | 置換 |
| Ctrl+N | 新規ファイル |
| Ctrl+S | 保存 |
| Ctrl+B | サイドバーの表示/非表示 |
ちなみに、公式のショートカット集[PDF]はこちら。かんたんな英語で記載されています。
Emmet記法
Emmet記法でコーディングすると、スピードが上がるだけでなく、タグの閉じ忘れなども無くなるので記載ミスも大幅に減らせます。
実際にやってみると分かりますが、とても直感的に理解できるので、すぐ使いこなせるようになるでしょう。
なお、Visual Studio CodeではEmmet記法が標準搭載されていますが、他の多くのテキストエディタでもプラグインを入れることで利用できます。
HTMLのEmmet記法
タグを入力してTab（もしくはEnter）
タグをそのまま入力してTab（もしくはEnter）するだけで、閉じタグまで展開され、カーソルが次の入力位置に自動的に移動します。
たとえば「div」を入力した場合、このようになります。
<div></div>
「html」や「head」、「title」、「h1」などでも同様です。
ちょっと変わったところだと、「!」を入力すると、
<!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>
このようにHTMLの基本的な枠組みがあっという間にできてしまいます。ただし、言語が”en”なので”ja”に変えておきましょう。
また、「lorem」を入力すると、下記のようなダミーテキストが表示されます。
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere alias quasi dolore fugit voluptatum, minus veniam quam neque, repudiandae molestias temporibus ex numquam, nulla corrupti in! Corrupti iusto velit accusamus.
入れ子（ネスト）は「>」
たとえばdivの中にpタグを入れたい場合は「div>p」と入力します。展開後はこのとおり。
<div> <p></p> </div>
繰り返しは「*」
たとえば「ul>li*3」と入力すると、ul直下のliが３つ展開されます。
<ul> <li></li> <li></li> <li></li> </ul>
兄弟要素は「+」
たとえば「p+img」と入力すると、このように展開されます。
<p></p> <img src="" alt="">
上の要素に戻るのは「^」
たとえば「h1>h2^div」と入力すると、このように展開されます。h2で1階層降りてから、また1階層上がっていますね。
<h1> <h2></h2> </h1> <div></div>
IDを付けるには「#」
たとえば「div#container」と入力すると、このように展開されます。
<div id="container"></div>
クラスを付けるには「.」
たとえば「div.graph」と入力すると、このように展開されます。
<div class="graph"></div>
要素に連番を付けるには「$」
たとえば「div#number-$*3」と入力すると、このように展開されます。
<div id="number-1"></div> <div id="number-2"></div> <div id="number-3"></div>
さらに数字の桁数を増やすには「div#number-$$$*3」のように「$」を増やせばOK。
<div id="number-001"></div> <div id="number-002"></div> <div id="number-003"></div>
要素に属性を付けるには「[]」
たとえば「img[title=”MyPhoto” alt=”tapioca”]」と入力すると、このように展開されます。属性を複数指定する場合はスペースでつなげます。
<img src="" alt="tapioca" title="MyPhoto">
要素内のテキストは「{}」
たとえば「p{テスト}」と入力すると、このように展開されます。
<p>テスト</p>
グループ化するには「()」
「()」で囲うことでグループ化が可能。たとえば「(h1>h2^div#number-$$$*3)*2」のような複雑な表現もできます。展開後はこのとおり。
<h1> <h2></h2> </h1> <div id="number-001"></div> <div id="number-001"></div> <div id="number-001"></div> <h1> <h2></h2> </h1> <div id="number-002"></div> <div id="number-002"></div> <div id="number-002"></div>
CSSのEmmet記法
CSSの場合、Emmet記法はプロパティに対して使えます。
たとえば「m + Enter」で
margin: ;
「p + Enter」で
padding: ;
と展開されます。
また、数値は、
- 単位を指定しないと「px」
- %は「p」
- remは「r」
- emは「e」
で表現できます。たとえば「m100」と記載すると、このように展開されます。
margin: 100px;
さらに、つなげて記載することも可能で「p5r3r4r6r」は、こうなります。
padding: 5rem 3rem 4rem 6rem;
ただし、pxの場合はそのまま入力すると数字がつながってしまうので、ハイフン「-」でつなげます。たとえば「m100-50-120-40」と記載すると、このように展開されます。
margin: 100px 50px 120px 40px;
複数のプロパティを指定する場合は「+」でつなげます。たとえば「w200+h50」と入力すると、このように展開されます。
width: 200px; height: 50px;
また、慣れてくると分かってきますが、適当に省略して入力すると勝手に展開してくれたりします。たとえば、「fs20」と入力すると、このように展開されます。
font-style: 20px;
Emmet公式のチートシート
他にもありますが、Emmet公式のチートシートがありますので、興味のある方はご覧になってください。
以上、tonelikoでした。
コメント