Web Essentials HTML および CSS 操作スキル_html/css_WEB-ITnose

Web Essentials 機能カタログに戻る

一部の Javascript 機能は TypeScript でも利用できます。

この記事の内容

• 関数
• ZenCoding
• LESS

HTML ファイルを最小化する

最小化する Web Essentials ファイルのメニューから「Minify html」を選択します(s)」オプションを使用すると、.min.html ファイルを生成できます。この機能は、js および css ファイルの圧縮に似ています。具体的な操作と効果については、以下の図を参照してください:

HTML ファイルをバンドルする

ソリューション ブラウザーで 2 つ以上の HTML ファイルを選択し、右クリックして [HTML バンドル ファイルの作成] を選択します。この機能により、SPA を使用する場合の複数の Html テンプレートのバンドルが簡素化されます。具体的な操作は次のとおりです:

画像ホバープレビュー

ラベルの上にマウスを置くと、画像のプレビューが表示されます:

ZenCoding

ZenCoding 構文

もっと知りたいZenコーディングの構文については、

ここをクリックしてください。

ZenCoding はオープンソースです。クリックすると、

Github でソース コードが表示されます。動的図を通してそれを示してみましょう:

Lorem Pixel Generator

ZenCoding の一部として、HTML エディターで直接

Lorem Pixel コードを生成することもできます。 「pix-200x200-animals」と入力して TAB キーを押すだけで、200x200 の動物の写真が挿入されます。

プレビュー ウィンドウ

LESS のプレビュー ウィンドウは、LESS ファイルを保存するたびに、コンパイルされた CSS コンテンツが表示されます。

変数への抽出

Web Essentials では、属性値を LESS 変数に変換することが簡単になります。抽出するテキストを選択し、選択範囲を右クリックして、[変数に抽出...] をクリックします。