[no_toc]
ホームページを作っていく上で、欠かせないツールのDreamweaver（ドリームウィーバー）ですが、便利な拡張機能を使用して、より効率的に利用していきたいですよね。
拡張機能もいろいろありますが、その中でも最も代表格となるものが、Emmet（旧Zen Coding）だと思います。
Web屋には常識必須ツールなので、今さら感は否めない記事ですが、僕の周りでは意外にまだZen Codingを知らないという人がいたので、メモしておこうと思います。
ただ、今回はZen Codingに関するうんぬんは、割愛したいと思います。
機を改めてアップしようと思いますので、その時にまたお付き合いください。
ここでは、HTMLのショートカットではなく、よく使用するCSSのスニペットをまとめてみました。
HTMLでは、例えば【table>tr>th】だったり、【div#hoge>ul.list>li】などの、入れ子構造の記述の際にZen Codingがかなり役立ちますが、CSSでもその利便性はバツグンです。
それでは早速いってみましょー
目次
Zen CodingのCSSショートカットコマンド
margin（マージン）
| コマンド | 適用スタイルシート |
|---|---|
| m | margin:; |
| mt | margin-top:; |
| mr | margin-right:; |
| mb | margin-bottom:; |
| ml | margin-left:; |
| m:0 | margin:0; |
padding（パディング）
| コマンド | 適用スタイルシート |
|---|---|
| p | padding:; |
| pt | padding-top:; |
| pr | padding-right:; |
| pb | padding-bottom:; |
| pl | padding-left:; |
| p:0 | padding:0; |
float（フロート）とclear（クリア）
| コマンド | 適用スタイルシート |
|---|---|
| fl | float:; |
| fl:l | float:left; |
| fl:r | float:right; |
| cl | clear:; |
| cl:b | clear:both; |
overflow（オーバーフロウ）
| コマンド | 適用スタイルシート |
|---|---|
| ov | overflow:; |
| ov:h | overflow:hidden; |
| ov:s | overflow:scroll; |
width（ウィズ）とheight（ハイト）
| コマンド | 適用スタイルシート |
|---|---|
| w | width:; |
| h | height:; |
border（ボーダー）
| コマンド | 適用スタイルシート |
|---|---|
| bd | border:; |
| bd+ | border:1px solid #000; |
| bdt+ | border-top:1px solid #000; |
| bdr+ | border-right:1px solid #000; |
| bdb+ | border-bottom:1px solid #000; |
| bdl+ | border-left:1px solid #000; |
display（ディスプレイ）
| コマンド | 適用スタイルシート |
|---|---|
| d | display:; |
| d:b | display:block; |
| d:ib | display:inline-block; |
position（ポジション）
| コマンド | 適用スタイルシート |
|---|---|
| pos | position:; |
| pos:r | position:relative; |
| pos:a | position:absolute; |
| pos:f | position:fixed; |
| t | top:; |
| r | right:; |
| b | bottom:; |
| l | left:; |
文字の装飾
| コマンド | 適用スタイルシート |
|---|---|
| c | color:#000; |
| fz | font-size:; |
| fw | font-weight:; |
| fw:n | font-weight:normal; |
| fw:b | font-weight:bold; |
| lh | line-height:; |
| ta | text-align:; |
| ta:c | text-align:center; |
| ta:l | text-align:left; |
| ta:r | text-align:right; |
その他
| コマンド | 適用スタイルシート |
|---|---|
| bg | background:; |
| bg+ | background:#FFF url() no-repeat 0 0; |
| va | vertical-align:; |
| va:t | vertical-align:top; |
| va:b | vertical-align:bottom; |
以上、いかがでしたでしょうか？
どのコードもサイト制作過程でよく使うものだと思います。
個人的には、【bdb+】で→【border-bottom:1px solid #000;】と、ズバババッと展開するショートカットなどは、大変気に入っております。
Zen Codingのチートコード一覧も公開されていますが、憶えるにはあまりに数が多すぎるので、とりあえずは上記のコマンドを一通り網羅するくらいでいいかなと思います。
いやぁ〜、ほんとZen Codingは、ワードプレスに次ぐ21世紀の大発明の１つだと（勝手に）思っています。
開発者様たちに感謝ですね。
それでは今回はこの辺りで！
