でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

クリエイティブ・コモンズ・ライセンス表示

2014.05.22 [木]

主に使うEmmet短縮記述構文

EmmetAdorableLadyFont003.png

※ゴーレムを滅するのにEmeth（真理）の頭文字のEを消してmeth（死）にする、という話を思い出してしまう。
emet,emeth,emes.


主に使うEmmet短縮記述構文

　※私が個人的に主に使う、という意味です。
table table>(tr>td*3)*10 　td×数、(tr>td)×数、算数ですね。テーブル作成時に活躍します。コピペで作るよりずっと簡単で早いです。楽です。
list ul>li*3>ol*5 　リスト作成時もテーブルと同様、やはりEmmet記法を使った方が楽です。特に入れ子状態になったようなリストだと楽さが違いますね。
class p.minititle
.wakudash
span.haikeiao		 　.　だけだと自動的にdivになります。それ以外を使いたい時は手入力。
.　の後ろがクラス名になります。
html ! 　ページを作る時の大枠の構造ですね。これはHTML5ですが、これ以外にも各種あります。

※単語の日本語訳は自分独自解釈ですので、特にこれといった決まった日本語定型句があるわけではないので、自分で勝手にわかりやすい感じの日本語にしているので、間違っている言葉もあると思います。


　　　　　　　　　　　　 ／）
　　　　　　　　　　　／／／）　こまけぇこたぁいいんだよ！！
　　　　　　　　　 ／,.=ﾞ''"／
　　　／　　　　 i f　,.r='"-‐'つ＿＿＿_
　　/　　　　　 /　　　_,.-‐'~／⌒　　⌒＼
　　　　／　 　,i　　　,二ﾆ⊃（ ●）.　（●）＼
　　　/　 　　ﾉ　　　 ilﾞフ::::::⌒（__人__）⌒::::: ＼
　　　　　　,ｲ｢ﾄ､　　,!,!|　　　　　|r┬-|　　　　　|
　　　　　/　iﾄヾヽ_/ｨ"＼ 　　 　 `ー'´ 　 　 ／


Bracketsはこれが出来ないのが不便

　ここまでBracketsでEmmetを使ってきて思ったことを書いておく。
　けどこれはUpdateされて解消される可能性大。
　（2014年5月22日現在）


●改行を含む文字列の検索と置換が出来ない。

　・SublimeTextでは普通に出来てたので、これが出来ないのは不便。



●imgのwidthとheightの自動入力が出来ない。

　･SublimeTextでは出来た。これはその内Brackets用のEmmetプラグインがアップデートされれば出来るようになるんじゃないかと思われ。




Emmetの構文規則

　短く書かれた算数式みたいな構文の後ろで「Tabキー」または「Ctrl+Alt+Enter」キーを押すことでHTMLに展開される。

※↑Brackets上のキー操作です。SublimeTextだとCtrl+Eですね。

　

子要素: >

nav>ul>li


<nav>
    <ul>
        <li></li>
    </ul>
</nav>

同列加算: +

div+p+bq


<div></div>
<p></p>
<blockquote></blockquote>

段上げ: ^

div+div>p>span+em^bq


<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
    <blockquote></blockquote>
</div>

div+div>p>span+em^^bq


<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
</div>
<blockquote></blockquote>

カッコ: ()

div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

(div>dl>(dt+dd)*3)+footer>p


<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

掛ける: *

ul>li*5


<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

番号付け: $

ul>li.item$*5


<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

h$[title=item$]{Header $}*3


<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

ul>li.item$$$*5


<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

ul>li.item$@-*5


<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@3*5


<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ID CLASS 属性

#header


<div id="header"></div>

.title


<div class="title"></div>

form#search.wide


<form id="search" class="wide"></form>

p.class1.class2.class3


<p class="class1 class2 class3"></p>

サイト独自属性の割り当て

p[title="Hello world"]


<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]


<td rowspan="2" colspan="3" title=""></td>

[a='value1' b="value2"]


<div a="value1" b="value2"></div>

文字の挿入: {}

a{Click me}


<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}


<p>Click <a href="">here</a> to continue</p>

クラス名： .

.class


<div class="class"></div>

em>.class


<em><span class="class"></span></em>

ul>.class


<ul>
    <li class="class"></li>
</ul>

table>.row>.col


<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>



HTML

　未知の略語は全てタグに変換されます。
　[例] foo → <foo></foo>
　

!

Alias of html:5


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

a


<a href=""></a>

a:link


<a href="http://"></a>

html:5

Alias of !!!+doc[lang=${lang}]


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

ol+

Alias of ol>li


<ol>
    <li></li>
</ol>

ul+

Alias of ul>li


<ul>
    <li></li>
</ul>

dl+

Alias of dl>dt+dd


<dl>
    <dt></dt>
    <dd></dd>
</dl>

map+

Alias of map>area


<map name="">
    <area shape="" coords="" href="" alt="" />
</map>

table+

Alias of table>tr>td


<table>
    <tr>
        <td></td>
    </tr>
</table>


その他の記述方法や構文は公式サイトのチートシートをどうぞ。

Emmet公式サイト


関連記事
記事作成日：2014年05月22日(木)  |  カテゴリ：Emmet

« NEW | HOME | OLD »

2012©でん⚡きかいでん
Design by 七月亭

▲