Dreamweaver CC 2015のアップデート

コードの構文チェックのサポート

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コードの構文チェックの機能が備わり、問題の箇所を把握しやすくなりました。
講師:
05:06

字幕

このレッスンでは新たに加わった 構文チェックの機能についてご紹介します 構文チェックは環境設定の中に入りました 環境設定はWindows は「編集」メニュー MacOSの場合にはDreamweaver CCの アプリケーションメニュー そこから環境設定を選択します そうすると一番下に「構文チェック」という 項目が入っています 「構文チェックを有効にする」かどうか チェックが入っていますので有効です これは有効にしておくことを是非お勧めします そしていつチェックするかですが 読み込んだ時 保存した時 或いは編集中もリアルタイムで チェックをしてくれます これはとても便利です それから場合によっては そのルールを変更することができますが これは必要と思われる方は ヘルプ等をご覧になって設定してください 今回はご紹介だけで 特に設定は変えずに閉じます では具合的にどのように 構文チェックが行なわれるかというと まずよくありがちなのは div要素がだいぶ入れ子になっていますね 閉じ忘れたということがありがちです そうすると行の先頭が赤くなりました それからこの右下のほうに 丸にバッテンのマークがついていて ポイントを合わせると 「1個のエラーが見つかりました」― と表示されます クリックしてみると 何処がおかしいよと言ってくれます 315行目フッターの閉じではないのですが フッターの閉じをしてみると どうもこの中でつじつまが合わないと いうことを意味しています さらに良く見てみると タグがペアになっていませんよと Missing閉じタグのdivがありません ということで かなり正確に捉えていますね ですからこれは閉じればいいということで 閉じましょう 閉じる時にこの出力のパネルと下の赤いマーク 同時にご覧になってください たちまちに消えます そしてこのグリーンのチェック これが通常の状態ですが 特に問題はないということです それからタイプミスというのも もちろんありがちですね フッター4がひとつ少なかったと 減らした途端に赤いバッテンがついて またエラーの行が示されます クリックすると315行目で まずおかしいと フッターの閉じがおかしいよと それから315行目 ボディーを全部閉じてみたところ フーターですかね 「o(オー)」の1つ少ない タグがあるのだけれども それが閉じられていませんよということで この2つを照らし合わせてみると どうもここがおかしいということに 気がつくのは そう難しくないと思います もちろん「o(オー)」を入れれば たちまちにエラーは消えます この構文チェックというのは CSSについても有効です ではCSSに切り替えてみましょう CSSの構文チェックについて 1つ注意が必要なのは CSSだけのファイルつまりCSSファイルを 別に作っておかないといけないということです HTML ドキュメントの中の スタイル要素として書いてあるー スタイルの設定については CSSの構文チェックが効きません 別ファイルでないといけないということは ご注意ください では少し下にスクロールして この辺にしてみましょうか まずマージンです 40 ピクセル ピクセルは当然pxですね ピクセルを除いてしまうと これは単位として無効です たちまち赤い印がつきました クリックすると94行目がおかしいと ドンピシャですね ここをちゃんと直しなさいよとありますので ではちゃんと「px」と入れると エラーが消えます では出力パネルは閉じて グリーンのチェックマークになりましたね さらに注意というのもご丁寧にしてくれます どういうことかというと 例えばここで 「hight」を設定しましょう Emmet を使いたいと思いますけど 「H10」Tab で hight: 10px と入ります 間違いではないのですが ちょっとちょっとということで オレンジのマークがつきます これは「注意」です 動かないことはないけれど ちょっと気をつけて下さいということなので これもマークをクリックすると 1個の警告が見つかりましたとありますので 見てみると 「duplicate」 「だぶっているよhightが」― ということですね これはとても丁寧でいいですね ここで「hight: 0」となっているのに 「hight: 10px」と こちらが有効になりますから 別に文法的に間違いではないですけれども 無駄だよということですので 要らない物は消しましょう そうするとまた出力パネルがきれいになります このレッスンでは新たに加わった 構文チェックの機能 CSS やHTML のソースコードを チェックしてくれる機能について説明しました

Dreamweaver CC 2015のアップデート

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

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

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

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

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