Emmetツールキットを使用して、Dreamweaverでコードをすばやくコンパイルします



Use Emmet Toolkit Quickly Compile Code Dreamweaver



Emmetは、HTMLおよびCSSコードをすばやくエンコードおよび生成するために使用できるプラグインです。

DreamweaverのコードビューまたはコードインスペクターでEmmetの略語を使用し、Tabキーを押してこれらの略語をHTMLタグまたはCSSに展開します。



HTMLの略語は、HTMLおよびPHPページで拡張されます。 CSSの略語は、CSS、LESS、SASS、SCSSページ、またはHTMLページスタイルタグ内で展開されます。

次の例は、コードビューでEmmetの略語を使用する方法を示しています。詳細および参考資料については、を参照してください。 Emmetのドキュメント



注意:

Dreamweaverは現在、Emmet1.2.2の略語をサポートしています。

例1:Emmetを使用してHTMLコードを挿入する



3つの要素のソートされていないリストのHTMLコードをすばやく追加するには、HTMLファイルを開いて次のように入力します。コードビューに次のEmmetの略語を入力します。

1 div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

ここで、カーソルがEmmetの略語の直後にあることを確認してから、Tabキーを押して略語を展開します。または、略語全体を選択してEnterキーを押します。

略語は次のコードに展開されます。

1 2 3 4 5 6 7 8 9 10 11
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.

Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.

Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.

Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!

例2:Emmetを使用してCSSコードを挿入する

CSSコードを挿入して、ベンダープレフィックスを使用して境界半径を作成するには、CSSファイルを開き、クラスに次のEmmetの略語を入力します。

1 -bdrs

Tabキーを押すと、略語は次のコードに展開されます。

1 2 3 4 5 -webkit-border-radius: -moz-border-radius: border-radius:

コードコメントを使用する

注釈を付けるこれは、コードを説明したり、その他の情報を提供したりするためにHTMLコードに挿入する説明テキストです。コメントテキストは「コード」ビューにのみ表示され、ブラウザには表示されません。

コードにコメントを追加する

コメントを追加するには、最初にコメントテキストを入力します。次に、カーソルを挿入ポイントに置き、ツールバーの「挿入」アイコンをクリックして、「メモの適用」サブメニューを開きます。

テキストを選択してコメントとして設定することもできます。選択したテキストはコメントブロックに含まれます。

画像コメントを追加

さまざまな構文オプションを使用してコメントを追加できます。適切な構文を選択すると、Dreamweaverがタグを挿入します。コメントテキストを入力するだけです。

Ctrl + /(Windowsの場合)またはCmd + /(Macの場合)のキーボードショートカットを使用して、コメントを追加することもできます。

テキストを選択せず​​にキーボードショートカットを使用すると、コメントが現在の行に適用されます。テキストを選択してキーボードショートカットを使用している場合、コメントは選択したテキストに適用されます。

コードからコメントを削除します

コードコメントを削除するには、コードを選択し、ツールバーの[コメントの削除]アイコンをクリックします。 Ctrl-/(Windowsの場合)またはCmd-/(Macの場合)のキーボードショートカットを使用して、コメントを削除することもできます。

コードコメントを切り替える

コードビューでコメントの表示と非表示を切り替えるには、選択したコメントまたは行に対してCtrl + /(Windowsの場合)またはCmd + /(Macの場合)を押すだけです。

複数のカーソルを使用して、複数の場所でテキストを追加または変更します

Dreamweaverのマルチカーソル機能を使用して、複数の場所にカーソルを追加するか、複数のコードセクションを選択して同時に編集します。

注意:

複数のカーソルまたは複数の選択を使用して、コピーと貼り付け、検索と置換の操作を完了することはできません。

複数のカーソルまたは複数の選択を追加します

要件に応じて、さまざまな方法で複数のカーソルを追加できます。

既存のテキストを置き換えずに同じテキストを複数の場所に追加する場合は、複数のカーソルを追加します。

既存のテキストを置き換える場合は、複数の選択を行うことができます。連続テキスト行および/または非連続テキスト行を選択して、それらにカーソルを追加できます。

連続する行の同じ列に複数のカーソルまたは複数の選択を追加します。

Altキーを押しながら、クリックして垂直方向にドラッグします。垂直方向にドラッグすると、ドラッグされた各行にカーソルが追加されます。

画像複数行のカーソルに追加されたテキスト

テキストの連続する行を選択するには、Altキーを押しながら斜めにドラッグします。斜めにドラッグすると、Dreamweaverは選択範囲内の長方形のテキストブロックを選択します。

画像複数のテキスト行を同時に選択して更新します

注意:

カーソルをすばやく追加したり、選択範囲に複数の行を含めるには、Shift-Alt-Upまたは下矢印を使用します。

カーソル(または選択したテキスト)を複数の場所に追加したら、続行して入力を開始できます。

複数のカーソルがある場合、新しいテキストが追加されます

コンテンツが複数のテキスト行で選択されている場合、選択されたテキストは入力された新しいテキストに置き換えられます。

各行の異なる列に複数のカーソルを追加するには:

連続していないテキスト行にカーソルを追加するには、Ctrlキーを押しながら、カーソルを配置する各行をクリックします。

画像連続していない複数行のテキストにカーソルを追加します

連続していないテキスト行を選択するには、いくつかのテキストを選択してから、Ctrl(Windows)またはCmd(Mac)を押して、さらに選択を続けます。

各行の最初/最後にカーソルを追加します。

複数行のテキストを選択し、左矢印または右矢印を押したままにします。

選択の前後の行にカーソルを追加します。

Shift + Alt +上/下矢印キーを押してから、右矢印キーを押します。

連続テキスト行と非連続テキスト行を選択するには:

これらのメソッドを組み合わせて使用​​して、連続するテキスト行を選択し、選択範囲内のテキスト行を区切ることができます。

最初に連続していないテキスト行を選択し、次にCtrl-Alt(Windowsの場合)またはCmd-Alt(Macの場合)を押してから、ドラッグして現在の行に一連の行を追加します。複数のオプションがあります。

画像連続したテキスト行と連続していないテキスト行の両方を選択します
公式リンク:https://helpx.adobe.com/cn/dreamweaver/using/writing-editing-code.html#emmet