WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

HTMLやCSSを省略して書くことができるEmmet

Emmetとは

HTML、CSSを省略して書くことができる。

導入方法

SublimeText2などのエディタにプラグインとして配布しているので
インストールをする。

使い方

【SublimeTextの場合】
Emmetのコードを打ち、カーソルをコードの最後に置いた状態で
「Ctrl + e」を押すと展開できる。

Bracketsの場合】
Emmetのコードを打ち、カーソルをコードの最後に置いた状態で
「Tab」キーを押す

入れ子にしたい場合は「>」で区切って入力する。
同じ要素を何個も書きたい場合は「*」の後に書きたい要素分の数を入力する。

例:ul>li*7>img

<ul>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
</ul>

marginなど複数の値を書きたい場合は「-」で区切って入力する。

例:m1--5-10--9

margin: 1px -5px 10px -9px;

「-」を先頭に付けると必要なベンダープレフィックをつけてくれる。
例:-trans

-webkit-transition: prop time;
-o-transition: prop time;
transition: prop time;

コード

HTML

!

HTML5のひな型を作ってくれる。
デフォルトだとlangが「en」になっているので「ja」に直す。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>
link
<link rel="stylesheet" href="">
a[href=#]
<a href="#"></a>

CSS

m:a
margin: auto;

「mt」、「mr」、「mb」、「ml」でそれぞれ
「margin-top」,「margin-right」,「margin-bottom」,「margin-left」
となっている。

p
padding: ;
bd
border: ;

「bdt」、「bdr」、「bdb」、「bdl」でそれぞれ
「border-top」,「border-right」,「border-bottom」,「border-left」
となっている。

db
display: block;
tac
text-align: center;