Zen-Codingなど)を紹介します!Dreamweaverのコーディングを楽にする方法こんばんちわ、まーくあっぷえんじにゃぁ4ヶ月弱のやのっぱです。出来るようになってきたのか、いかに楽をしてコーディングをするかを考える余裕が出来てきたので、そろそろ一度まとめてみようかと思います。目次ショートカットキーを使う、カスタマイズするコードヒントのカスタマイズスニペットを活用する閉じタグプラグインを使う画像サイズリセット・ハーフプラグインを使うEmmet/Zen-Codingを使う1.ショートカットキーを使う、カスタマイズするよく使っているショートカットキーを並べてみました。コピペや保存とかは割愛並べると増えたなぁ...と実感しますねwShift+Enter<br>Ctrl+Shift+P<p></p>Ctrl+B<strong></strong>Ctrl+G行へ移動(chromeのデベロッパーツールなどをみて行数移動したいとき重宝)Ctrl+F検索・置換Ctrl+Alt+I画像挿入Home行の先頭へEnd行の最後へCtrl+Homeページの先頭へCtrl+Endページの最後へ色々いじってるので、標準はこのくらいかと思います次は追加したものです、追加の仕方は編集→キーボードショートカットを開いて追加して行けます。item)前のプロパティ?へ移動Ctrl+EEmmet展開よく使うものは左手だけで押せるようにしてます。リストやdivを作るのもショートカットで出来ます。2.コードヒントのカスタマイズDreamweaverなどのコードヒントはとても助かるのですが、よくwidthと打とうとしてwindow打っちゃうことが多々。windowとかつかわないし!!っということで、コードヒントでまず使わないであろうものを削ったり、並び替えたりしてあるコードヒントに変えてしまいます。私はカラクリエイトさんのブログでダウンロードできるCodeHintsを使わせていただいてます。打ち易さが劇的に変わりますので、おためしください。CC>configuration>CodeHintsの中にあるもともとのCodeHints.xmlに上書きするだけです。心配な方は、もともとの方の拡張子を.bakなどに変更しておくと安全です。他にも私は使っていませんがCSS3のコードヒント拡張やセレクターコードヒントの拡張などもあります。CSSセレクターコードヒント修正3.スニペットを活用するスニペットというのは、コピペ集のようなものです。CSSでグラデーションつけるとか、これはまた打つの面倒くさいなぁ。思うようなものをどんどん登録して置いておける機能です。使い方は、ウィンドウ>スニペットでスニペットウィンドウを開きます。ウィンドウ右下の新規スニペットで作成し、適当な名前をつけて、種類を囲むのか挿入なのかを決めて内容を決めて保存すると使えます。初めはなんのこっちゃ?抹茶に紅茶ですが、使っていくと便利さに気がつくと思います。4.閉じタグプラグインを使うマークアップに欠かせないのが閉じタグコメントです。これがあるのと無いのとで、作業のやりやすさがだいぶ変わってきます。いちいち打ち込むのも面倒。いうことで、拡張してワンタッチで挿入できるようになるプラグインをご紹介します。CS6は正常にインストールできますが、CCはzxpファイルに変換しないとつかえません。CS6を開き、ツールからMXP拡張機能をZXPに変換を選び、End_comment.mxpを置いてあるフォルダへ移動して、End_comment.mxpを選択すると、同じ場所に変換したものを作成してくれます。CCが立ち上がり、インストールしてくれます。5.画像サイズリセット・ハーフプラグインを使う画像の差し替えや、Retina対応のためサイズを半分にするとき、一つ一つ変更してると面倒ですよね。面倒くさいのはいやなので、これも一括で変更できる拡張機能を入れます。便利なので、おすすめします。この、そう!それが欲しかった!という拡張機能作ってくださったのは、きんくまデザインさんです。Dreamweaverで画像サイズをリセットするコマンド&半分にするコマンド(Retina対応に便利)これまた、欲しかった機能です。ページ内の画像サイズを縦横半分にしてくれます。すばらしぃスマホサイトを作るときは重宝します。使い方を覚えるまではもたもたするかもですが、コーディングの効率が格段に上がります。お使いでない方はためしに使用してみるのもいいと思いますよ。インストール方法こちらEmmet公式サイトから使用エディターのダウンロードを選びます。ZIPでダウンロードしてください。あとはEmmet.zxpをダブルクリックしてExtensionManagerでインストールするだけです。省略されたコマンドを打って展開するとHTMLやCSSがぽぽぃっと吐き出されます。一つ戻って+同列*掛ける$連番1~$$二桁の連番01~()グループ化.Class#idこれだけあれば大体つかえます。#Contentsを展開するとdivにidが付いた状態で展開されます。id="Contents"></div>divの中にpを入れたいときはこんなかんじです。<p></p></div>htmlのテンプレートもでます。charset="UTF-8"><title>Document</title></head><body></body></html>このテンプレは!と打って展開するだけで出てきます。<li></li></ul>と一発ででます。href="#">サンプル06</a></li></ul>と連番も可能です。imgのsrcを連番にしておくと挿入が一瞬ですし、サイズ違ってても先にご紹介した画像リセットコマンド使えば問題なく使えます。alt=""></a></li></ul>途中からもできます。ul>(li>a>img[src=./images/dummy_img$$@3.jpg])*6、$$の後ろに@3をつけました。alt=""></a></li></ul>このように03から連番に出来ます。私はタグをせこせこ打ちたくないので、全部これで作っちゃいます。手間っぽいですが、今のところ余程レイアウトがあれこれしてなければ、この方法で作る方が早くなりました。!>(hdr#header>.inner>h1.logo{ロゴ}+nav#Gnav>ul.navList.clearfix>(li>a[href=#]{ナビ$})*5)+(#Contents>art.contArt>h2.mainTi{タイトル}t+(sect.contSect$$>h3.sectTit{タイトル}+.sectMain.clearfix>.txtBlock>p.txt{テキスト}^fig.photo>a[href=#]>img)*2)+(ftr#Footer>.inner>small#CopyRight>img)と改行をしないで長々と打ちます。慣れるとこのくらいなら4~5分かからないで打てます。alt=""></small></div></footer></body></html>が一瞬で吐き出されます。あとはテキストや画像を入れて、CSSを書くだけ簡単!それに閉じタグ忘れなどもなくなります。構造がややこしくなればなるほど書くことも多くなりがちですが、マウス使わないでさくさく打つだけなので、私はこの方が好きみたいです。詳しいコマンドはこちらコーディングは早ければ早いほどよいし、楽にそうできたらいいですよね。CSSの【float】についてちょっと本気出して説明してみた。CSSの【float】についてちょっと本気出して説明してみた。しこのブログはWebコンテンツ総合製作の「ふたっぱ!」が運営しています。