今日の amazon「タイムセール」はこちら!!      

[web制作]プログラミングのコード入力を効率的にするEmmetを使おう

どうも。コーディングに慣れるため毎日カタカタやってるLV.5webエンジニアのディズ(@_MONOGREAT_)です。

「プログラミングの勉強してるんだけど、入力が大変!」
「もっと早くコーディングしたい」

こんなお悩みお持ちではないですか?

毎回始めからコーディングして、あなたの爪先から血がにじんでいることでしょう。中には、コーディングしすぎて腕が使い物にならなくなった人もいるでしょう。知らんけど。

そんな方にはこれ!

『Emmet』

ということで、この記事ではコーディングの効率化に便利なEmmetをご紹介します。

3分くらいで読めますし、コーディングが劇的に改善される可能性が高いので、まずはご一読ください。

Emmetってなに?

Web制作では、HTMLやCSSをコーディングしてサイトを作成していき、一つのサイトでも何千もの文字を打って作成していきます。例えばと入力する場合、文字を毎回全部入力していて時間がかかりすぎてしまいますよね。 そこで登場するのが『Emmet』です。

先程の例をEmmetで入力する場合は、『.container』と入力するだけで変換してくれます。

このように、より少ない入力でコーディングが可能になりますので、制作のスピードと正確性が限りなく上がるコーディングに必須の入力補助です。

 スポンサーリンク

Emmetを使いこなすために各記号の意味を知ろう

各記号の意味を理解すると、チートシート(ショートカットキーの使い方シートのこと)を見なくてもある程度予測で書けるようになります。

とかいう僕もまだ素早く書けるわけではないんですが、記号の意味を理解したら、間違いはかなり少なくなりチートシートを見なくて済んだので、効率アップは間違いなしですよ。

Child(子): >

左の要素に右の要素を囲みます(囲むことを入れ子と言います)

Sibling(兄弟): +

単純に左から順に並べていきます。

ID or CLASS attributes: #id名 . class名

idまたはclassをつけてくれます。 要素名(pやaなど)を左に追加することで、以外でも出来ます。ちなみに、僕のVScodeの環境では、idをふるときはdiv#id名としなければ出ませんでした。クラスは.class名で勝手にdivつけてくれるのになぁ( ゚ 3゚)ナンデ?

Clime-up(左の要素を上に): ^

直前の要素の一段下に^のあとに続く要素を追加します。

^^のように二個続けてかくと二段下に追加されます。

絵文字じゃないですよ。

これは、あんまり使わない。

Grouping(グループ化): ()

囲んだ要素を一つの塊と見なします。*とかと一緒に使う感じですね。

Multiplication(乗算): *数字

数字の数だけ要素を増やします。

Text: 要素 {この文字が出力される}

{}内の文字を要素で挟んでくれます。

Item numbering(アイテム要素の番号付加): クラス名 $

上から順番にクラス名に番号をつけます。*と一緒に使います。

 スポンサーリンク

コード書くならEmmetは必須スキル

Bootstrapなどのフレームワークを使うときにEmmetを覚えておくと、飛躍的にマークアップ(コードを書くこと)速度が上がりますから、これからweb制作を始めるって人は習得必須のスキルですね。

実際に自分でマークアップすると、その早さと必要性に気づくはず。

ぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です