1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. すぐに始められる、コーディング作業効率化 2

Posted on Jul 11, 2016 by Naitou

すぐに始められる、コーディング作業効率化 2

記事カテゴリー: HTML

Dreamweaverで標準サポートされているEmmetを使うと、HTMLを簡単に記述する事が出来ます。

Emmetによるhtml記述についてはこちらで書いています。
このページではcssの記述について説明します。引き続きDreamweaverCC上での挙動を想定しています。

Emmetによるcssの省略入力

htmlと比べ、cssの場合は省略された属性名を覚える必要があります。
詳しくはチートシートをご参照ください。

cssの省略入力はとにかく短いです。
元々短い属性は頭文字1文字だけでも変換されます。

emmetcss_1
fl →tab→ float:left;
t0 →tab→ top:0;
cb →tab→ clear: both;

Emmetにおける単位の省略

単位の初期値はpxです。パーセントは「p」、emは「.」で省略されます。

emmetcss_2
m10p →tab→ margin:10%;
m10. →tab→ margin:10em;
m-a →tab→ margin:auto;

mをpに変えるとpaddingで変換されます。
このmargin/paddingの省略はとてもよく使います。すごく短い、すごく便利だ。

ただし、「margin:0 auto;」のように間に半角スペースが入るような属性値の場合は、Emmetが変換範囲と認識できず思うように変換できません。半角スペースの代わりに「-」で繋ぎます。

m0 10 →tab→ m0 :;(「10」のみで変換されてしまい失敗する)
m0-10 →tab→ margin: 0 10px;
emmetcss_3

単位を省略せず書いても変換してくれます。

m10em →tab→ margin:10em;

Emmetにおけるborder属性の省略

borderの省略属性名は「bd」です。(「b」を変換させるとbottomが出ます)

bd →tab→ border: ;
bd+ →tab→ border:1px solid #000;

border属性の省略

borderから始まる属性にはいくつか種類があります。
頭文字をどんどん繋ぎ足していくと変換してくれます。

bdb →tab→ border-bottom: ;
bdbc →tab→ border-bottom-color: #000;(初期値)
bdc →tab→ border-color: #000;(初期値)
bdc:#f00 →tab→ border-color: #f00;

Emmetにおけるフォント属性の省略

フォント属性でよく使う要素に「font-size」と「font-style」がありますが、どちらもsで始まります。

emmetcss_4変換してみるとfont-styleになります、初期値はitalicです。

属性値を指定する場合は「:」で区切って属性値の頭文字を記述します。

emmetcss_5

fs→font-styleならfont-sizeは?

font-sizeはzを使います。

emmetcss_6

この時、数値を小数点にすると、単位は自動で「em」指定になります。

fz.5 →tab→ font-size: .5em;

Emmetにおけるディスプレイ属性の省略

displayの省略属性名は「d」です。
「:」で区切って属性値の頭文字を記述します。(一部他属性と被らない場合は:が無くても変換してくれます)

d →tab→ display:block;(初期値)
d:ib →tab→ display:inline-block;
d:t →tab→ display: table;
d:tc →tab→ display: table-cell;
dib →tab→ display:inline-block;(dibが他の属性と被らないので変換可能)

Emmetにおける行揃え属性の省略

text-alignの省略属性名は「ta」です。
「:」で区切って属性値の頭文字を記述します。

ta →tab→ text-align:left;(初期値)
ta:c →tab→ text-align:center;
ta:r →tab→ text-align:right;

Emmetにおける!important

末尾に「!」を追加することで生成されます。

emmetcss_7

Emmetにおけるベンダープレフィックス

ベンダープレフィックス生成の省略表記もありますが、こちらは-webkit-、-moz-、-ms-、-o-、ハック無し、と5つ一度に生成します。
「-」を属性の先頭に記述します。

emmetcss_8

5つ一度に生成してしまい、必要無いベンダープレフィックスも記述されてしまうので使いどころが難しそうです。

属性の省略表記はたくさんあります。
全部覚えなくてもよく使うmarginやdisplay、font-sizeを覚えるだけでも作業効率はぐんと上がると思います。

この記事についての補足

Emmet:Emmetチートシート

関連記事:Emmetでのhtmlについて書いた記事

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS