Dreamweaver CC 2015のアップデート

Emmetのサポート

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Emmetがサポートされて、コード入力の効率が高まりました。
講師:
04:48

字幕

このレッスンでは Dreamweaver CC 2015 から 新たにサポートされるようになった— コード入力の手間を省くツール Emmet の使い方 その便利さについて— ご紹介したいと思います Emmet というのは元々 Web デベロッパー( Web 開発者)に— 幅広く使われているツールキットで— HTML や CSS のワークフローを 大幅に改善してくれます 説明を色々するよりも 実際に使ってみた方が早いでしょう さっそく Dreamweaver CC 2015 で 使ってみたいと思います いま開いている HTML ドキュメントは ほとんど空っぽの状態ですね このシンプルな状態でお見せしましょう body 要素に少しスペースを作って— 例えば div 要素を入れたいとします その時に Emmet を使いますと— 「 div 」と— あれ? 始まりタグがない と 思うかも知れませんが— これで tab キーを押します すると ちゃんとタグを入れてくれます もっとも今まで Dreamweaver であっても— ここで閉じタグ スラッシュと入れれば 閉じますから— そんなに手間は変わらないと 思うかも知れません ではこれはどうでしょう ul 要素です そしてその中に 当然リスト要素が入ります そして tab キーを押す 少し手間が減った感じがするかも知れません 一旦取り消しましょう そしてこの後に「 *5 」(かける5)とします tab キーを打ちます だいぶ手間が減りますね また取り消します さらにその中に p 要素を入れましょう tab キーを押しますと— こうなります また取り消します だいぶ便利さが お分かりになってきたでしょうか さらにここで リスト要素 ( li 要素)には— item というクラスを付けたい でも5個要りますよね 5個違うクラスにしたいという場合には— 数字を示す$マークを入れて この p の後にカーソルを置いてから— tab キーを押すと item1, 2, 3, 4, 5 と 連番で入ってくれます もう一つやりましょう また「編集」で取り消します 今度はさらに子要素で— これはキーワードなのですが— 「 lorem 」 ダミーテキストのことですが— これで tab キーを打ちますと— テキストが入る ということですね 実際に分割して ドキュメントがどんな状態になったか— あれ? おかしい と思うかも知れませんが— 中をクリックすれば ちゃんと出てきます スタイルシートでも同様の入力ができ— タイトルの後に スタイルシートを設定します 「 style 」と もちろんタグは要りません tab キーで入ってしまいます ではリスト要素にスタイルを設定しましょう ここはタイプするのですけれど— では どうしましょうか padding です コードの自動コンプリートが出るので 「 padding 」と入力しても良いですが— ここは Emmet を使いましょう p20 です tab キーを押すと— padding が入ります 上をクリックすれば結果が見えますけれど— 20 ですね ちょっと広いかも知れませんね 10 にしましょう スタイルをもう一度 ちょっと見まして さらにもう1個ぐらいお見せしますが— ボーダーです 底(下の方)に付けましょう bb (ボーダー ボトム) これはキーワードなんですが— + (プラス)とします これはデフォルトという意味で— デフォルトのボーダーを 下に付けるということで— tab キーを押しますと— 上をクリックして— こんな感じになります Emmet の他にもたくさんあるキーワードを もっと知りたい方は— Emmet のサイト emmet.io で— その中の DOCUMENTATION を 見ていただくと良いでしょう そして Documentation の・・・ 少しスクロールをして— Cheat Sheet こちらを見ると— 一覧で様々なキーワードと使い方を 知ることができます このレッスンでは コード入力の 手間を省くツール Emmet の— サポートとその使い方について ご説明をしました

Dreamweaver CC 2015のアップデート

2015年6月のアップデートでDremaweaverにも新しい機能やパネル、インターフェイスが加わりました。このコースではBootstrapフレームワークやビジュアルメディアクエリーの導入、新しくなったCSSデザイナパネルとDOMパネル、コード入力を効率化したり構文チェックを行うツールなど主な新機能を解説します。

1時間44分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年07月27日
アップデート日:2015年11月30日

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

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

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