コードビューで作業して Dreamweaver のコーディング機能を最大限に活用する方法を説明します。

Dreamweaver では、複数の方法でコードを操作できます。

新規ドキュメントダイアログを使用して新しいコードファイルを開き、コードの入力を開始することができます。

Dreamweaver での新しいコードファイルの作成
Dreamweaver での新しいコードファイルの作成

入力を始めると、コードヒントが表示され、コードを選択できるようになります。この機能は、入力ミスを防ぐのに役立ちます。必要なときは、Dreamweaver の便利なクイックドキュメントを使用して、CSS に関するヘルプを表示してください。

挿入パネルを使用してコードを挿入したり、Emmet 省略コードなどのコーディングショートカットを使用したりすることもできます。

同じコードを何度もコピー、ペーストする場合は、時間を節約できる次の機能を試してください。

  • スニペットパネルは、事前フォーマットされたコードスニペットをすばやく作成し、コードに挿入できる非常に貴重な機能です。
  • マルチカーソルでは、複数行のコードを一度に作成および編集できます。

Dreamweaver は、強力な一連の編集ツールも備えており、コード内の移動やコードの変更を容易におこなうことができます。

  • コード内のタグ、属性、テキストを検索するには、Dreamweaver の検索および置換機能を使用します。
  • コードナビゲーターを使用すると、現在のファイルの内部や外部にある関連コードに移動できます。また、クイック編集機能を使用すると、ファイルを新しいタブで開かずに関連ファイル内のコードを編集できます。
  • コードを右クリックすると、関連するシンプルなコンテキストメニューが表示され、そのコードを直接編集することができます。
  • 折り返しタグは、タグのテキストを折り返す場合に使用します。

これらのコード機能のすべてについて詳細をご確認ください。

挿入パネルを使用したコードの挿入

  1. コード内に挿入ポイントを置きます。
  2. 挿入パネルで適切なカテゴリーを選択します。
  3. 挿入パネル内のボタンをクリックするか、挿入パネル内のポップアップメニューからアイテムを選択します。

    アイコンをクリックすると、直ちにコードがページに表示されるか、コードを完成するためにさらに情報を求めるダイアログボックスが表示されます。

    挿入パネルで使用できるボタンの数と種類は、現在のドキュメントタイプによって異なります。また、コードビューとデザインビューのどちらを使用しているかによっても異なります。

Dreamweaver での Emmet ツールキットの使用

Emmet は、HTML および CSS コードの高速なコーディングおよび生成を可能にするプラグインです。

Dreamweaver のコードビューまたはコードインスペクターで Emmet 省略記法を使用して Tab キーを押すと、これらの省略コードが HTML マークアップまたは CSS に展開されます。

HTML 省略コードは、HTML および PHP ページに展開されます。CSS 省略コードは CSS、LESS、SASS、SCSS ページ、または HTML ページのスタイルタグ内に展開されます。

コードビューで Emmet 省略コードを使用する方法が分かる例を次にいくつか示します。詳細およびリファレンスについては、Emmet ドキュメントを参照してください。

注意:

現在、Dreamweaver では Emmet 1.2.2 省略コードをサポートしています。

例 1:Emmet を使用した HTML コードの挿入

3 つのエレメントを持つリストの HTML コードを簡単に追加するには HTML ファイルを開き、コードビューで次の Emmet 省略コードを <body></body> で囲んで入力します。

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

カーソルが Emmet 省略コードの直後に置かれていることを確認し、Tab キーを押して省略コードを展開します。または、省略コード全体を選択してから Enter を押すこともできます。

省略記法が次のようなコードに展開されます。

 

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>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.</p>
    <p>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.</p>
    <p>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.</p>
    <p>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!</p>
</div>

例 2:Emmet を使用した CSS コードの挿入

ベンダー接頭辞のある境界線の半径の CSS コードを挿入するには、CSS ファイルを開き、次の Emmet 省略コードをクラス内に入力します。

-bdrs

Tab キーを押すと、省略コードが次のようなコードに展開されます。

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

コードのコメントの操作

コメントとは、コードの説明や関連情報などを記述するために HTML コード内に挿入する説明テキストのことです。コメントのテキストはコードビューでのみ表示され、ブラウザーには表示されません。

