Emmetを使用してHTMLファイルを簡単に作成する方法

結果は次のようになります。

(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer

上記は次のように解釈されます。「IDが#headerのDiv（グループ）を追加します。その中に、クラス「.logo」、「。menu.top」、および「.menu.main」を持つ3つのDivを追加します。グループの外で1つ上のレベルに戻り、その横にID「#mainsite」と「#footer」を使用してさらに2つのDivを追加します。

ポスト構造

一般的なサイトの基本的な投稿には、通常、次の要素が含まれています。

• タイトル
• 画像
• 抜粋（テキスト段落として）

また、訪問者が実際の投稿を読むことができるリンクと、そのカテゴリやタグなどへのリンクも提供する必要があります。ただし、簡単にするために、ここではこれら3つの要素のみを使用します。

追加するコードは次のとおりです。

(.post>h3{Post Title $}+img+p{Post Excerpt})*5

これにより、Emmetは「クラス.postでDivを作成します。その中に、H3の見出しのタイトル、画像、および抜粋の段落を配置します。

要素の後に「{TEXT}」を付けて、その内容を定義します。つまり、「{Post Title}」を使用すると、各H3タイトルのコンテンツがプレースホルダーテキスト「PostTitle」になることをEmmetに伝えます。 「投稿タイトル」は自分の名前や好きなテキスト文字列に変更でき、コードが展開されるときに投稿タイトルのコンテンツとして使用されます。

$ 「投稿タイトル」の横には、括弧の外側に表示される「5」と連動する数値変数があります。 *5 括弧の後に、括弧の内容を5回繰り返すようにEmmetに指示します。 $ 各投稿のイテレーション番号に置き換えられます。この数を、ページに必要な投稿の数に置き換えてください。

これを実際のコードに追加します。次のようになります：

(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)

フッター構造

フッターの場合、2つのグループを追加します。クラスが「.design」と「.copyright」の2つのDivです。

コードは次のとおりです。

(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))

これにより、クラス「.design」のdivが作成されます。その中には、クラス「.designerslink」とのリンクがあります。その隣に追加されているのは、クラス「.copyright」を持つ2番目のdivです。このdivの中には、「Copyright2020MyName」という内容のプレーンテキストの段落があります。

結果は次のようになります：

(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))

ここで、Enterキーを押すだけで、サイトの準備が整います。

キーを1回押すだけで、これまでに見たすべてのものと、この非常に凝縮された文字の束が、ページ全体で数十行の適切なHTML構文に変わります！

Ctrl を押して、ファイルへの変更を保存します + S または、[ファイル]->[保存]にアクセスします。作業内容を確認するには、ブラウザを起動してください。次に、[ファイル]-> [開く]または外部ファイルマネージャーを使用して、HTMLファイルを見つけ、ブラウザで手動で開きます。

まとめ

Emmetを使用してHTMLファイルを作成するための基本を学びました。もちろん、いつでもコードに戻って、コードを微調整したり、さらに多くのもので拡張したりできます。

エメットについてはもうご存知ですか？サイトを作成するときに役立つ他のショートカットを使用していますか？下のコメントセクションで教えてください。