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

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

正当なCSSです! クリエイティブ・コモンズ・ライセンス表示

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公式サイト


関連記事

« NEW  | HOME |  OLD »

コメント

コメントの投稿


「コメント非表示」管理人しか閲覧できないコメントにする。

 | HOME |