コードのショートカットとエラーのチェック

今回は、Dreamweaverで効率的に コーディングするテクニックを紹介します コードの入力を大幅に短縮できる Emmetの使い方 マルチカーソルでの編集方法 間違いをすぐに修正できる 構文チェック機能を説明します 実習しながらご覧いただくには サイトの定義が必要です サイト／新規サイト から Dreamweaverで使用する ファイルの保存先を設定します サイト定義の方法は別のビデオで 詳しく解説していますのでご覧ください まず、Emmetについて 説明します Dreamweaverに組み込まれた 入力短縮ツールです Emmetの入力短縮機能を使用して スタイル設定します これが完成したページ これが設定前の状態です 上部が異なります 画面の左右に何もありません 完成ページには画像と ナビゲーションが置かれています すばやくコーディングするコツが 今回のポイントです このチュートリアルでは デベロッパーモードで説明しますので 実習する場合は、標準から デベロッパーモードに切り替えてください ファイルパネルから 「index-start.html」を開き このファイルで作業します ダブルクリックで開きます ヘッダーの追加が 簡単にできますよ Headerコメント行の下に挿入します Tabキーで位置を揃え headerタグを追加しますが タグをすべて入力するのではなく 便利な入力短縮機能を使います 山括弧も不要です 「header」と入力して Enter（Return）キーではなく Tabキーを押します ほら、すごいでしょう 両側に括弧が付き 開始タグと終了タグができました 改行します これがタグの基本的な追加方法です 例えば、ナビケーションでは いくつも項目を追加しますね 「nav」を作成して その中に「ul」を入れ これを何度も繰り返すよりも 簡単な方法があります ご覧ください ナビゲーション「nav」の中に リスト「ul」を作成します リスト項目名を付けて すべてハイパーリンクにして クリックできるようにします 作成してみましょう 「nav」と入力した後 Tabではなく、右山括弧を入力します 右山括弧は、「nav」が親タグ その後に入力する文字が 親タグの子であることを示します 「nav」の中に「ul」 「ul」の中にリスト項目の「li」 「li」の中にアンカータグ「a」 このように入れ子にして Tabキーを押します どうです 「a」を入力しただけで ハイパーリンクの構文が できあがりました 階層が見やすいですね しかし、さらに便利な使い方があります これはリンクが1つしかないので 編集／取り消し で消去しましょう まとめて入力するには このリスト項目に アンカータグを付ける前に 繰り返す回数を指定します アスタリスクの後に「5」と入力 最後に「a」を入力 この状態で Tabキーを押すと どうです、Emmetが素晴らしいのは 構文が簡単で覚えやすいことです 何度か練習すれば すぐに使いこなせるでしょう では、次のテクニックに進みます マルチカーソルと呼ばれる機能です リンク先を追加する場合 例えば、ここのハイパーリンクは リンク先が指定されていません それを個別に入力する代わりに Alt（Option）キーを 押しながら 最初の項目から 最後の項目まで ドラッグします 巨大なカーソルが点滅します この状態で URLを入力すると ご覧ください 5行同時に入力できます ここでは同じURLではないので削除します マルチカーソルは他の使い方もできます 例えば ここにspanタグが 2つありますが 両方に同じクラスを 追加する場合は 1つ目のタグをクリックします 2つ目のタグは離れていますが 問題ありません Ctrl（Command）キーを 押しながら 2つ目をクリックします カーソルが2つとも点滅していますね 「class」を入力すると 上下2つのタグに 同時に入力されます 同じタグはこのように入力できます ここでは、説明のみで削除します Emmetのすごい機能はまだ続きますよ これまでの説明では headerのタグを入れ子にして 最後にTabキーを押し マルチカーソルでクラスを入力しました 実はクラスを入力するまでの操作も Emmetでは一発でできます headerの下に ロゴを入れますが クリック可能なリンクにしたいので 「a」タグを入れます そこにクラスを追加するには 右山括弧ではなく ピリオドを入力します クラス名は「site-logo」です これでTabキーを押します ハイパーリンクに クラスも作成できました リンク先はとりあえず#としておきます クラスも同時に追加できました 画像のimgタグも 同様に入力できます このクラス名は 「site-logo-white」にします Tabキーを押します 画像、保存先 代替テキスト、指定したクラスが入力されました Emmetの機能によるものです Dreamweaverには他にも多数のコードヒントがあります 例えば、画像の保存先として 「i」と入力すると これだけで、選択候補の 「images」が表示され、選択すると フォルダー内のオプションが表示され クリックで選択できます ヒントが表示されるのは、プロジェクトの設定時に サイトを定義したからです 定義に従って、imagesフォルダー内の オプションが表示されます 「参照」から探すこともできます フォルダー内ではスクロールするか、名前がわかれば 最初の文字、ここでは「L」を入力します 2つ候補が表示されました 「logo-dark」と「logo-white」です プレビューが表示されるので、わかりやすいですね 「logo-dark」のような名前の付け方も重要です ここでは、白文字のロゴを使いますが 名前だけでわからないときは キーボードの矢印キーで 切り替えましょう 下の画像が目的のファイルです ブラウザーで確認します 白文字の画像です ナビケーションの重なりを修正しましょう navにclassを入力します ここでもコードヒントが活躍します 「class」が表示され、Enterキーを押せば 自動的に構文が入力されます オプションから「site-nav」を選択します ブラウザーで確認しましょう 文字は箇条書きと同じですが 右上にスタイル設定されました 次に、ページ内に 文章を追加します サイトの構築と同時に デザイン作業を進めることが よくありますが、その際に 仮の文章が必要になります 仮の文章（lorem ipsum）を 探すのがこれまでは面倒でした ところが今は違います sectionタグのintroクラスに 本文用のpタグを加えます 「p」を入力して、Tabキーを押します そこに文章を入力します 仮の文章としてよく使われるのが ラテン語の「lorem ipsum」ですが 探してくる必要はありません 「lorem」と入力して Tabキーを押すだけで すべて表示されます いったん元に戻します Tabを押す前に「10」と入力すると 10語分の仮の文章が入力されます サイトのデザイン中に 執筆者から「200語」と指定された場合は 「200」と入力すれば 原稿が到着する前でも 文章に合うデザインを準備できます いったんこれは削除します これまでの方法を組み合わせます 「div」タグに クラス名「intro-text」を指定し その中に「p」タグを入れ 4つ作成します pタグ内に「lorem」を入力します ご覧ください たった1行の指定で 複数の段落を作成できました 各段落のlorem ipsumが すべて異なる点も注目です 本物に似せて 異なる文章が入っています 私も最初はそうでしたが 基本的な機能から使ってみてください シンプルなので、使えば使うほど すばやく要素を入力でき クラスも指定できます 多少の試行錯誤はあるでしょうが 使い慣れることをお勧めします 必ず役立ちます 複数の段落は説明のみとして ここでは、pタグを1つにします さらに効率化を進めましょう 構文チェック機能を使用します 構文チェックとはエラーを検証する ツールです 私はこれで非常に助かっています 具体例を示しましょう 行番号に注目してください 下にスクロールします ありました 赤い番号です そこをポイントすると エラーの内容が表示されます 山括弧が欠けていました これを修正すると 赤の表示が消えます 2つ目も同じ原因だったので消えました 作業中はこの方法で確認できますが 作業を完了する前に 最終チェックする方法もあります 説明のため、エラー状態に戻します 作業中もプレビューでも 気づかなかったとしましょう 念のため、最終チェックするときは 出力ウィンドウを開いて エラー箇所を 表示します ウィンドウ／結果 「出力」を選択します 出力ウィンドウが開き エラーがある場合は その結果が表示されます 先ほどのエラーが表示されました ダブルクリックすると エラー箇所にジャンプし、修正できます 通常は左側の行番号で確認し 完成前などには、出力ウィンドウで 最終チェックして 問題がないか確認すると良いでしょう ここに何か書いてあれば要注意 ここではエラーが1つでした 修正オプションも示されます 修正後のドキュメントを保存すると 出力ウィンドウが更新され エラーが消えます 出力をダブルクリックして閉じます Emmetに戻りましょう Emmetを使った HTMLタグの入力方法を説明しましたが EmmetはCSSでも使えます styles.cssを開きます 一番上までスクロールします 17行目をご覧ください 画像の幅（width）を指定するときも Emmetが使えます 「w」、「100」、Tabキーを押します 幅100pxと指定できました 初期設定はピクセルですが 単位の変更も可能です ％に変更するには 「%」を入力してTabキーを押せば 幅100％と指定できます 次に、6行目で マージンを指定します 「m」、「0」、Tabキー マージンが0になりました パディングも0にしましょう 「p」、「0」、Tabキーです できました 入力短縮機能を使いこなすには 多少練習が必要かもしれませんが Emmetのコードはシンプルなので とりあえず試してみれば たいていうまくいきます Emmetのコード一覧を参照したければ ネット上に多数公開されています まず、emmet.ioのサイトをご覧ください URLは「emmet.io」です 「Documentation」に「Cheat Sheet」があります さて、次にbodyセクションで 背景色を加えましょう バックグラウンドの「bg」、カラーの「c」 Tabキーを押します 初期設定は一般的な白ですが もちろん変更できます 削除して、「#」のみにすると カラーピッカーが表示されます 好みの色を選択して Enterを押します ポイントすると、コードビューでも 色を確認できるので 便利ですね 元の「#fff」に戻します ポイントすると、白になりました 340行目に移動します 背景画像を追加します Emmetを知らなくても 「bgi」と想像できるでしょう バックグラウンドイメージ、Tabキー 背景画像のURLを指定します 引用符を付け 「i」を入力すれば 定義済みの imagesフォルダーが表示されます 大量の画像が入っていますが 「ri」で、右向き矢印に絞り込めます 白の矢印を使用しましょう 下にプレビューが表示されます サイズも確認できて助かります このように、Emmetのテクニックで CSSのプロパティも設定できます HTMLと同様、構文チェック エラー検出機能もあります パスを間違えたと仮定しましょう または、ファイル名を間違えて 画像を特定できない場合 「画像が見つかりません」と表示されます HTMLと同様、行番号を見ると エラー箇所がわかります 波括弧が2つ入っていました いったんエラー状態に戻します HTML同様、出力ウィンドウを開くと 359行目にエラーがあると 表示されます どちらの方法でもエラーを確認できます 最後に、サイト内の リンクを確認する方法を説明します リンク先が正しく、リンク切れがないか 確認します 作業中でも確認できますが 最終のテスト段階や クライアントに送る前に使うと便利です すべてのリンクが正しく動作し メニュー項目、外部ハイパーリンク リンク切れがないか、最終確認しましょう 「ソースコード」をクリックして HTMLのリンクをチェックします 「サイト」 「サイトオプション」 「サイト全体のリンクチェック」 「破損リンク」タブに 問題のあるリンクが表示されます これらは修正が必要ですが 先に他のオプションを見ましょう 「外部リンク」には 問題のあるリンクではなく 他のWebサイトが開く 外部リンクが表示されます 「単独ファイル」は ローカルサイト内にあるものの Webサイトで使用されていないファイルです ローカルフォルダーは サイト定義で指定した場所ですが ページでは使用されていません それでは意味がないので 入れ忘れの 画像があるのではないかと 確認して追加したり 誤って別のフォルダーに入れた ファイルを見つけ 正しい場所に移動したり といった修正ができます 「破損リンク」に戻りましょう チェックを実行するには この実行ボタンを使用します 「現在のドキュメント」は 今開いているファイルが対象です 「現在のローカルサイト全体」は 小さなサイトでは問題ありませんが 大規模サイトでは時間がかかるかもしれません 「サイト内の選択したファイル」は ファイルパネルで選択したファイルが対象です 調べるファイルをここで選択し このオプションを実行します ここでは、「現在のドキュメント」で チェックします 破損リンクが2つ表示されました リンク先を見ると 通常どおりの「index.html」ですが 今回はエラーの説明のため 「index-start.html」に変更していました 修正するには、ダブルクリックして ここで変更するか、参照ボタンから 正しいファイルを選択します このように、スペル間違いや 存在しないリンク先を修正できます 「プロパティ」を閉じます index.htmlが修正され コードが更新されます 実行ボタンでチェックすると 1つ目のエラーが消えます これも破損していますね 外部リンクの破損です adobe.comリンクをダブルクリックします 「http」の「t」が足りません 追加しましょう コードが更新されました リンクチェックを実行します エラーがなくなりました リンクチェック機能は CSSの破損リンクも見つけてくれます CSSファイルを開いて 「現在のドキュメント」をチェックするか このHTMLドキュメントでも 「現在のローカルサイト全体」を選択すれば このページだけでなく サイト上のすべてのドキュメントを CSSも含めてチェックできます リンクチェッカーを閉じます 説明は以上です 効率よくコーディングするための ヒントとテクニックを紹介しました 作業中のエラーも大幅に減らせます Emmet、構文チェック コードヒント、リンクチェック このビデオのほかにも 多数のチュートリアルがあります ぜひご活用ください Dreamweaverですばやく正確に コードを作成しましょう