コードへのコメントの追加

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

テキストを選択し、そのテキストをコメントにすることもできます。選択したテキストは、コメントブロック内で折り返されます。

コメントの追加
コメントの追加

コメントを追加するときは、各種のシンタックスオプションを使用できます。適切なシンタックスを選択すると、Dreamweaver は自動的にタグを挿入します。ユーザーは、コメントテキストを入力するだけでかまいません。

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

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

コードからのコメントの削除

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

コードのコメントの切り替え

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

マルチカーソルの使用による複数の場所でのテキストの追加または変更

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

注意:

マルチカーソルや複数選択を使用した場合、コピー&ペースト操作、検索および置換操作が機能しません。

マルチカーソルまたは複数選択の追加

マルチカーソルは、要件に応じて、様々な方法で追加できます。

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

既存のテキストを置き換える場合は、複数選択を実行します。連続するテキスト行、連続しないテキスト行、またはその両方を選択し、それらのテキスト行にカーソルを追加します。

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

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

複数の行にあるカーソルの位置に追加されたテキスト
複数の行にあるカーソルの位置に追加されたテキスト

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

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

注意:

カーソルをすばやく追加、または複数の行を選択に含めるには、キーボードショートカットの Shift+Alt+Up または Shift+Alt+Down を使用します。

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

マルチカーソルの場合は、新しいテキストが追加されます

複数のテキスト行の内容を選択した場合は、選択したテキストが入力した新しいテキストに置き換えられます。

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

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

連続しない複数のテキスト行へのカーソルの追加
連続しない複数のテキスト行へのカーソルの追加

連続しないテキスト行を選択するには、どれかテキストを選択した後、Ctrl キー(Windows)または Command キー(Mac OS)を押しながら、さらにテキストの選択を続けます。

各行の先頭または末尾にカーソルを追加するには:

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

前の行または後の行にカーソルを追加して、それらの行を一度に選択するには:

Shift+Alt+Up キーまたは Shift+Alt+Down キーを押してから、右向き矢印キーを押します。

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

次の方法を組み合わせて、単一の選択範囲内にある連続するテキスト行と別個のテキスト行を両方選択できます。

最初に連続しないテキスト行を選択し、Ctrl+Alt(Windows)または Command+Alt(Mac)を押しながらドラッグして、既存の複数選択に一連の行を追加します。

連続するテキスト行と連続しないテキスト行の両方を選択
連続するテキスト行と連続しないテキスト行の両方を選択

クイックドキュメントの使用による Dreamweaver 内の CSS に関するヘルプの表示

Dreamweaver で CSS、LESS または SCSS ファイルを操作しているときは、CSS のプロパティまたは値に関する詳細な情報をすばやく取得できます。

プロパティまたは値の中にカーソルを置き、Ctrl+K を押すと、Dreamweaver は、Web Platform Docs プロジェクトからドキュメントを開きます。

同時に複数のインラインエディターとドキュメントビューアを開くことができます。

Dreamweaver 内の CSS ドキュメント
Dreamweaver 内の CSS ドキュメント

1 つのインラインエディターまたはドキュメントビューアを閉じるには、左上の「X」をクリックするか、またはクイックドキュメントがフォーカスされているときに Esc を押します。

すべてのインラインエディターおよびドキュメントを閉じるには、カーソルをメインの外側のコードエディター内に移動し、Escape キーを押します。

コードの解析

Dreamweaver では、HTML、CSS および JavaScript の構文チェック(コードを分析してエラーの有無を確認)がサポートされています。

構文チェックで検出されたエラーや警告は出力パネルに一覧表示されます。詳しくは、構文チェックコードを参照してください。

また、Dreamweaver では、エラーの含まれた行の行番号列のクイックエラープレビューを表示することもできます。行番号はエラーを含むことを示すため赤で表示され、そこにマウスを移動すると、エラーに関する簡単な説明が表示されます。

注意 行内の最初のエラーのみが表示されます。行に警告のみが含まれる場合、警告の説明が表示されます。行に警告とエラーがあると、エラーの説明のみが表示されます。

折り返しタグを使用したコードのテキストの折り返し

コードビューで折り返しタグを使用すると、特定のテキスト行をタグで折り返すことができます。デザインビューまたはライブビューでこの機能を使用すると、オブジェクトをタグで折り返すことができます。

  1. コードビューでテキストを選択するか、またはデザインビューでオブジェクトを選択し、キーボードで Ctrl+T を押します。

    ポップアップが表示され、多数の HTML タグから必要なタグを選択できます。

  2. メニューからタグを選択します。

    コードビューで作業している場合、選択したテキストはタグで折り返されます。デザインビューまたはライブビューで作業している場合、選択したオブジェクトはタグで折り返されます。

コーディングコンテキストメニューを使用したコード編集

Dreamweaver のコンテキストメニューを使用すると、コードをすばやく編集できます。

コンテキストメニューにアクセスするには、Windows の場合は右クリックし、Mac の場合は Control を押しながらクリックします。使用できるオプションを次に示します。

クイック編集

このオプションをクリックすると、クイック編集モードになります。このモードでは、コンテキスト固有のコードとツールがインラインに表示され、必要なコードセクションにすばやく移動できます。詳しくは、クイック編集を参照してください。

切り取り、コピー、貼り付け

編集メニューにアクセスせずにすばやくテキストを切り取り、コピー、貼り付けするには、これらのオプションをクリックします。

検索と置換、次を検索、前を検索

検索メニューにアクセスせずにすばやくテキストを検索および置換するには、これらのオプションをクリックします。

新規スニペットの作成

保存して後で再利用できるコードスニペットを作成するには、このオプションを使用します。コードを選択して「新規スニペットの作成」をクリックすると、選択したコードがスニペットになります。詳しくは、コードスニペットの操作を参照してください。

関連ファイルを開く

リンク/スクリプトタグを右クリックし、「関連ファイルを開く」をクリックすると、ファイルが開きます。

スタイルシートを添付

ページに既存の CSS スタイルシートを添付します。

選択

選択サブメニューには、各種のコード編集オプションが含まれています。これらのオプションは、選択したコードに対して使用でき、例えば、行コメントおよびブロックコメントの切り替え、選択項目の展開および折りたたみ、インライン CSS のルールへの変換、CSS ルールの移動、コードの印刷をおこなうことができます。

コードナビゲーター

このオプションをクリックすると、例えば内部および外部 CSS ルール、サーバーサイドインクルード、外部 JavaScript ファイル、親テンプレートファイル、ライブラリファイル、iframe ソースファイルなど、関連するコードソースへと移動できます。詳しくは、関連コードへのナビゲーションを参照してください。

コードヒントツール

コードヒントツールサブメニューでは、カラーピッカー、URL ブラウザー、およびフォントリストツールを簡単に起動できます。

コードブロックのインデント

コードビューまたはコードインスペクター内でコードを記述および編集する際には、選択したコードブロックまたはコード行のインデントレベルを、1 タブずつ右または左へ移動することによって変更できます。

選択したコードブロックのインデント

  • Tab を押すか、または
  • Ctrl+] を押すか、または
  • 編集/コードのインデントを選択します。

選択したコードブロックのインデントの解除

  • Shift+Tab を押すか、または
  • Ctrl+[ を押すか、または
  • 編集/コードのインデント解除を選択します。

コードナビゲーターには、ページ上で選択した特定範囲に関連するコードソースのリストが表示されます。ここから、例えば内部および外部 CSS ルール、サーバーサイドインクルード、外部 JavaScript ファイル、親テンプレートファイル、ライブラリファイル、iframe ソースファイルなど、関連するコードソースへと移動できます。コードナビゲーター上のリンクをクリックすると、該当するコードを含んだファイルが Dreamweaver で開かれます。関連ファイル領域が有効になっている場合、このファイルは関連ファイル領域に表示されます。関連ファイル領域が有効になっていない場合、このファイルは別個のドキュメントとして Dreamweaver のドキュメントウィンドウ上に開かれます。

コードナビゲーターで CSS ルールをクリックすると、そのルールへと直接移動できます。ルールが現在のファイルの内部にある場合は、Dreamweaver の分割ビューにルールが表示されます。外部 CSS ファイルに含まれているルールの場合は、Dreamweaver でそのファイルが開かれ、メインドキュメントの上部にある関連ファイル領域にルールが表示されます。

コードナビゲーターには、デザインビュー、コードビュー、分割ビューおよびコードインスペクターからアクセスできます。

コードナビゲーターの使い方について Dreamweaver エンジニアリングチームが説明する概要ビデオは、www.adobe.com/go/dw10codenav_jp を参照してください。

ライブビュー、関連ファイル、およびコードナビゲーターの操作に関するビデオチュートリアルについては、www.adobe.com/go/lrvid4044_dw を参照してください。

コードナビゲーターを開く

  • ページ内の任意の場所を、Alt キーを押しながらクリック(Windows)または Command + Option を押しながらクリック(Mac OS)します。クリックした領域に影響を及ぼすコードへのリンクが、コードナビゲーターに表示されます。

コードナビゲーター以外の場所をクリックして、コードナビゲーターを閉じます。

注意:

コードナビゲーターは、コードナビゲーターインジケーター  をクリックして開くこともできます。このインジケーターは、マウスを 2 秒間操作しないでおくと挿入ポイントの近くに表示されます。

  1. ページ内の調べる対象の領域から、コードナビゲーターを開きます。

  2. ナビゲーション先のコードをクリックします。

コードナビゲーターでは、関連するコードソースがファイル別にグループ化され、アルファベット順に一覧表示されます。例えば、3 つの外部ファイルに含まれる CSS ルールがドキュメントの選択範囲に影響する場合、コードナビゲーターには、それら 3 つのファイルに加え、選択範囲に適用される CSS ルールも一覧表示されます。選択範囲に関連した CSS に対しては、コードナビゲーターは「現在」モードの CSS スタイルパネルに似た機能を提供します。

注意:

コードナビゲーター上で CSS ルールへのリンクをマウスでポイントすると、そのルールのプロパティがツールヒントで表示されます。このツールヒントは、同じ名前を持つルールが多数ある場合、それらを区別するのに役立ちます。

コードナビゲーターインジケーターの無効化

  1. コードナビゲーターを開きます。

  2. 右下隅の「インジケーターを無効にする」をオンにします。

  3. コードナビゲーター以外の場所をクリックして、コードナビゲーターを閉じます。

コードナビゲーターインジケーターをもう一度有効にするには、Alt キーを押しながらクリック(Windows)または Command + Option キーを押しながらクリック(Mac OS)してコードナビゲーターを開き、「インジケーターを無効にする」をオフにします。

JavaScript または VBScript の関数へのジャンプ

コードビューでもコードインスペクターでも、コードに含まれる JavaScript または VBScript のすべての関数のリストを表示し、任意の関数にジャンプすることができます。

  1. コードビュー(表示/コード)またはコードインスペクター(ウィンドウ/コードインスペクター)でドキュメントを表示します。
  2. 次のいずれかの操作を実行します。
    • コードビュー内の任意の位置で右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、コンテキストメニューから関数サブメニューを選択します。

    注意:

    デザインビューでは、この関数のサブメニューが表示されません。

    コード内で使用されているすべての JavaScript 関数または VBScript 関数がサブメニューに表示されます。

    注意:

    関数をアルファベット順に表示するには、コードビュー内で Ctrl キーを押しながら右クリック(Windows)または Option + Control キーを押しながらクリック(Mac OS)し、関数サブメニューを選択します。

    • コードインスペクターで、ツールバーの「コードのナビゲーション」ボタン({ })をクリックします。
  3. 関数名を選択し、コード内のその関数にジャンプします。

JavaScript の抽出

JavaScript エクストラクタ(JSE)を使用すると、Dreamweaver ドキュメントから JavaScript をすべて(またはほとんど)取り除いて外部ファイルに書き出し、その外部ファイルとドキュメントをリンクさせることができます。また、onclickonmouseover などのイベントハンドラーをコードから取り除き、それらのハンドラーに関連付けられた JavaScript を完全分離してドキュメントに添付することもできます。

JavaScript エクストラクタの使用にあたっては、次の制限事項に注意してください。

  • ドキュメント本文内のスクリプトタグは(Spry Widget を除き)JSE では抽出されません。これは、本文内のスクリプトを外部化すると予期しない結果を生じる場合があるためです。Dreamweaver の初期設定では、そうしたスクリプトはJavaScript を外部化するダイアログボックスに一覧表示されますが抽出対象として選択されません (必要に応じて手動で選択することはできます)。

  • .dwt(Dreamweaver テンプレート)ファイルの編集可能領域、テンプレートインスタンスの編集不可能領域、および Dreamweaver ライブラリ項目に含まれる JavaScript は、JSE では抽出されません。

  • 「JavaScript を外部化し、unobtrusive に添付(完全分離)」オプションを使用して JavaScript を抽出すると、以後は ビヘイビアーパネルで Dreamweaver ビヘイビアーを編集できなくなります。完全分離して添付されたビヘイビアーを Dreamweaver で調べてビヘイビアーパネルに表示することはできません。

  • ページを閉じた後に変更内容を取り消すことはできません。ただし、変更の取り消しは同じ編集セッションが継続している間は可能です。操作を取り消すには、編集/取り消し JavaScript を外部化するを選択します。

  • 複雑なページに対しては正常に機能しないことがあります。本文およびグローバル変数内で document.write() を使用しているページから JavaScript を抽出する場合は注意が必要です。

Dreamweaver の JavaScript サポートについて Dreamweaver エンジニアリングチームが説明する概要ビデオは、www.adobe.com/go/dw10javascript_jp を参照してください。

JavaScript エクストラクタは次のようにして使用します。

  1. JavaScript が含まれているページを開きます。

  2. ツール/JavaScript を外部化をクリックします。

  3. JavaScript を外部化するダイアログボックスで、選択の初期状態を必要に応じて変更します。

    • 「JavaScript の外部化のみ」を選択すると、JavaScript が外部ファイルに移動し、現在のファイルからその外部ファイルへの参照が作成されます。このオプションでは、onclickonload などのイベントハンドラーがドキュメント内に残り、ビヘイビアーがビヘイビアーパネルに表示されたままになります。

    • 「JavaScript を外部化し、unobtrusive に添付(完全分離)」を選択すると、1)JavaScript が外部ファイルに移動し、現在のファイルからその外部ファイルへの参照が作成され、さらに、2)HTML からイベントハンドラーが取り除かれます。イベントハンドラーは JavaScript によって実行時に挿入されるようになります。このオプションを使用した後、ビヘイビアーパネルでビヘイビアーを編集することはできなくなります。

    • 「編集」列で、編集対象から除外する項目があればオフにし、初期状態で選択されなかった項目を編集対象とする場合はそれらをオンにします。

      初期状態では、次の編集内容は一覧に表示されますが選択されません。

      • ドキュメントヘッド内の、document.write() または document.writeln() の呼び出しを含んだスクリプトブロック

      • ドキュメントヘッド内の、EOLAS 処理コードに関連する関数シグネチャを含んだスクリプトブロック(EOLAS 処理のコードでは document.write() が使用されます)

      • ドキュメント本文内のスクリプトブロック(Spry Widget または Spry データセットコンストラクターだけを含んだブロックを除く)

    • ID が付けられていないエレメントに対しては、Dreamweaver により自動的に ID が割り当てられます。別の ID を使用する場合は「ID」テキストボックスで変更できます。

  4. 「OK」をクリックします。

    抽出操作の概要を示すダイアログボックスが表示されます。処理内容を確認し、「OK」をクリックします。

  5. ページを保存します。

