emmet(19)

18follower
harada さんのアバター 21views

[Emmet]テーブルの基本

Emmet記法で以下のように書いて展開すると、基本のテーブルが展開されます。 この形を覚えるとテーブル作成がだいぶ楽になると思います。 table>tbody>(tr>th+td)*5 ↓ &l... 2016年8月8日
harada さんのアバター 31views

[Emmet]要素を接続する基本の記号

入れ子にして記述する 一番使うことが多そうです。 .clearfix>.floatLeft ↓タブで展開する <div class="clearfix"> <div class="floatLeft"&g... 2015年5月29日
harada さんのアバター 88views

[PhpStorm/WebStorm] EmmetのCSSでよく利用するショートコード

EmmetのCSSでよく利用するショートコードです。 position は pos pos:absolute ↓タブで展開する position: absolute; border は bd borderはbdと記述し、それな... 2015年5月28日
harada さんのアバター 54views

[PhpStorm/WebStorm] Emmet記法でCSSを記述する

EmmetではCSSも記述することができたのですね。 ショートコードというそうで、以前ご紹介したhttp://docs.emmet.io/cheat-sheet/こちらのチートシートに記述されています。 かなり数が多いので、覚えるのは難し... 2015年5月27日
harada さんのアバター 46views

[PhpStorm/WebStorm] Emmet記法で簡単にナンバリングしたダミー要素を生成する

Emmet記法では$を利用することで、自動でナンバリングすることができます。 draggableというclassのdivに囲まれた要素を10個作ってナンバリングさせる .draggable{テスト$}*10 ↓ [Tab]で変換 ... 2015年5月21日
harada さんのアバター 223views

[PhpStorm/WebStorm] Emmet記法で複数classを指定する

Emmet記法で1つの要素に複数のclassを指定するのはどうすればいいのかなと思ったら、なんのことはなく、.classを複数書いていけばいいだけでした。 pタグにclass1 class2の2つのclassを指定したい場合 p.cla... 2015年5月11日
harada さんのアバター 13views

[PhpStorm/WebStorm] コードをグルーピングして繰り返したい箇所を指定する

たとえばチェックボックスを複数個作成したい場合に、Emmet記法で下のように普通に記述してしまうと、生成される内容がちがくなってしまいます。 label>input[type="checkbox"]*3 ↓ [Tab]で変換 ... 2015年5月1日
harada さんのアバター 52views

[PhpStorm/WebStorm] 表示を確認するために簡単にダミーテキストを入れる

loremというテキストをうってTabで変換することで、ダミーテキストが入力されます。 p.text>lorem ↓ <p class="text">Lorem ipsum dolor sit amet, cons... 2015年4月15日
harada さんのアバター 23views

[PhpStorm/WebStorm] 使いたいEmmet記法が分からなかったら見るサイト

Emmet記法が一覧で書いてあるのでとても便利ですね。 Emmet記法のチートシートhttp://docs.emmet.io/cheat-sheet/ divの場合は以下のようにクラス名だけを指定するだけで記述してくれるようです。 .c... 2015年4月14日
goto_jp さんのアバター 345views

WebStorm使いはEmmetでHTMLコーディングを高速化しよう

WebStormにはEmmetが標準搭載されています。 以前はZen-codingと呼ばれていたフロントコーディングの入力支援です。 たとえば img とだけ打ってtabを押すと <img src="" alt=""/>... 2015年1月19日
goto_jp さんのアバター 95views

Emmet:!は便利

! HTML上でこれをEmmetで展開すると下記のHTMLフォーマットを出力します。 <!doctype html> <html lang="en"> <head> <meta charset... 2014年11月14日
goto_jp さんのアバター 175views

最近よく使うEmmet記法 2014年10月版

db → display: block; dn → display: none; dib → display: inline-block; bgc#fff → background-color: ... 2014年10月14日
goto_jp さんのアバター 228views

最近よく使うEmmet記法 2014年8月版

db → display: block; dn → display: none; dib → display: inline-block; t0 → top: 0; l0 → ... 2014年8月5日
goto_jp さんのアバター 250views

最近よく使うEmmet記法

少し長めの記法も一度覚えてしまえば使う頻度がかなり上がってきたのでご紹介。 fsz10px → font-size: 10px; ff → font-family tac → text-align: center; posa → posi... 2014年5月15日
goto_jp さんのアバター 264views

Emmetメモ:CSSのコーディング速度UP

HTMLと異なり複数行一度に出力はできませんが、CSSもプロパティ名を短縮形で書くことができます。 db dn poss posr posa posf m:a m10,5x w100 w100% fz13 fwb c#f00 それぞれ展... 2013年12月3日
goto_jp さんのアバター 218views

Emmetメモ:HTML基本構造を出力する

「Doctype」から始まるHTMLの基本構造を一発で出力できます。 ! 「コード?」って感じかも知れませんが、これをHTML展開すると下記になります。 <!doctype html> <html lang=&quo... 2013年12月2日
goto_jp さんのアバター 734views

Emmetメモ:面倒なselectタグを一気に作る

selectタグによるプルダウンは量が多いこともあり、普通にコーディングしていると結構な手間です。そんな時こそEmmetで楽しましょう。 select>option*115>{$@1900} select>option*... 2013年11月29日
goto_jp さんのアバター 307views

Emmetメモ:フォームパーツを一括量産

Emmet記法 form#form1>ul.radioList>li*5>label[for=r-$]>input[type=radio name=r id=r-$]+{内容$} HTML展開結果 <fo... 2013年11月28日
goto_jp さんのアバター 611views

Emmet(zen-coding)でコーディング高速化!

だいぶ前より自分自身zen-codingの話は耳に挟んでいましたが、つい先日ようやく触れ始めたので共有します。※以前はzen-codingというプロジェクト名でしたが、最近になってEmmetとプロジェクト名が変わったようなので、以後はEmm... 2013年11月26日