HTML/CSS を驚くほど速くコーディングするための Emmet の 20 のヒント

以前は Zen コーディングとして知られていた 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 を非常に複雑な HTML に短縮できます。そして、それらは 1 行のコードでのみ記述されます。デフォルトでは、不明なタグ名を省略すると、Emmet は作成したタグを自動的に書き込みます。簡単に理解するには、以下のアニメーションを参照してください。

1. ネスティング

いくつかの要素をネストするには、使用する各タグの後に大きな記号 > を追加するだけです。たとえば、 nav 、 div 、 ul 、 li を含む header 内部に含めたい場合は header>nav>div>ul>li と入力して Tab キーを押すだけです。

2. 兄弟

要素をネストしたくない場合は、プラス + 記号の後に追加するタグを使用するだけです。たとえば、 header+section+article+footer header 、 section 、 article および footer に別の場所が与えられます。

3. 登る

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

4. クラスの追加

Emmet では、タグ内に希望のクラス名を含めることもできます。使用する記号は、CSS のクラス セレクターと同じ、ドットです . サイン。たとえば、 div に .container クラス、 h1 に .title ​​tle 、 nav に .fixed が必要な場合は div.container>header>h1.title+nav.fixed 記述するだけです。

内部に複数のクラスを含める場合は、最初のクラスの後にドットを付けて追加のクラスを入力します . サイン。例: div.container.center <div class="container center"></div> を生成します。

5.IDの追加

クラスのほかに、 # 記号を使用してタグ内に ID を追加することもできます。使い方はクラスの追加と同じですが、内部にIDを二重に入力することはできません。そうしようとすると、Emmet は最後に入力した ID のみを読み取ります。

6. テキストを追加する

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

7. 属性の追加

class と id 以外に別の属性を追加したい場合は、追加したい属性を括弧 [] 記号の中に置くだけです。たとえば、ロゴ alt を含む logo.png ソースを持つ画像が必要なので、 img[src="logo.png" alt="logo"] 入力するだけです。

8. グループ化

要素の内部に複数のネストを含める場合は、要素を () 記号でグループ化すると簡単に実現できます。たとえば、内側に h1 と nav を含むヘッダーがあり、ヘッダーの外側に別のセクションがあるコンテナーが必要な場合は、単に .container>(header>h1+nav.fixed)+(section>.content+.sidebar) 書きます。

9. 掛け算

この機能は Emmet のお気に入りの 1 つになるかもしれません。乗算と同様に、任意の要素を好きなだけ乗算できます。使用方法は、乗算したい要素の後に星印 * を追加し、要素の数を加算するだけです。たとえば、 ul 内に 5 つの li 項目を書きたい場合、正しい構文は ul>li*5 です。

10. 自動番号付け

自動番号付けを使用すると、番号が増えるにつれて異なる名前を簡単に書くことができます。この機能の正しい構文はドル $ 記号です。自動番号付けは乗算で使用するのが最適です。たとえば、 item1 から item5 までのクラスを持つ前の li 項目を追加したいとします。したがって、ドル記号付きのクラス名を追加するだけです: ul>li.item$*5 。

11.ローレム

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

12. オートドキュメント

新しいプロジェクトを開始する場合、HTML 構造を手動で記述したり、他のリソースからコピーペーストしたりする代わりに、Emmet を使用するとより適切に作業できます。感嘆符を入力するだけです ! 署名してタブを押すだけで魔法が起こります。これにより、HTML5 ドキュメント構造が生成されます。代わりに HTML4 を使用したい場合は、 html:4t と入力するだけです。

13. リンク

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

これらをプラス + 記号と組み合わせると、より高速なリソースを生成できます。

14. アンカー

デフォルトでは、 a を入力してタブを押すと、中に href 属性を含む完全な a が表示されます。ただし、 http:// 値をリンクと組み合わせる場合は、 a:link のように追加できます。代わりにメールリンクが必要な場合は、 a:mail 使用します。

15. スマートスキッピング

最後に紹介する HTML のトリックは、スマート スキップ機能です。基本的に、タグ内にクラスや ID を含めたい場合は、タグ名を記述する必要はありません。これは特定の条件でのみ適用されます。

まず、ID またはクラスを含む div 内部に置きたい場合は、タグ名を記述する必要はなく、ID またはクラス シンボルをその名前とともに直接記述するだけです。

次に、 ul タグ内にいる場合、クラスまたは ID がある場合は li タグの書き込みをスキップします。

最後は table タグ内に適用されます。 tr と td タグにクラスまたは ID がある場合は、書き込みを省略できます。Emmet が自動的にそれらを追加します。

Emmet – ベスト CSS トリック

HTML のコツをいくつか学んだら、今度は CSS を見てみましょう。上の画像に表示されている一般的なシンボルの一部は CSS では機能しません。それらは大きく > 、 ^ 記号を上に登ります。これらを使用すると、プラス + 記号と同じように生成されます。それでは、始めましょう。

1. 幅と高さ

Emmet を使用して width と height を定義するのは非常に簡単です。最初の単語を書き、その後に追加したいサイズを書くだけです。デフォルトでは、単位を指定しない場合、Emmet は px 単位で単位を生成します。使用可能な単位記号は、パーセント % および em です。

2. テキスト

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

3. 背景

背景を追加するには、 bg 略語を使用します。これを bgi と組み合わせると、 background-image を取得でき、 bgc は background-color 、 bgr は background-repeat を取得できます。 bg+ を記述して、背景プロパティの完全なリストを取得することもできます。

4. フォントフェイス

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

5. その他

その他の優れたトリックは、 anim テキストを使用して animation 作成を省略できることです。 - 記号を追加すると、完全な値のアニメーション プロパティが取得されます。 @keyframe の完全なリストを生成する @kf テキストもあります。

関連項目: 2015 年の無料 PHP フレームワーク トップ 15

結論

Emmet は、開発プロセスを合理化するための非常に大きな時間を節約するツールです。 Emmet を知っているだけなら、今から試しても遅くはありません。これらのトリックは Emmet の機能の一部にすぎません。 Emmet には他にも、特に CSS 用のシンボルや構文がたくさんあります。 Emmet の ドキュメント または チートシート にアクセスして、さらに読み進めてください。