【コピペでOK】もっと爆速コーディング!Dreamweaver × Emmetを使って1秒でレイアウトする

投稿日:

りょうま(@ytq_ryoma)です。

本日はDreamweaver×Emmetを使った爆速コーディングをご紹介します。

これを使えば、あのレイアウトもこのレイアウトも1秒で終了!

コピペで使えますので、爆速コーディングを体感してください。

 

Emmetってなに?

Emmetは、以前Zen-Coding(ゼンコーディング)と呼ばれていました。

以前のDreamweaverでは拡張機能でプラグインをインストールすることで使えていましたが、Emmetの省略記法によるソースコード展開が標準機能として実装されています。

さて、Emmet記法とは何か。

何気なく使っているかもしれませんが、
例えば、HTMLソースコード画面で「div」と入力して、キーボードのtabキーをおすとdivが消えて「<div></div>」とコード展開すると思います。

次に「#box」と入力して、キーボードのtabキーを押すと#boxが消えて「<div id="box"></div>」とコード展開します。

 

はい、これがEmmetコーディングです。
(tabキーをポチるだけ・・・・)

 

この記法を組み合わせてコード展開することで、ページの大枠やパーツなどをさくっと作ってしまおう、というのがEmmetコーディングです。

コーディングする上で何より大事なこと、

それは「コーディングミスがなくなる」ということ。

開発者が、「すばやくミスなくコーディングする」というのは慣れに頼るところが大きいですが、Emmetを使えば、経験値にかかわらず誰でもミスなくすばやくコーディングができる!という魔法の記法なのですね。

Emmetなしのコーディングはもう考えられない
発明的な技術やな

 

よく使うレイアウト

シングルカラムレイアウト

最近のwebサイトやランディングページ(LP)ではほぼこの形に収まっています。

レスポンシブデザインもやりやすく使い勝手が良いですね。

#containerの中にヘッダー、メインコンテンツエリア、フッター、というシンプルな縦積み構造です。

Emmetコード

#container>header+main+footer

↑コードをコピーしたら、DreamweaverのHTMLソースコード上でtabキーを押してコードを展開!

まーこれが最近はよく使うかなー
この程度ならEmmet使うまでもないがなw

 

2カラムレイアウト

ブログやサービスサイトの管理画面、コーポレートサイトなどに採用する2カラムレイアウトです。

メニューカラムを右か左に配置してナビゲーションにしたり、バナーなどのサブコンテンツを配置するパターンがあります。

レスポンシブの場合は、leftカラムの下にrightカラムが回り込む形になります。
もしくはrightカラムがサブメニューなどになります。

Emmetコード

#container>header+(main>(#left+#right))+footer

↑コードをコピーしたら、DreamweaverのHTMLソースコード上でtabキーを押してコードを展開!

たまに欲しくなるレイアウト
tabをポチるだけでできるなら簡単やなー

 

まとめ

Emmetはcssでも使えます。

CSSの場合は使いこなせるとコーディングが爆速になると思います。

Emmetチートシートというものもあるので、よく使うスタイルやパターンは調べてみましょう。

https://docs.emmet.io/cheat-sheet/

 

まずは定型的なHTMLレイアウトをEmmetでスニペット登録をしておくのもおすすめです。

今回は入門編で簡単なレイアウトをご紹介しましたが、本格的にメニューやロゴエリア、見出しや本文エリアも仕込んでおくと、使い勝手が格段によくなります。

Dreamweaverも自分なりにカスタムしたほうが圧倒的に使いやすくなりますので、正確でスピーディな爆速コーディングを実現したいなら是非ともEmmetを導入してみてくださいね。

 

関連するおすすめ記事

Amazonチャージ


Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

Amazonクリスマスギフト
  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-HTML / CSS
-, ,

Copyright© ヤッテモータース , 2018 All Rights Reserved.