SpryDOMUtils.js ファイルと、抽出された JavaScript を含んだファイルが作成されます。SpryDOMUtils.js ファイルはサイトの SpryAssets フォルダーに格納され、もう 1 つのファイルは、JavaScript 抽出元のページと同じレベルに格納されます。元のページを Web サーバーにアップロードする際は、これらの依存ファイルも合わせてアップロードする必要があります。

クイック編集

Dreamweaver のクイック編集モードは、コンテキスト固有のコードとツールがインラインに配置されるので、必要なコードセクションにすばやく移動できます。多数のパネルとアイコンでコーディング環境が乱雑になることはありません。

クイック編集モードにするには、次のようにします。

  • コードスニペットを右クリックし、表示されるコンテキストメニューから「クイック編集」を選択する
  • Ctrl+E(Windows)または Command+E(Mac)を押す

HTML ファイルでのクイック編集モードの使用

HTML ファイルで、クラスまたは ID 属性(名前または値)内部、またはタグ名にカーソルを置きます。クイック編集では、プロジェクト内の CSS、SCSS および LESS ルールのうち、一致するものがすべて表示されます。この場合、HTML ファイルのコンテキストを離れることなく、これらのルールを直接インラインで編集できます。

HTML ファイルでのクイック編集モードの使用
HTML ファイルでのクイック編集モードの使用

