[Emmet]テーブルの基本

Emmet記法で以下のように書いて展開すると、基本のテーブルが展開されます。 この形を覚えるとテーブル作成がだいぶ楽になると思います。 table>tbody>(tr>th+td)*5 ↓ <ta…

Read more

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

入れ子にして記述する 一番使うことが多そうです。 .clearfix>.floatLeft ↓タブで展開する <div class=”clearfix”> <div class=”floatLef…

Read more

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

EmmetのCSSでよく利用するショートコードです。 position は pos pos:absolute ↓タブで展開する position: absolute; border は bd borderはbdと記述し、…

Read more

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

EmmetではCSSも記述することができたのですね。 ショートコードというそうで、以前ご紹介したhttp://docs.emmet.io/cheat-sheet/こちらのチートシートに記述されています。 かなり数が多いの…

Read more

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

Emmet記法では$を利用することで、自動でナンバリングすることができます。 draggableというclassのdivに囲まれた要素を10個作ってナンバリングさせる .draggable{テスト$}*10 ↓ [Tab…

Read more

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

Emmet記法で1つの要素に複数のclassを指定するのはどうすればいいのかなと思ったら、なんのことはなく、.classを複数書いていけばいいだけでした。 pタグにclass1 class2の2つのclassを指定したい…

Read more

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

たとえばチェックボックスを複数個作成したい場合に、Emmet記法で下のように普通に記述してしまうと、生成される内容がちがくなってしまいます。 label>input[type=”checkbox”]*3 ↓ [Ta…

Read more

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

loremというテキストをうってTabで変換することで、ダミーテキストが入力されます。 p.text>lorem ↓ <p class=”text”>Lorem ipsum dolor sit amet…

Read more

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

Emmet記法が一覧で書いてあるのでとても便利ですね。 Emmet記法のチートシートhttp://docs.emmet.io/cheat-sheet/ divの場合は以下のようにクラス名だけを指定するだけで記述してくれる…

Read more

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

WebStormにはEmmetが標準搭載されています。 以前はZen-codingと呼ばれていたフロントコーディングの入力支援です。 たとえば img とだけ打ってtabを押すと <img src=”” alt=”…

Read more

Emmet:!は便利

! HTML上でこれをEmmetで展開すると下記のHTMLフォーマットを出力します。 <!doctype html> <html lang=”en”> <head> <meta …

Read more

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

db → display: block; dn → display: none; dib → display: inline-block; bgc#fff → background-color: #ffffff; pos…

Read more

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

db → display: block; dn → display: none; dib → display: inline-block; t0 → top: 0; l0 → left: 0; fll → float: …

Read more

最近よく使うEmmet記法

少し長めの記法も一度覚えてしまえば使う頻度がかなり上がってきたのでご紹介。 fsz10px → font-size: 10px; ff → font-family tac → text-align: center; po…

Read more

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

HTMLと異なり複数行一度に出力はできませんが、CSSもプロパティ名を短縮形で書くことができます。 db dn poss posr posa posf m:a m10,5x w100 w100% fz13 fwb c#f…

Read more