Dreamweaver CC (ベータ版) プレビュー

対応するコードを素早く追加・変更できるクイック編集

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クイック編集は、別の場所やファイルに書かれた関連するコードを、同じ画面で素早く編集できます。
講師:
05:16

字幕

このレッスンでは別の場所やファイルに書かれた関連するコードを同じ画面で素早く編集できるクィック編集の機能について説明します。現在ドキュメントを開いていますが例えばこのメインのタイトルのコードを見てみると h1 になっています。h1 をこのコードのビューでクリックした上でショートカットを使います。Windows は CtrlOS X は Command キーを押しながらクィック編集、英語では quick edit なんですけどもedit の E を押します。そうすると、クィック編集のウィンドウが開きます。これは bootstrap.css とある通り別のファイルなんですけれどもその別のファイルの CSS h1 要素に対する設定が出てきてここで編集を加えることができます。h1 は他にもありますので例えばこちらをクリックすると別の CSS の設定を見ることができます。これは Bootstrap の設定なので実際には書き込み可能にしないと編集できませんのでこれは一旦閉じましょう。このバッテンの閉じるボタンで閉じることができます。それからクラスをクリックした上でCommand もしくは Ctrl+E ですね。 そうすると、このクラスに関わるものここでは text-center というのがあるのでそれを編集することができます。ウィンドウの閉じ方はこのバッテンをクリックしてもいいですしこの中にカーソルがある状態でキーボードから Esc キーを押しても結構です。今回はもう1つの main-title というこのクラスを編集したいのでここをクリックして Ctrl もしくはCommand+E を押せばピンポイントで編集することができます。これは練習用に用意したCSS のファイルなので何も書いてありません。では、分かりやすいようにカラーを変えましょう。カラーを例えばroyalblue とかにしてあげるとちゃんとカラーが変わりますね。そして閉じる、と。このクィック編集は今 HTML ドキュメントでやったんですけどこの CSS でクィック編集を使うこともできます。この場合はどんな使い方をするかと言うとこのカラーをクリックしてクィック編集 Ctrl もしくは Command+E と押すとカラーピッカーが出てくるんですね。ですから、分かりやすいように赤系にしちゃいましょう。赤系にして、この辺の色にしましょうか。そしてキーボードからEnter キーを押すとそのカラー指定が設定されて赤っぽい色になりました。 ではソースコードに戻りましょう。ソースコードに戻ってコード全体が見やすいようにコードだけのビューにします。さて、このクィック編集というのは複数のウィンドウを開くことができます。例えば、今の main-title をCtrl もしくは Command+E で開いておいてこのまま閉じずに例えば container にしましょうか。container の所でCtrl もしくは Command+E とすると複数ウィンドウを開いてそれぞれ編集をすることができます。では、ここは特に編集をしないので閉じてしまいます。クィック編集を JavaScript で使うこともできます。この場合は、Bootstrap のJavascript があります。これを練習用にちょっと開いてみましょう。ここにしましょうか。関数の呼び出しがあります。removeElementこの関数を確かめて必要に応じて編集をしたいと思った場合遠く離れている所に書かれていることもあります。今回はとてもラッキーでここの 126 行目にあるので特にクィック編集を使わずに編集できるのですがもし離れていても編集ができてしまうということをお見せしましょう。 この関数の呼び出しをクリックしてそして quick edit です。クィック編集を使います。Ctrl もしくは Command+E と。すると、この呼び出している関数の定義の場所 126 行目もう見てきましたよね。ということで、出ています。どういう編集をするかと言うとセミコロンが抜けてるようですね。ちょっとエラーをチェックしましょう。128 行目 Missing semicolonとありますので確かにこれ、エラーですね。特に問題が起きないんですけども正確を期すためにはやはりセミコロンがあった方がいいでしょう。そして閉じる、と。このようにして、もしこの removeElement がとんでもない所に書かれていたり或いはどこに書かれているのか分からないという場合もあるでしょう。その場合も、関数の呼び出しをクリックしてクィック編集で、同じ画面ですぐに編集してしまうことができるということです。このレッスンでは別の場所やファイルに書かれた関連するコードを素早くその同じ画面で開いて編集をするクィック編集の機能について説明しました。

Dreamweaver CC (ベータ版) プレビュー

Dreamweaver CC 2015が2017 (ベータ版) としてメジャーアップデートされました。このバージョンアップに伴い、ワークフローを改善するデザインの変更やコーディングを効率化する細かな機能などがいくつか加えられました。このコースでは、それらの新機能や機能強化の中から主な項目をかいつまんで紹介します。

29分 (9 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年06月18日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。