li*2" ↓ <ul> <li></li> <li></li> </ul> *の後ろに子要素の数を入れます。この場合<li>が2つ欲しかったので*2と記入 □“w20”→width:20px; □“a” → <a href=“”></a> まだ他にもたくさんあるのですが、下のリンクをご覧いただくと、本当にたくさんであることがお分かりになるかと思います。 Emmetコード一覧表 すこしずつ、よく使うものから取り入れてみましょう。 2)Emmetを導入しよう 今回は「Adobeのソフトをお持ちの方」及び「Dreamweaverをお持ちの方」限定になるのですが、説明していこうと思います。 1. まずはEmmetのサイトからダウンロードします。この場合、「Dreamweaver」のアイコンがあるものをクリック。 2. それが終わったらダウンロードファイルをクリック。 すると「Adobe Extension Manager」が立ち上がります。 Adobe ExtensionかDreamweaverいずれかが最新の状態にしておかないとエラーが出るので、アップデートを忘れずに。 3.左の製品名「Dreamweaver」をクリックして、「Emmet」が表示されれば、インストール成功! 最初はソースを覚えること自体時間がかかってしまいますが、一度覚えてしまえばこちらのものです! Emmetをマスターして、コーディングを早くしてみてはいかがでしょうか? ">
  • 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2015年5月01日(金曜日)  ()

コーディング速度が格段にアップ!Emmetを活用しよう。

デザイナーの山本です。

入社2年目に突入した私。仕事に大分慣れてきて、最近はいかに仕事の効率を上げていこうか模索しているところです。

特にコーディングは、ソースを組む量がたくさんなので、真面目に打ってしまうと、工数だけが積み重なるばかり。
Dreamweaverはある程度タイプすれば予測機能でプロパティ名が出てくれますが、他の部分でももっと早くできないか・・・

そこで、ソースを打つ手間をぐっと少なくしてくれるものがありました!
Emmet」というプラグインです。
ある程度コーディングに慣れている方なら、使ってみると、あまりのスピードにびっくりしてしまうかもです。


1)Emmetは打つ手間が減る!

例えば・・・

<div class=“box”></div>
と打ちたいときは、
--------------------------
.box
→ command+e(ショートカットキー)
--------------------------
だけでOKです!
「.」はクラス、その後の単語がクラス名を表しています。
「command+e」をすることで、通常のソースの書き方に変換してくれます。
※windowsの方はcommandの代わりにctrlを押してください。


さらにさらに、

例えば幅を指定するとき、
width: 50px は
--------------------------
w50
→command+e
--------------------------
でよいのです。
wはもちろんwidthの頭文字、pxは省略できます。

見てのとおり、打つ内容が随分と短縮されているので、Emmet用の短縮コードを覚えさえすれば素早くコードを組めるのが特長です。

Emmetを導入して以来、HTMLを組む速度が格段にスピードアップしました。なんだか真面目に手打ちしていた時間が惜しい気がします!笑


よく使うEmmetコードは以下にまとめました。
□“#” → id
□". “ → class
□“ul>li*2"

<ul>
<li></li>
<li></li>
</ul>
*の後ろに子要素の数を入れます。この場合<li>が2つ欲しかったので*2と記入
□“w20”→width:20px;
□“a” → <a href=“”></a>

まだ他にもたくさんあるのですが、下のリンクをご覧いただくと、本当にたくさんであることがお分かりになるかと思います。
Emmetコード一覧表
すこしずつ、よく使うものから取り入れてみましょう。



2)Emmetを導入しよう
今回は「Adobeのソフトをお持ちの方」及び「Dreamweaverをお持ちの方」限定になるのですが、説明していこうと思います。

1. まずはEmmetのサイトからダウンロードします。この場合、「Dreamweaver」のアイコンがあるものをクリック。

2. それが終わったらダウンロードファイルをクリック。
すると「Adobe Extension Manager」が立ち上がります。
Adobe ExtensionかDreamweaverいずれかが最新の状態にしておかないとエラーが出るので、アップデートを忘れずに。

3.左の製品名「Dreamweaver」をクリックして、「Emmet」が表示されれば、インストール成功!

最初はソースを覚えること自体時間がかかってしまいますが、一度覚えてしまえばこちらのものです!
Emmetをマスターして、コーディングを早くしてみてはいかがでしょうか?

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン