zencodingを使うには
zencodingは便利だ。という声を聞きつつ、私もなかなか試せなかったのですが、やっと決心がついたのでチャレンジしました。
zencodingとは
簡単なコマンドを書き込むとタグを展開してくれるという、要はキーボードで打ち込む文字数を減らせるプラグインのようなものです。ただその簡単なコマンドというものを自分で打つためには、その決まりを覚えて使いこなせなくてはなりません。
DreamweaverCS5でインストールする方法
まずはダウンロードしてこなくてはなりません。
ダウンロードはこちら
Zen.Coding-Dreamweaver.v0.7.2.zip – zen-coding – Zen Coding for Dreamweaver v.0.7.2 – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.7.2.zip
DreamweaverCS5にインストールする方法です。
WindowsXPで試しました。
①先程ダウンロードしたファイルを解凍します。
②Dreamweaverを起動します。
③メニューから「ヘルプ」-「拡張機能の管理」を選択。
④Adobe Extention Manager CS5が起動するのでインストールボタンを押す。
⑤解凍してできた「Zen Coding v.0.7.2.mxp」ファイルを選択し、「開く」ボタンを押す。
⑥指示に従いインストールを続ける。
⑦インストールが終わったらDreamweaverを再起動する。
⑧メニューの「コマンド」に「Zen Coding」というのができていればインストール成功。
zencodingを体験するには
早速サンプルです。
コードビューで<body>の後ろに打ち込んでみましょう。
div#sample打ち込み終わったらメニュー「コマンド」-「Zen Coding」-「Expand abbreviation」を選択します。ショートカットキーは「CTRL」キーと「,」キーです。
<div id="sample"></div>に展開されました。
zencoding記法を調べるには
こちらのサイトがわかりやすく実例を載せています。
秀丸マクロでZen-Coding
http://exoego.net/archives/zencoding-in-hidemaru
このサイトのサンプルをいくつか試したのですが
入力時半角スペースで書いてある所は、Dreamweaverでは代わりに>を入れるとうまくいく事があります。
通常モードの変換は「Ctrl」キーと「,」キーですが、Wrapモードは範囲選択した後「Ctrl」キーと「H」キーがショートカットです。
広告
関連コンテンツ
コードヒントの出し方
タグを入力するコードヒントを出す方法は２つあります。パスを入力したり、色コードを入力する事もできます。
タグ入力用コードヒント
一つの方法はコードビューに普通に<からタグを入力する方法です。入力する途中でコードヒントが出てくる事があります。選択候補が出たらそのまま続いて入力するか上下の矢印キーで選択しEnterで確定します。
もう一つの方法はデザインビューかコードビューでタグを適用したい文字列を選択してCtrlキーを押しながらTキーを押す方法です。これでもタグを入力するコードヒントが表示されます。
色コード入力したい場合
コードビューで色コードを入力する””の間にカーソルを置いてCtrlキーを押しながらスペースキーを押します。カラーピッカーが表示されます。
パスを入力したい場合
画像ファイルのリンクなど、アドレスを入れる所でCtrlキーを押しながらスペースキーを押します。参照と表示されるのでファイルの場所を選択します。
拡張機能を使う
Dreamweaverの拡張機能で入力を支援するプラグインのようなものが公開されています。”Dreamweaver 拡張機能”でグーグル検索をするといくつか有用なものが見つかるので必要なものを試してみるのも良いかもしれません。
ライブビューについて
ライブビューではブラウザを起動させる事なく、ドキュメントウィンドウ内でデザインビューよりブラウザに近い表示にする事ができます。
高機能ページで威力を発揮
マウスのロールオーバーやJavaScriptの実行をライブビューでは行う事ができます。あとブラウザで見るにはコードを保存しなくてはいけませんが、ライブビューではコードを保存しなくてもページを見る事ができるのもメリットです。しかし、テキストに簡単な画像を貼り付けただけのようなページでは使う必要はあまりないかもしれません。
レンダリングエンジンにWebKitを使用
WebKitはブラウザ用に開発されたレンダリングエンジンで、有名な所でSafari,MobileSafari,GoogleChrome,Androidなどに使われています。
実行してみて
若干フォントや行間が変わるのに気がつくでしょう。私もテキストと少し画像を貼ったぐらいのページしか作れないので大してライブビューを使う事はないのかもしれません。ボタンを押すだけという簡単操作ですが上級者向けの機能かもしれません。ただ、現在のインターネットユーザー間で一番多く使われているブラウザはInternetExplorerなのでライブビューでの確認以外にも実際のブラウザでの確認も最終的には必要でしょう。
コードの見栄えを整えるには
コードビューでインデントや改行はソースの見た目をよくするために必要な場合もあるかもしれません。コードフォーマットやタブライブラリを使うと簡単にインデントや改行のルールを設定できるようになります。
コードフォーマットの使い方
インデントの設定は環境設定のコードフォーマットで行います。開始タグと終了タグの間にタグがはさまれている場合があります。この設定を行う事でネストされたすべての行がインデントされるわけではないですが、インデントしたほうがよい行を考えてインデントしてくれます。インデントはコードフォーマットのインデントとタブサイズの所で設定します。インデント一つで何文字スペースを空けるかタブを挿入するかなどを設定します。ここではタグを小文字にするかどうかなども設定できます。
タグライブラリの使い方
タグライブラリはコードフォーマットのタグライブラリボタンを押しても、メニューの「編集」-「タグライブラリ」からも設定できます。タグライブラリエディタからタグ毎に改行を設定できます。私は<br>タグをタグの後のみ改行というふうに設定しています。
ソースフォーマットの適用
コードフォーマットとタグライブラリを設定したらソースフォーマットの適用を実行します。場所はメニューの「コマンド」-「ソースフォーマットの適用」です。インデントや改行をさらに視覚的に確認したい時はメニューの「表示」-「コードビューオプション」-「非表示の文字」を選択しチェックをつけます。
コードビューのカスタマイズ
コードビューのフォント・文字サイズは環境設定で変えられます。コードビューの背景色を黒くするのは環境設定とカスタマイズしたColors.xmlファイルがあれば可能です。
フォント・文字サイズを変える設定
フォント・文字サイズを変える方法は簡単です。メニューの「編集」-「環境設定」のカテゴリ「フォント」のコードビューの欄からフォントとサイズを設定してOKを押すとすぐに切り替わります。デフォルトはWindowsの場合MSゴシック10ptです。
背景を黒にする設定
目の疲れを軽減するため、コードビューの背景を黒にして作業を行っている方もいらっしゃるようです。
CS5で背景を黒にするには、「環境設定」でカテゴリ「コードカラーリング」の読み取り専用の背景の色を変えます。#000でもいいのですがお好みに合わせて調整しましょう。文字色などはColors.xmlファイルをダウンロードして使わせてもらいます。
ダウンロード先（リンク先にColors.xmlの設置場所も書いてあります。）
●Dreamweaverのコードカラーリングで背景を黒に変更する
http://blog.tasdesign.jp/web_design/2010_01_15/dreamweaver.html
●Dreamweaverの背景を黒にして使う方法(改訂版)
http://rewish.org/xhtml_css/dw_black_bg
元々あったColors.xmlは_Colors.xmlのように名前を付け替えていつでも戻せるようにしておくといいかもしれません。
ただ私も試してみたのですが、眼が白い背景に黒い文字というのに慣れていて、黒背景の方が疲れる感じだったので、デフォルトの設定に直してしまいました。
コードビューとデザインビューの切り替え
コードビューとデザインビューの切り替えは、ドキュメントツールバーのボタンを使えば簡単です。メニューを使うとコードビューを２画面にしたり、上下に分割したり、左にデザインビューを表示したりする事ができます。
コードビューとデザインビューの切り替え
コードビューとデザインビューを切り替えるには、ドキュメントツールバーの「コード|分割|デザイン」のボタンを使います。コードのボタンを押すとコードビューが表示され、HTMLやCSSのソースコードをテキスト形式で編集する事ができます。デザインのボタンを押すとデザインビューになり、ブラウザそっくりの見た目でHTMLのファイルが表示されます。分割と書いてある所を押すと、コードビューとデザインビューが同時に分割されて表示されます。
コードビューを２画面にする方法
まずはコードビューだけ表示します。メニューで「表示」-「分割コード」と選択します。コードビューが２画面に分割され、コードの違う部分を比較しながら編集する事ができます。真ん中の分割バーを移動させて端に持っていくと分割バーが消え、通常のコードビューの表示になります。
上下に分割する方法
まずはコードビューとデザインビューの分割またはコードビューの分割で画面を２つに分割させます。メニューで「表示」-「左右に分割」をクリックしてチェックを外します。すると上下に分割した表示になります。再度左右に分割させたい時は左右に分割を選択しチェックをつけます。
左にデザインビューを表示する方法
コードビューとデザインビューを左右に分割します。メニューで「表示」-「デザインビューを左に表示」をクリックしチェックをつけます。コードビューとデザインビューが上下に分割されている時は、ここに「デザインビューを上に表示」というのが表示されるのでチェックをつけたり消したりして設定します。
Dreamweaverを買ってよかったと思う機能
コードビューとデザインビューの切り替え、今は普通に使っています。しかし初めてこの画面を見た時には驚きました。これを探していたんだと。HTMLファイルの編集で無駄なタグを作る事も少なく、デザインのテスト表示もワンタッチでかつ、かなりブラウザに忠実。使い勝手のいいHTMLエディタ。これこそがDreamweaverの良さでしょう。