[PhpStorm/WebStorm] Emmet記法の基本のキ

Emmet記法を使うとコーディングが早くできるらしいと聞いてはいたのですが、これまでDreamweaverのタイトルタグを出すショートカットや強調ショートカット、ボタンを駆使してきた私にはわかりにくいものでした。

でも使ってみたらやっぱり便利ですね。
少しずつ記法を覚えていきたいと思います。

基本の利用方法は< >を抜いたタグをうち、[Tab]キーを押すことで<~>から</~>で括られた一式が表示されます。

ex. 
p + [tab]キー
↓
<p></p>

中にテキストをはさみたい場合は{}ではさみます。

ex. 
p{ねことわたし} + [tab]キー
↓
<p>ねことわたし</p>

リンクしたいURLなど属性を入れたい場合は[]ではさみます。

ex. 
a[href="http://~"]{リンク} + [tab]キー
↓
<a href="http://~"  >リンク</a>

このリンクを5個増やしたい場合は*5を付けます。

ex. 
a[href="http://~"]{リンク}*5 + [tab]キー
↓
<a href="http://~"  >リンク</a><a href="http://~"  >リンク</a><a href="http://~"  >リンク</a><a href="http://~"  >リンク</a><a href="http://~"  >リンク</a>

ちなみに単純に同じ行を増やしたい場合は行末で[command] + [d]を押すとコピーして増やせます。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様