HTML / CSS Crazy Fastをコーディングするのに役立つ20のベストエメットのヒント

2019

以前はZen Codingとして知られていたEmmetは、HTMLまたはCSSのコーディング中に生産性を向上させるために必要な最良のツールの1つです。コード補完と同じように機能しますが、より強力で素晴らしいです。 HTML / CSSを単純なものから複雑なものまで自動化することができます。

Emmetは、 Dreamweaver、Eclipse、Sublime Text、TextMate、Expresso、Coda、Brackets、Notepad ++、PHPStormなどのテキストエディタまたはIDE（統合開発環境）をサポートしています。また、JSFiddle、JSBin、CodePen、IceCoder、Codioなどのオンライン編集ツールもサポートしています。

Emmetのしくみは、構文の記述が終わったらタブキーボードのキーを押すことです。以下は最も一般的なEmmetのシンボルです。それらが実際に動作しているのを見るために、読み続けてください。

Emmet - HTMLのベストトリック

私がしたようにEmmetでHTMLを書くとき、あなたは驚くでしょう。前述のように、Emmetは単純なHTMLを非常に複雑なものに短縮することができます。そしてそれらは単一行のコードで書かれています。デフォルトでは、あなたが未知のタグ名を省略した場合、Emmetはあなたが書いたタグを自動的に書き込みます。理解しやすいように、下のアニメーションを参照してください。

1.ネスティング

いくつかの要素を入れ子にするには、使用したい各タグの後に大きなsign >を追加するだけです。例えば、内部にnav 、 div 、 ul 、 li付いたheaderが必要な場合は、 header>nav>div>ul>liとヒットタブキーを入力するだけです。

兄弟

要素をネストしたくない場合は、プラス記号を使用し、その後に追加するタグを続けます。例えば、 header+section+article+footerはheader 、 section 、 article 、 footer場所を変えます。

3.登る

子要素の内側にいて、その子の外側に別の要素を置きたい場合は、 ^記号を使用して1つの要素を簡単に登ることができます。 2回入力すると、二重の要素を登ることになります。たとえば、 header>div>h1>navすると、nav要素がまだh1の内側にあります。それを取り出すには、最後の>記号を^置き換えてください。

4.クラスを追加

Emmetはタグ内にあなたの好きなクラス名を含めることもできます。使用する記号は、CSSのクラスセレクタと同じ、つまりドット. 符号。例えば、 divを.containerクラス、 h1に.title 、 navに.fixedを付けたい場合は、 div.container>header>h1.title+nav.fixedます。

内部に複数のクラスを置きたい場合は、最初のクラスの後にドットを付けて追加のクラスを入力します. 符号。例： div.container.centerが生成します。

5. IDを追加

クラスの他に、 #記号を使ってタグ内にIDを追加することもできます。使い方はクラスを追加するのと同じですが、中にダブルIDを入力することはできません。あなたがそうしようとするならば、Emmetはあなたがタイプする最後のIDだけを読むでしょう。

6.テキストを追加する

Emmetは単にいくつかのタグを省略するのと同じくらい単純ではありません、あなたは中にテキストの行を追加することさえできます。テキストを追加するには、テキストを波かっこ{}で囲むだけです。テキストは自動的にタグ内に追加されるため、大きな>記号を追加する必要はありません。

7.属性を追加する

classやid以外の別の属性を追加したい場合は、追加したい属性を大括弧[]内側に入れてください。たとえば、logo alt logo.pngソースを持つ画像が欲しいので、単にimg[src="logo.png"]ます。

8.グループ化

内部に複数の要素を入れ子にしたい場合は、それらを()記号でグループ化すると簡単に実現できます。 .container>(header>h1+nav.fixed)+(section>.content+.sidebar) 、h1とnavを持つヘッダーと、ヘッダーの外側に別のセクションを持つコンテナーを作成したい場合は、次のように簡単に記述します。

9.掛け算

この機能はEmmetのお気に入りの1つになるかもしれません。乗算と同様に、必要なだけ任意の要素を乗算できます。それを使用するには、単純にあなたが掛けたい要素の後に星印を加えて、要素の数を加えなさい。例えば、ulの内側に5つのli項目を書きたいのであれば、正しい構文はul>li*5です。

10.自動採番

自動番号付けを使用すると、番号を大きくしながら別の名前を簡単に書くことができます。この機能の正しい構文は$記号です。自動番号付けは乗算で最もよく使われます。 item1 、 item5からitem1までのクラスをitem1して、以前のli項目を追加したいとしitem5 。だから、私はドル記号でクラス名を追加しなければなりません： ul>li.item$*5 。

11.ロレム

lipsum.comのようなlipsumジェネレータを開いてダミーテキストを書いたことがあれば、もうこれを行う必要はありません。 Emmetは、 loremまたはlipsum構文のダミーテキストジェネレータもサポートしています。テキストの長さを指定することもできます。たとえば、10語の長さのテキストがある場合は、 lorem10と入力しlorem10 。

自動ドキュメント

手動でhtml構造を作成したり、他のリソースからコピーペーストしたりする代わりに、新しいプロジェクトを開始するときには、Emmetがより効果的に実行できます。あなたがする必要があるのは感嘆符をタイプすることだけです! サイン、タブを押すと魔法が起こります。代わりにHTML4を使用したい場合は、これでHTML5文書構造が生成されます。その場合はhtml:4t 。

13.リンク

ドキュメントに追加したいfavicon、rss、または外部CSSファイルがある場合は、リンクトリックを使用してそれらをすばやく作成できます。 faviconを含めるには、 link:favicon faviconと入力して、デフォルトのfavicon.icoファイル名が付いたfaviconリンクを生成します。そしてcssの場合、 link:cssはデフォルトのstyle.cssスタイル名を持つCSSリンクを生成します。そしてRSSはデフォルト名としてrss.xmlになります。

あなたはより速いリソースを生成するためにプラス記号とそれらを組み合わせることができます。

14.アンカー

デフォルトではaタグを入力しaタブをhrefと、内部にhref属性を持つ完全aタグが表示されます。しかし、例えばa:linkようにlinkと組み合わせる場合は、 //値を追加することができます。メールリンクを代わりに使用したい場合はa:mail使用しa:mail 。

15.スマートスキップ

私があなたに与える最後のHTMLトリックはスマートスキップ機能です。基本的に、クラスやIDをその中に入れたいときは、タグ名を書く必要はありません。これはある特定の条件にだけあてはまります。

まず、IDやクラスの入ったdiv使いたい場合は、タグ名を書く必要はありません。単にidやクラスシンボルをその名前と一緒に直接書くだけです。

第二に、あなたがulタグの中にいるとき、それがクラスかIDを持っているなら、あなたはliタグを書くことをスキップします。

そして最後はtableタグ内に適用されtable 。 trやtdタグがclassやidを持っていれば、それらを書くのをスキップすることができ、Emmetは自動的にそれらを追加します。

エメット - 最高のCSSトリック

HTMLトリックのいくつかを学んだ後、今度はCSSの時間です。上の画像に表示されている一般的な記号の一部はCSSでは機能しません。それらはより大きく、 ^シンボルを登ります。あなたがそれらを使うならば、彼らはちょうどプラス+シンボルのように生産するでしょう。それでは、始めましょう。

1.幅と高さ

Emmetでwidthとheightを定義するのはとても簡単です。あなたはちょうどあなたが追加したいサイズが続くそれらの最初の単語を書く必要があります。デフォルトでは、単位を指定しなければ、Emmetはそれらをpx unitで生成します。利用可能な単位記号は、パーセントとemです。

2.テキスト

いくつかの使いやすいテキストプロパティシンボルがあり、デフォルト値で生成されます。 taはleft text-align valueでtext-alignを生成し、 tdはnone値でtext-decorationになり、 ttはuppercase値でtext-transformなりuppercase 。

3.背景

背景を追加するには、単純にbg略語を使用します。あなたはbackground-imageを得るためにbgc 、 background-colorためにbgcを、 bgc background-color bgcためにbgiと組み合わせることができます。 bg+と書くことで、背景属性の全リストを取得することもできます。

4.書体

プラス記号は単に背景には適用されません。 @font-face場合は、 @font-faceプロパティの完全なリストを表示するために@f+を書くだけです。プラス記号を@fずに@fすると、基本的な@font-faceのみが表示されます。

5.その他

他の素晴らしいトリックはあなたがanimationテキストでanimationを書くことを省略することができるということです。マイナス記号を追加すると、アニメーションプロパティに最大の値が与えられます。 @kf完全なリストを生成する@kfテキストも@kfます。

結論

Emmetは開発プロセスを合理化するための非常に巨大な時間節約ツールです。あなたがEmmetを知っているだけなら、今すぐ試すのはそれほど遅くはありません。これらのトリックはEmmetの機能のほんの一部です。 Emmetには、特にCSSのために、他にもたくさんのシンボルと構文があります。あなたの読書をさらに進めるために、Emmetのドキュメントまたはカンニングペーパーに進むだけです。