HTMLコードを早く書く方法

Sep 10, 2025

操作方法

（画像クレジット：未来）

現代のウェブサイトには多くのHTMLコードが必要です。複数の異なるビューと状態を持つ複雑なレイアウト、単純なテキストエディタだけで作成するのが難しい場合があります。ありがたいことに、そこで働くためにそこにあるHTML生成ツールのホストがあります。ここでは、より人気のあるツール、emmet、pugのうちの2つを素早く見てください。

ただし、これらの強力な時間保存ツールの両方を使用するためにHTMLを知っている必要があります。だから、あなたがあなたが人気の意味を使っていることを確認する前に HTMLタグ 正しい方法。 Aを使用するガイドも参照してください HTMLボイラープレート 。

コードをぞっとしたいですか？これらを試してみてください ウェブサイトのビルダー 。または途中で追加の助けのために、 ウェブホスティング 技術サポート付きサービス。

FlyにHTMLを生成します

一度に大量のHTMLを書くとき、手で各タグを書くことは非常に早く非常に面倒になることがあります。たとえば、リンクのリストを書き出すときは、必ずそして ＆lt; a＆gt; タグはすべて正しい場所で開閉します。そうでなければ、リンクはうまくいかなくなり、ページレイアウト全体が完全にHaywireになるでしょう。

emmetを使う方法

あなたがこの起こっている可能性を減らすことを確認するために、あなたはの才能を雇うことができます em 。これはあなたにタイピングをたくさん保存するツールです、そしてあなたのHTML＆AMPを大幅に向上させるでしょう。 CSSワークフロー。 Emmet CSSのようなセレクタを入力して要素を作成できます。その後、その要素を通常のHTMLに解析して拡張します。以下はemmetで作成された元の要素です。

nav>ul>li*3>a.chapter{Chapter $ of 3}

emmetはこの要素を検出し、それを解析してから、以下に示すように要素を標準のHTMLに変換します。 emmet要素を簡単に見ることをお勧めします ＆lt; li＆gt; 倍増します（ * 3 ）そしてそれぞれ ＆lt; li＆gt; インスタンスは、その後に適切な番号（最大3）と呼ばれます。

emmet要素に含まれる文字数と標準のHTMLに含まれる文字数の数を注意してください。この小さな範囲でも、emmet hithhandを使用してどのくらいの時間を節約できるかを示しています。

 NAV＆GT;
  ＆lt; ul＆gt;
    ＆lt; li＆gt; a href = "" class = ""章 "＆gt;第1章
 3＆gt;＆gt; / li＆gt;
    ＆lt; li＆gt; a href = "" class = ""章 ";第2章
 3＆gt;＆gt; / li＆gt;
    ＆lt; li＆gt; a href = "" class = ""章 "＆gt;第3章
 3＆gt;＆gt; / li＆gt;
  ＆lt; / ul＆gt;
＆lt; / NAV＆GT;

emmetはまたコンテキストを知っています。たとえば、Aを編集している場合 ＆lt;テーブル＆gt; それは私たちが望んでいるでしょう ＆lt; tr＆gt; （これらは行です）それを埋めるための要素です。私たちがする必要があるのは私たちが必要とするすべてを指定することだけです。

これはemmetができることのすぐ例ですが、多くの設定オプションが多数あります。これらには、CSS編集、BEM（BLブロック要素修飾済み）クラス作成、およびLorem IPSUMジェネレータさえあります。

ほとんどのコード編集者がプラグインを介して組み込まれているか、それをサポートしていることを注目する価値があります。これについてもっと知ることができます emmetドキュメントページ。

動的コンテンツにPUGを使用してください

emmetは静的コンテンツに最適ですが、コンテンツが動的になる必要がある場合はどうなりますか？たとえば、パーソナライズされたホームページ、複雑な注文テーブル、またはHTMLの一般的なブロックを繰り返す必要があるかもしれません。これはすべてJavaScriptで可能ですが、このコンテンツを事前にレンダリングすることで、ユーザーのブラウザに頼ることなく追加の速度ブーストを取得できます。メディアヘビーページを持っているのであれば、信頼できるものでそれをバックアップしたいと思うでしょう クラウドストレージ 。

ステップ上のパグ。これはHTML用のテンプレートツールです。 ".pug"形式でページを書くことができ、PUNはそのファイルを読み、動的データをいくつかの動的データを挿入して標準のHTMLを返します。以下の例は、PUGのコードの書き込み方法（上記）と同じHTMLを作成する方法です。

 UL.
  各Val [1,2,3]
    李
      A（href = ""、class = ""の "章"）
＃{val}の3

PUGファイルはインデントだけを使用してネスティングを示します。それは値を超えて1パスに大量のHTMLを生成することができます。これらの「.pug」ファイルは、プロジェクト全体で何度も再利用されるように設計されています。

PUCはPackage Managerからインストールするために利用可能です NPM 。しかし、あなたがPUGを使って始める方法についてのより多くの情報が欲しいならば、ウェブサイト。

このコンテンツはもともとWeb Designerマガジンに登場しました。

続きを読む：

10 CSSフレームワーク
CSSアニメーション 再作成する例
8つのHTMLタグを使用する必要があります（および避けてください）

HTMLコードを早く書く方法

FlyにHTMLを生成します

emmetを使う方法

動的コンテンツにPUGを使用してください

操作方法 - 最も人気のある記事

カスタムスラックボットを作成する

WordPressをビジュアルビルダーに変える方法

Redux Thunkを使い始める

Zbrushが付いているより良いVDMへの4つのステップ

スケッチ可能な塗料制御され滑らかなストローク

説得力のある反射を描く方法

PhotoshopでアニメーションGIFを作る

デジタルテクスチャからのもっと得る方法

カテゴリ