BLOGDreamweaverを手放せない10の理由2014/05/14タムラツイート初登場のマークアップのタムラです。先日ワールドカップの代表発表がされ、23人の選手が決まりましたね★いまからわくわくします。今回、初めてのブログなので今更感があるかもしれないのですがDreamweaverの機能紹介をしたいと思います。便利!!なDreamweaverの機能を10個紹介します。私は秀丸とDreamweaverとSublimetextを使用して毎度コーディングしてるのですがコーディングするサイトによってエディタを使い分けてます。最終的な調整はエディタでの作業がとても効率がいいと考えているのですが初期コーディングでガツガツ進めるのはDreamweaverを使用します。検索置換サイト内バリデートスニペットを追加してみるサイトの管理をするまずはじめにプロジェクトのサイトの定義をします。サイトがサイトルート相対パスで記述するのか、ドキュメント相対パスで記述するのかあらかじめサイト構築する際に決めておく必要があります。ルート絶対パスでサイトを構築する場合はあらかじめXAMPPでサイトルート相対パスを整えておきましょう。プロジェクト名を入れます。ドキュメントかサイトルートなのか選択します。サイトの設定をしておくことでディレクトリの変更などの際には移動させたいファイルをフォルダにドラックすることで関連したファイルは一括でhtmlのパスを書き換えてくれます。※但しパスを書き換えてしまった後の修正の取り消しはできないので移動させる前には注意する必要があります。ショートカットが便利!よく使用するショートカットキーです。これだけ覚えるだけでもコーディングが楽になります。一部のテキストをタグで囲う時に使用します。選択してからCtrl+Tでタグを入力することで選択した開始と終わりにタグをいれることができます。コードフォーマット」→「高度のフォーマット:タグライブラリ」で改行の設定をしてあげます。※細かく設定してあげるとコマンドのコードフォーマットする際に設定したインデントでフォーマットされます。私はXHTMLでは基本的に、ブロック要素は改行、インライン要素は改行なしで統一してあげてます。HTML5コーディングについては浅岡さんの記事で詳しく書かれてます!デザインビューでEnterで改行しながらコーディングすると自動的に段落の<p>タグがはいります。初期はすべてPタグでガツガツ要素をながしこんで、その後に適当なタグにショートカットやプロパティを使いながら変更していくのが私の作業スタイルです。タグの削除がラクラク消したいDivの中にカーソルを入れて上記を右クリックします。するとプロパティがでてくるのでタグを削除をクリックすることで開始タグと閉じタグが削除されます。コードが複雑化してくると、閉じタグがどこにあるのかわからなくなったりするんですが、Dreamweaverを使用することで解決します!コメントやインデントがわかりやすいhtmlソースなら問題ないのですが、ぐちゃぐちゃなインデントのサイトなどでよく使ってます。Editorでタグやクラスを変更することもできます。(Divタグをspanタグにするとか)開始タグと閉じタグを自動的に書き換えてくれるので閉じタグのタグ修正ミスなどは気にすることが無いです。ソースフォーマットの適用をするインデントがめちゃくちゃなhtmlソースなど「コマンド」→「ソースフォーマットの適用」をすることでインデントが綺麗になります。(※タグの数が乱れているときはうまくできません。コードフォーマット」の設定に基づいてソースがフォーマットされます。一部だけソースのインデント調整したいときは「コマンド」→「選択範囲にソースフォーマットの適用」をしてあげます。個人的には「選択範囲にソースフォーマットの適用」をよく使用します。視覚的にテーブルが作成できるのがとても便利です。「一般」→「テーブルアイコン」をクリックすることでテーブルを作成できます。tdタグ⇔thタグセルを選択して「ヘッダー」をチェックすることでtdタグからthタグへ変更されます。まとめて設定できるので便利です。セルの結合セルの結合をする場合は結合させたいセルを選択しクリックすることで列の結合が出来ます。セルの分割セルを分割させたいときは分割させたいセルにカーソルを入れて分割ボタンをクリックします。列:縦に分割ブラウザからコピペサイトのリニューアルの時など前の現状公開されてるテーブルを持ってきたいなどという時もブラウザからコピーしてデザインビューにペーストすることでそのまま貼り付けることができます。エクセルからコピペExcelで作成した表もコピーしてDreamweaverのデザインビューにペーストすることで簡単に表が作成されます。コピー/ペースト」でデザインビューへペースト”構造(段落、リスト、テーブルなど)付きテキスト”にしておくと便利です。左クリックしたままドラックで画像をいれることができます。Dreamweaverで自動的に幅と高さが入力されるとっても便利です。画像を差し替えたいときはプロパティのSrcの右横の丸いアイコンから左クリックしたまま線をひっぱって指定したいファイルにつなぐことでファイルのパスを書き換えることができます。画像の差し替え時など直接画像を差し替えたいときに便利です。編集のPsボタンをクリックすることで選択した画像ファイルがPhotoshopで開かれます。開かれた画像をPhotoshopで編集して保存することで自動的に上書きされます。初期設定だとgifとjpg:photoshoppng:Fireworksで開く設定になってるのですが、開くアプリは変更できます。プラグインでDreamweaver強化Adobe製品はたくさんのプラグインがWEB上に公開されているので探してみるだけでもとてもわくわくします。・コメントを生成http://design.kayac.com/topics/2010/05/dreamweaver-extention.php・全角半角http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_conversion_ext.html検索置換サイトの検索置換の設定が条件によって変更できるのでとても便利です。プロジェクト定義した現在のサイトのすべてのファイルが検索、置換範囲になります開いていないファイルを置換をする際は一度書き換えたら戻れないので十分に気をつける必要があります。一度検索して検索結果に対象ファイルの間違いがないのを確認してあげてから置換してあげます。サイト内バリデートDreamweaverでも簡単にソースのチェックが出来ます。コーディング進めている時に何度かバリデートでチェックしながら進めていくことで後々の調整がなくなるので楽になります。ドキュメントをバリデートする方法http://helpx.adobe.com/jp/dreamweaver/kb/7116.htmlスニペットを追加してみるなんといってもスニペットが便利!!!divやspanなどのよく使うけど初期で設定されていないショートカットなどはスニペット追加した後にショートカットで設定してあげれば解決します。他にもよく使うモジュールを細かく設定してスニペットに登録しておくことでコーディングの時短になります。スニペットに名前をいれてあげます。どんなスニペットか説明を入れます。選択範囲を囲む:カーソルの前後に入れたいコードを入力します。登録したコードがそのまま挿入されます。デザインなのか、コードなのか選択しますスニペットにショートカットを指定するショートカットを設定したいスニペットを右クリックし、[キーボードショートカットの編集]をクリックすることでショートカットが設定できます。便利な機能はたくさんあるのですが今回はここまで。Dreamweaverはカスタマイズをすることでとても使いやすいものになりますのでいろいろ試してみてくださいませ~。