Emmetってどれくらい活用してる? 略して楽するハッピーコーディング！ | 東京上野のWeb制作会社LIG

2018/07/07 18 users Emmet 雨音 さわ 小生 CSS

みなさん、お元気ですか？ 作業用BGMはどこかの島の雨音、フロントエンドエンジニアのザワです。 今回は、日頃より爆速コーディングを目指している小生が「Emmetを使った場合」と「使わない場合」でどのくらい時間短縮できるのか、興味本意で試してみた結果をご紹介します。 Emmetとは HTML、CSSをコーディングするとき... 続きを読む

JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita

2017/03/29 1084 users Qiita

みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, C... 続きを読む

HTML/CSSを爆速コーディング Emmet入門 第5回 Emmetを使って、コードの編集を強力にサポートする（前編） | Adobe Creative Station

2015/08/28 87 users Emmet Emmet入門 コーディング CSS 生成

これまでの連載では、Emmetの省略記法の展開に関わる内容について説明してきました。しかしコーディングの時は、HTMLやCSSの生成だけでなく、既存のコードに追加や編集をする作業も必ず発生します。 Emmetにはアクションと呼ばれる編集支援機能が16も用意されています。Emmetの展開は、アクションの一つです。他のアクションも使えるようになれば、HTMLやCSSのコーディングがもっと楽になります。... 続きを読む

HTML/CSSを爆速コーディング Emmet入門 第3回 エディタのコードヒントよりも早い！EmmetのCSSの記法とは？ | Adobe Creative Station

2015/06/24 119 users Emmet Emmet入門 エディタ CSS HTML

EmmetはHTMLだけなく、CSSでも省略記法を利用できます。Emmetを使ってCSSを書くには慣れが必要ですが、ある程度覚えればコードヒントを使うよりも素早くCSSの記述ができるようになります。 今回はCSSの省略記法について解説します。 コードヒントよりも、Emmetが早い理由 多くのエディタにはコードヒントが付いており、コードの記述をサポートしてくれる機能があります。CSSのコードヒントの... 続きを読む

snippets.jsonを拡張してCoda2+Emmetで爆速コーディング

2015/03/06 16 users

Macユーザに人気のエディタ、『Coda2』。Zen-Codingの後見として有名なプラグイン『Emmet』と併用している方は多いと思います。今回は、このEmmetが提供するスニペットを独自に拡張して作業スピードを上げる方法について書いていきます。Coda2 Macユーザに人気のエディタ、『Coda2』。 Zen-Codingの後見として有名なプラグイン『Emmet』と併用している方は多いと思いま... 続きを読む

HTML/CSSを爆速コーディング Emmet入門: 第1回 Emmetを薦める理由

2015/02/25 170 users Drea Emmet Emmet入門 エディタ CSS

Web制作に欠かせないツールである「Emmet」というものを、知っていますか？  この連載では、お使いのエディタの機能を拡張するEmmetのインストールから、HTML・CSSの展開、あまり知られていない便利な機能などを解説します。初回は、Emmetの概要とインストール方法についてです。 Emmetとは何か？ Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。Drea... 続きを読む