コードを打たずにページを見たまま編集・作成 第1回：文字と画像を変更しよう
Dreamweaverl CC（2014年06月公開）
Dreamweaver CC 2014からは［ライブビュー］で編集作業を行うことができるようになりました。そのため、HTMLやCSSを記述しなくても、ブラウザーと同様の表示結果でデザインを確認しながら、Webページを作成・編集することが可能です。本連載ではDreamweaver CCを利用して、サイトを修正したり、新しい要素を追加していく方法を解説していきます。まずは、画像や文字の変更について取り上げます。
Dreamweaver CC の体験版をダウンロード サンプルファイルをダウンロード
サイトを定義する
サンプルファイルとして、架空サイト「十枝内農場」のトップページを用意しています。これを編集していきましょう。サンプルファイルをダウンロードし、［ドキュメント］フォルダーやデスクトップなどに配置してください。
Dreamweaver CCを起動して［サイト］メニュー→［新規サイト］を選択し、［サイト設定］ダイアログボックスを開きます。
［サイト名］に適当な名前を入力し、［ローカルサイトフォルダー］に先ほどサンプルファイルを配置したフォルダーを指定します。
［保存］ボタンをクリックすると、［ファイル］パネルにローカルサイトフォルダー内のファイルが表示されます。今回編集するファイルはindex.htmlなので、［ファイル］パネルからダブルクリックして開きます。
［ライブビュー］を有効にする
初期状態では、［ライブビュー］が有効となっていません。ブラウザーと同様の見た目で編集するには、［ライブビュー］を有効化する必要があります。画面上部にある［デザイン］ボタンと［ライブ］ボタンをクリックします。すると、現在のページがブラウザーとほぼ同様の状態で表示されます。
HTMLやCSSのコードを見ながら編集したい場合は、［デザイン］ボタンの代わりに［分割］ボタンをクリックするとよいでしょう。
［ライブビュー］はそのレンダリングエンジン（描画）に、Chromium（Google Chromeの元になっているブラウザー）で使われている「Blink」を採用しています。そのため、Internet ExplorerやFirefox、Safariなどとは多少違う表示結果になる点に注意してください。最終的には各ブラウザーで表示を確認しましょう。
画像を変更する
画像を変更してみましょう。ページのほぼ中央にタマネギの画像があります。これをスナップエンドウの画像に差し替えます。
タマネギの画像をクリックして選択します。一度クリックすると、反転表示になり、左上に［ライブビュープロパティインスペクタ］と呼ばれる青い部分が出てきます。この［ライブビュープロパティインスペクタ］には、「img」のように、選択したコンテンツをマークアップしているタグが表示されます。
「img」文字の横にある［HTML属性を編集］（横三本線のアイコン）をクリックすると、右横にダイアログボックスが表示されます。このダイアログボックスでは、選択しているコンテンツのタグに関連する属性を変更することができます。
画像はsrc属性で指定されているので、［src］の横にある［ファイルの参照］アイコンをクリックします。［イメージソースの選択］ダイアログボックスが表示されるので、imagesフォルダーにあるproduct02.jpgを選択し、［OK］ボタンをクリックします。これで画像が差し替わりました。
さらに、代替テキストが「タマネギ」のままなので、ここも編集します。［alt］に書いてある「タマネギ」を削除して、「スナップエンドウ」と入力し、Enterキーで確定します。
［プロパティ］パネルから変更する
画像をクリックしたとき、［プロパティ］パネルも画像用に変化します。［ライブビュープロパティインスペクタ］を使うのと同様に、［Src］の横にある［ファイルの参照］アイコンをクリックして画像を変更することが可能です。代替テキストなど、他の属性も変更が可能です。状況に応じて［ライブビュープロパティインスペクタ］と［プロパティ］パネルを使うといいでしょう。
文字を変更する
スナップエンドウ画像の下にある文字が「タマネギ」となっているので、「スナップエンドウ」に変更します。一度「タマネギ」という文字をクリックします。すると、［ライブビュープロパティインスペクタ］が表示されます。figcaptionは、この文字をマークアップしているタグです。
このまま文字をダブルクリックすると、［ライブビュープロパティインスペクタ］が消えてオレンジ色の枠に変化します。カーソルが点滅し、文字を自由に編集することが可能です。
「タマネギ」という文字を削除し、「スナップエンドウ」と入力します。入力したら、どこか違う場所をクリックすれば確定されます。
Backspaceキーで文字を全部削除すると、オレンジの枠が消えて［ライブビュープロパティインスペクタ］に戻ってしまいます。その場合は、もう1度ダブルクリックすれば、オレンジの枠が表示されます。
文字にタグを付ける
「スナップエンドウ」の価格表記のスタイルが、他の2つのものと異なります。他の2つに合わせて太字にしましょう。「300g（約50本）￥350（税別・送料別）」という文字のあたりをクリックすると、［ライブビュープロパティインスペクタ］が表示されます。
ここをダブルクリックして、文字を選択します。すると、文字の上のところに［strongタグを追加］［emタグを追加］［ハイパーリンク（HREF）］のアイコンが表示されるので、［B］をクリックします。これで、選択した文字にstrongタグが適用され、太字になりました。どこか違う場所をクリックすれば確定されます。
リンクを張る
ページ上部のロゴマークにリンクを張りましょう。ロゴ画像をクリックして［ライブビュープロパティインスペクタ］を表示して、［HTML属性を編集］をクリックしてダイアログボックスを開きます。
［link］にリンク先のURLを入力し、Enterキーで確定します。
確定したら、ロゴマークにマウスカーソルを持って行きましょう。マウスカーソルが指マークに変化し、リンクが張られていることがわかります。
リンクが機能するかどうか確認したい場合は、［表示］メニュー→［ライブビューオプション］→［リンク先を表示（Ctrlキーを押しながらリンクをクリック）］にチェックを入れます。
または、URL欄の横にある［ライブビューオプション］→［リンク先を表示（Ctrlキーを押しながらリンクをクリック）］にチェックを入れます。
これで、ページ上のリンクをCtrlキーを押しながらクリックすると、リンク先へと遷移するようになります。リンク先へ遷移したら、戻るボタンが機能するので、クリックすれば前のページに戻ります。
次回はこのページに新しい要素を追加していきます。追加した要素を簡単に複製する機能も紹介していきます。