【ハウツー】

「Dreamweaver CS4」の新機能をマスターする(前編)

1 コードナビゲータでコンテンツ作成、ビューを切り替える

 
  • <<
  • <

1/2

2008年11月にリリースされたWebオーサリングソフト「Dreamweaver」の新バージョン、「Adobe Dreamweaver CS4」。Dreamweaverを完全マスターするためにも、CS4から加わった新機能「コードナビゲータ」や「ビューの切り替え」、「Photoshopとの連携」、「Spryデータセット」、「ライブビュー/ライブコード」の具体的な操作方法を前編、後編の2回にわけて紹介しよう。

「コードナビゲータ」で定義したCSSをすばやく調べる

「コードナビゲータ」は、選択した場所に適用されているCSSの内容を確認する機能。ショートカットキーでコードナビゲータを開くには、「Alt」キー(Win)または「Command」+「Option」キー(Mac)を押しながら、ドキュメントの任意の場所をクリックすると、グレーの太枠に囲まれたウィンドウが開く。これがコードナビゲータである。

コードナビゲータにはセレクタ一覧が表示され、セレクタ名の上にマウスカーソルを重ねると、定義したCSSプロパティとその値が表示される。

「Alt」キー(Windows)または「Command」+「Option」キーを押しながらクリックすると、コードナビゲータが表示される

セレクタ名にカーソルを重ねると、定義したCSSプロパティと値が表示される

この中から、編集したいセレクタをクリックすると、CSSを記述したファイルが開く。該当するコードの前には、カーソルが点滅する。

該当するコードの前でカーソルが点滅する

コードナビゲータを開く方法を、もうひとつ紹介したい。「インジケータ」と呼ばれる船舵の形をしたアイコンを使って、コードナビゲータを開く方法である。ドキュメントの任意の場所をクリックし、数秒待つとクリックした場所にインジケータが表示されるので、これをクリック。すると、コードナビゲータが表示される。

任意の場所をクリックして数秒経つと、インジケータが表示される

インジケータを使わないのであれば、いったんコードナビゲータを表示し、「インジケータを無効にする」にチェックを付けると、以後はインジケータが表示されなくなる。

インジケータをクリックするとコードナビゲータが表示される

インジケータを非表示にするには、「インジケータを無効にする」にチェックを付ける

ビューの表示方法を切り替える

インタフェース関連の注目機能であるドキュメントウィンドウの分割方法について、簡単に紹介したい。初期設定では、上にコードビュー、下にデザインビューの分割表示だが、この上下を入れ替えたいときは「表示」メニュー→「デザインビューを上に表示」を選択する。

上にコードビュー、下にデザインビューが表示された状態

上下が入れ替わる

また、左右に分割することも可能で、「表示」メニュー→「左右に分割」を選択すると、ビューが左右に分割される。

左右に分割した状態

「表示」メニュー→「分割コード」を選択すると、分割したビューの両方をコード表示にできます。

「表示」メニュー→「分割コード」を選択

両方ともコードビューになった

分割コードの状態で、HTMLファイルに関連するCSSファイルやJavaScriptファイルを表示するには、関連ファイルツールバーに表示されている関連ファイル名をクリック。

関連ファイルをクリックすると、そのコードが表示される

インタフェースに関しては、パネルをアイコン化して作業スペースを広くとれるようになったのも、今バージョンの特徴。パネルエリア右上角にある「アイコンに縮小」ボタンをクリックすると、パネルがアイコン表示に変わる。

展開表示で「アイコンに縮小」ボタンをクリック

アイコン表示になり、作業スペースが広くなった

  • <<
  • <

1/2

インデックス

目次
(1) コードナビゲータでコンテンツ作成、ビューを切り替える
(2) 「Photoshop」で編集された内容を反映する

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

柴田英嗣、元妻&ファンキー加藤娘の健診に立会い宣言 "加藤違い"で狩野焦る
[00:12 7/30] エンタメ
ウレタン製の柔らかVRゴーグル「Merge VR」、ツクモ限定で30日から販売開始!
[00:00 7/30] パソコン
[シン・ゴジラ]日本政府対ゴジラの攻防 日本映画のスケールを超えた壮大で緻密な作品
[23:59 7/29] エンタメ
「機械仕掛けの愛」4巻発売、娘の結婚式に参列するAIのエピソード公開
[23:34 7/29] ホビー
声優・久保ユリカ、2ndシングル「SUMMER CHANCE!!」発売記念特番でMVを公開
[23:30 7/29] ホビー

求人情報