本サイトではアフィリエイト広告を利用しています。
2019/01/22Emmet 操作メモ
HTML、CSSを省略して書くことができる「Emmet」の使い方を書こうと思います。
フロントエンドの実装などでHTMLやCSSを書く際に、Emmetを使えばかなり作業効率を上げられます。 一度使うと手放せなくなるツールです。慣れると何倍もの速さで記述ができるようになります。
省略形をなかなか覚えられないので、都度この記事に書いて覚えようと思います。 とりあえずよく使うものからメモしておいて、どんどん継ぎ足しながら整理していく方針です。
ちなみに私はvimで利用しています。他のエディタやIDEでも使えますので調べて使ってみてください。Vimでは
.vimrcに以下を記述
NeoBundle 'mattn/emmet-vim'
let g:user_emmet_leader_key='<c-e>'以下に公式のチートシートがあるのでこれを印刷して手元においておくのがおすすめです。
公式のチートシート
HTML
HTMLのalias
html:5
!階層
ul>li*3並列
div+div+div上の階層へ
div>p>span+em^bqグループ化
div>(header>ul>li*2>a)+footer>pid class
div#idname+div.classname属性
div[data-index=index data-name=name]連番
img[src=photo$$.jpg]*3タグ内のテキスト
div{hello world}CSS
概要
w100p+m10
width: 100%;
margin: 10px;単位
p %
e em
x eximportant
m10e! margin: 10em !important;vender prefixes
-bdrs
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
w webkit
m moz
s ms
o o配置
pos:a position:absolute;
d:b display:block;
d:f display:flex;
d:if display:inline-flex;
d:i display:inline;色
c:ra color:rgba(0, 0, 0, .5);マージン
m margin:;
m:a margin:auto;
mt margin-top:;サイジング
w width:;
w:a width:auto;
h height:;
maw max-width:;
maw:n max-width:none;
mih min-height:;border
bd border:;
bd+ border:1px solid #000;text
va:t vertical-align:top;
ta:c text-align:center;
td:n text-decoration:none;
td:u text-decoration:underline;おわりに
ざっくり個人的に使いそうなもの、忘れそうなものを記載しています。とても入力が簡単になるので便利です。引き続きこれは便利というものが合ったら更新・整理します。
初心者のうちは写経などでコーディングをする機会は多いと思います。早めにこのような便利なツールの使い方を覚えておきましょう。今時写経なんてしないんでしょうか。動画教材みて完了なのかもしれませんが、このようなツールに触れつつHTML/CSSを書いてみるのも理解が深まるのでおすすめです。
上にも書いてますが、チートシートを印刷して手元に置きながら使ってみるのが便利です。Vimやtmuxのショートカットなども私はそうやって覚えました。
