新機能

  • デバイスプレビュー
  • ビジュアルメディアクエリー
  • Linting サポート
  • Emmet サポート
  • CSS プリプロセッサー
  • コードビューでのプレビュー
  • 新しくなったコードスニペット
  • Bootstrap 統合
  • Bootstrap スターターテンプレート
  • ライブビューの新しいメニュー
  • ライブビューでのテーブルのサポート
  • ライブビューのペーストスペシャル
  • ペーストスペシャルでの jQuery UI エレメントのサポート
  • 新しいナビゲーターパネル
  • HTML ドキュメントでの SVG コードヒント

変更点

  • コードの折りたたみ
  • CSS デザイナーの改善
  • テストサーバー - ワークフローの改善
  • ライブビューのビヘイビアーパネル
  • 挿入メニューの再構成

デバイスプレビュー

ビジュアルメディアクエリー

Linting コードのサポート

この新しいバージョンの Dreamweaver では、Linting を使用して一般的なエラーに対してコードをデバッグできるようになりました。Linting とは、コード内の潜在的なエラーを特定するプログラムを実行するプロセスです。Dreamweaver では、HTML、CSS、JavaScript ファイルに対して、その読み込み時、保存時、編集時に Lint チェックを実行できます。実行後、エラーや警告が新しい出力パネルに一覧表示されます。

詳しくは、Lint コードを参照してください。

Emmet のサポート

Dreamweaver を愛好してコード記述している開発者様の場合、Emmet 省略コードを使用することで時間を節約できます。記憶と入力が簡単なこれらの省略コードは、Tab キーを押したときに、コードビューで完全なコードに展開されます。

詳しくは、Emmet を使用したコードの挿入を参照してください。

CSS プリプロセッサー

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

イメージプレビュー

Dreamweaver では、画像の URL にマウスを置いてコードビュー内で画像をプレビューできるようになりました。

画像プレビューを <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" /> などのリモートの画像パスで有効にすることができます。

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

次の種類の画像ファイルのプレビューを表示できます。

JPEG
JPG
PNG
GIF
BMP
SVG

以下の場合に URL をマウスでポイントすると、画像のプレビューが表示されます。

 

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

カラープレビュー

コードビューでのアセットのプレビュー機能が大幅に改善されました。Dreamweaver でカラー値をマウスでポイントして、コードビュー内でカラーをプレビューできるようになりました。次の形式がサポートされています。

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);
事前に定義されたカラー名:オリーブ、青緑、赤など

注意:

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

新しくなったコードスニペット

スニペットは、プロジェクトで繰り返し再利用できるコードの特定部分です。このリリースの Dreamweaver では、新しい、また更新されたコードスニペットが提供されます。

  • Boostrap_Snippets
  • CSS_Animation_And_Transitions
  • CSS_Effects
  • CSS_Snippets
  • HTML_Snippets
  • JavaScript スニペット(更新)
  • PHP_Snippets
  • Preprocessor_Snippets
  • Responsive_Design_Snippets

コードスニペットの仕様について詳しくは、コードスニペットの操作を参照してください。

Bootstrap 統合

Dreamweaver で Bootstrap フレームワーク(バージョン 3 以降)を使用して作成した Web サイトを開き、コードまたは視覚的なデザイン機能を使用してページを編集できるようになりました。Dreamweaver は、ファイル名に 'bootstrap' が含まれている場合に、関連付けられた CSS ファイルを認識します。

また、Dreamweaver(挿入パネル)内に Bootstrap を追加して、グリッドを簡単にすばやく編集して、様々なビューポートのデザインを変更することもできます。

詳しくは、Bootstrap ファイルの作業を参照してください。

Bootstrap スターターテンプレート

Dreamweaver に、レスポンシブなデザインの作成を迅速に開始するための Bootstrap テンプレートが追加されました。新規ドキュメントダイアログボックスから、次の Bootstrap テンプレートにアクセスできます。

  • Bootstrap-eCommerce
  • Bootstrap-One PageBootstrap-Portfolio
  • Bootstrap-The Agency
  • Bootstrap-The Grid

コードの折りたたみ

タグブロックベースで、コードの折りたたみを HTML、CSS、LESS、SASS、SCSS、JS、PHP、XML、SVG ファイルで使用できるようになりました。行番号列をマウスでポイントすると小さな三角形がコードビューの行番号の横に表示され、これをクリックしてコードブロックを折りたたんだり、展開したりすることができます。選択内容に基づく既存の機能は、この新しいコードの折りたたみ機能に置き換えられます。

コードの折りたたみアイコン(下向きの三角形)が、コードビューに 2 行以上のコードがあるすべてのタグブロックで表示されます。

コピー、カット、ペースト、およびドラッグ&ドロップ操作でコードの折りたたみ状態が保持されます。例えば、折りたたまれているコードブロックをコピーした場合、ペースト操作を実行すると、コピーしたテキストはブロックが折りたたまれた状態でペーストされます。

HTML ファイルでのコードの折りたたみ

以前のコード折りたたみ機能と異なり、折りたたまれたコンテンツに閉じタグが含まれるようになりました。また、レンダリングも以前の実装とは異なります。

折りたたまれたコードブロックに表示される文字数が増えました。これにより、折りたたまれたタグブロックで属性の初期値(ある場合)をプレビューできます。例えば、折りたたまれた Div タグに id および class 属性がある場合、折りたたまれたブロックは次のように表示されます。

Windows で折りたたまれたブロック内のコードをプレビューするには、折りたたまれたコードをマウスでポイントします。折りたたまれたブロックは、タグセレクター、検索/置換、行移動、エレメントクイックビュー、ライブビュー、取り消し/やり直しによってそのブロック内のコードがフォーカスされた場合に、自動的に展開されます。フォーカスがコードブロックの外に移動すると、ブロックは自動的に折りたたまれます。

CSS、LESS、SASS、SCSS および JS ファイルでのコードの折りたたみ

波カッコで囲まれたコードブロックを CSS、Less、Sass、SCSS、JS ファイルで折りたためるようになりました。

開始波カッコ({)を含む行でコードの折りたたまれた領域をマウスでポイントします。

「折りたたむ」をクリックすると、波カッコで挟まれた内容が折りたたまれ、プレビューが「{...}」のように表示されます。

PHP ファイルでのコードの折りたたみ

PHP ファイルでは、PHP コードブロックに加え、CSS および JS コードブロックを折りたためるようになりました。

「<?php」で始まり「?>」で終わる各 PHP ブロックを折りたたむことができます。

<?php を含む行でコードの折りたたみ領域をマウスでポイントし、折りたたみアイコンをクリックして、コードブロックを折りたたみます。

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

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