複数のルールと一致した場合は、右側のリストを使用して(または Alt キーを押しながら上向き矢印/下向き矢印キーを押して)ルール間を移動します。

インラインエディターから CSS ルールを直接作成するには、新しいルールをクリックするか、または Ctrl+Alt+N(Windows)もしくは Command+Opt+N(Mac)を押します。

JavaScript ファイルでのクイック編集モードの使用

JavaScript ファイルでは、関数名にカーソルを置きます。クイック編集では、関数の本文が表示されます(require() ステートメントで参照されている他のファイルに関数の本文が存在する場合でも)。

JavaScript ファイルでのクイック編集モードの使用
JavaScript ファイルでのクイック編集モードの使用

CSS、SCSS または LESS ファイルでのクイック編集モードの使用

カーソルをカラーの値の内部に置いてクイック編集を起動すると、カラーピッカーにアクセスして、CSS コードで使用されるカラーをすばやく変更できます。

CSS ファイルでのカラーピッカーへのアクセス
CSS ファイルでのカラーピッカーへのアクセス

CSS、LESS または SCSS ファイルで、カーソルを cubic-bezier() または steps() トランジションタイミング関数に置くと、クイック編集にグラフィカルトランジションカーブエディターが表示されます。

定義済みタイミング関数のイーズ、イーズイン、イーズアウト、イーズインアウト、ステップ開始、ステップ終了も有効な開始点になります。

クイック編集を使用したベジェ曲線の操作
クイック編集を使用したベジェ曲線の操作

タグ、属性、またはテキストの検索と置換

特定のタグ、属性、属性値を検索できます。例えば、alt 属性がないすべての img タグを検索することができます。

また、一連のコンテナタグの内側または外側にある特定のテキスト文字列を検索することもできます。例えば、title タグに含まれている無題という語句を検索すると、サイト上にあるすべての無題ページを検索できます。

詳しくは、テキストの検索と置換を参照してください。

コードビューでの画像とカラーのプレビュー

画像およびカラーに関連するコードを挿入した後、コードビュー内で直接これらをプレビューできます。

イメージプレビュー

コードビューで、画像 URL の上にマウスを移動し、画像のプレビューを表示します。次の形式で参照される画像をプレビューできます。

  • url();
  • data-uri()
  • img タグの Src 属性値

Dreamweaver では、リモートでホストされた画像のプレビューも表示できます。

Dreamweaver でリモートパスのプレビューを表示できない場合は、「画像を読み込めません」というメッセージが表示されます。

プレビューできる画像のタイプを次に示します。

  • JPEG
  • jpg
  • PNG
  • GIF
  • SVG
コードビューでの画像プレビュー
コードビューでの画像プレビュー

カラープレビュー

コードビューでカラー値の上にマウスを合わせ、カラーをプレビューします。サポートされるフォーマットを次に示します。

  • 3 および 6 桁の 16 進数カラー値:#ff0000;
  • RGB:rgb(0, 0, 0);
  • RGBA:rgba(0, 255, 228,0.5);
  • HSL:hsl(120, 100%, 50%);
  • HSLA:hsla(120, 60%, 70%, 0.3);
  • オリーブ、青緑、赤などのあらかじめ定義された色の名前。

カラープレビューは、上記のカラーフォーマットのすべてのドキュメントタイプで使用できます。

コードビューでのカラープレビュー
コードビューでのカラープレビュー

注意:

値を右クリックして「クイック編集」を選択すると、カラーピッカーが開き、別のカラーを選択できます。

コードを印刷して、オフラインで編集、アーカイブ、配布できます。

  1. コードビューでページを開きます。
  2. ファイル/コードの印刷を選択します。
  3. 印刷のオプションを指定し、「OK」(Windows)または「プリント」(Mac OS)をクリックします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー