Emmet (Zen Coding)でCSSを高速コーディング!ショートカットまとめ

日本国内に約10台しか存在しない
高精細インクジェットプリンターで作る
ハイグレードなオリジナルTシャツ
Tシャツ + 印刷代が税込みで
1枚 902円~
自動お見積もり

[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(マージン)

コマンド適用スタイルシート
mmargin:;
mtmargin-top:;
mrmargin-right:;
mbmargin-bottom:;
mlmargin-left:;
m:0margin:0;

 

padding(パディング)

コマンド適用スタイルシート
ppadding:;
ptpadding-top:;
prpadding-right:;
pbpadding-bottom:;
plpadding-left:;
p:0padding:0;

 

float(フロート)とclear(クリア)

コマンド適用スタイルシート
flfloat:;
fl:lfloat:left;
fl:rfloat:right;
clclear:;
cl:bclear:both;

 

overflow(オーバーフロウ)

コマンド適用スタイルシート
ovoverflow:;
ov:hoverflow:hidden;
ov:soverflow:scroll;

 

width(ウィズ)とheight(ハイト)

コマンド適用スタイルシート
wwidth:;
hheight:;

 

border(ボーダー)

コマンド適用スタイルシート
bdborder:;
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(ディスプレイ)

コマンド適用スタイルシート
ddisplay:;
d:bdisplay:block;
d:ibdisplay:inline-block;

 

position(ポジション)

コマンド適用スタイルシート
posposition:;
pos:rposition:relative;
pos:aposition:absolute;
pos:fposition:fixed;
ttop:;
rright:;
bbottom:;
lleft:;

 

文字の装飾

コマンド適用スタイルシート
ccolor:#000;
fzfont-size:;
fwfont-weight:;
fw:nfont-weight:normal;
fw:bfont-weight:bold;
lhline-height:;
tatext-align:;
ta:ctext-align:center;
ta:ltext-align:left;
ta:rtext-align:right;

 

その他

コマンド適用スタイルシート
bgbackground:;
bg+background:#FFF url() no-repeat 0 0;
vavertical-align:;
va:tvertical-align:top;
va:bvertical-align:bottom;

 

以上、いかがでしたでしょうか?
どのコードもサイト制作過程でよく使うものだと思います。

個人的には、【bdb+】で→【border-bottom:1px solid #000;】と、ズバババッと展開するショートカットなどは、大変気に入っております。

Zen Codingのチートコード一覧も公開されていますが、憶えるにはあまりに数が多すぎるので、とりあえずは上記のコマンドを一通り網羅するくらいでいいかなと思います。

いやぁ〜、ほんとZen Codingは、ワードプレスに次ぐ21世紀の大発明の1つだと(勝手に)思っています。

開発者様たちに感謝ですね。

それでは今回はこの辺りで!

タイトルとURLをコピーしました