[B! emmet] akira_maruのブックマーク

sass/cssで使いたい！Emmetのおすすめショートカット集 | たねっぱ！

sass / scss / cssコーディングで使用できるものに限定した、Emmetおすすめショートカット一覧です。皆さんはEmmetを使っていますか？ Emmetチートシートという便利なものもありますが、実際に使っているのは、この中の一部だったりします。。ということで、今回はsass/cssコーディングで使用できるものに限定し、その中でもオススメを紹介します！ちょこっと応用編もありますので、合わせてチェックしてみてください。早速紹介していきます〜おすすめショートカット（基本編） ※コマンドに使用している「：」は省略できます。 display コマンド展開後

akira_maru 2018/04/16

emmet

リンク

Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

バイト先で「新ゆとり世代」と言われました。れこです。 HTML、CSSを省略して書けるZen-Codingの後見、 Emmetについて書こうと思います。やれCoffeeだTypeScriptだSassだ〜と手をつける前に、もっと簡単に、デメリット無く作業効率をあげられます。 CoffeeScriptやSassなどのプリプロセッサ系とは違い、 CoffeeやSassの知識を開発メンバー全員が持ってないとならず、結局自由が効かなくなる、ということはありません。個人から使えて、チームで使ってもなお良し。さらに、展開後のカーソルの位置がいい感じだったりと、細かい気配りまで完璧です。そんなEmmetを僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。 Emmetの導入 Emmetは各種エディタ・IDEのプラグイン形式で配布されています。お値段は無料です。 Web系の人が

akira_maru 2015/07/21

emmet

リンク

【Photoshop入門】Webデザインをはじめよう！第1回デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

akira_maru 2015/06/26

リンク

DTP→Webデザイナー転向時に、これやったら捗ったよリスト13

元々DTPやってました自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代）一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい呪文みたいなコードを延々と打つ作業がだるいうまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ

akira_maru 2014/08/19

リンク

[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。 - YoheiM .NET

[取り組み] フロントエンドでコーディングスピードをアップさせる６つの方法！と思って書いてたら30個も書いちゃった。こんにちは、@yoheiMuneです。フロントエンドとしてHTML,CSS,JSを中心と開発を行うことを仕事にして早くも半年が経ちました。最近はだいぶ効率的にコーディングが出来てきたとやっと実感してきたので、ブログにも自分のコーディングスピードアップのコツを書きたいと思います！「こんなのよりももっと良いのあるよ」などたくさんの感じる点があるかと思います。ぜひTwitterなどで教えて頂けると助かります。コーディングをスピードアップする６つ＋αのポイント自分が思うにコーディングをスピードアップする最も大切なポイントは以下ではないかと思います。めんどくさいと感じること、そして改善に動くこと幸い自分はかなりのめんどくさがり屋で、コーディング中も「これ手動！？」「マウ

akira_maru 2014/02/07

リンク

Emmet LiveStyle

Ayyo Movies launched a new design of Smart TV application The main goal of the update — to create a new interface to the Smart TV applications, based on user behavior in the old version Ayyo simultaneously changing all the technical background is. Now, instead of the endless windows with films, the application consists of four sections, corresponding to the four types of audience.

akira_maru 2013/08/06

リンク

https://github.com/emmetio/dreamweaver/tree/master/Commands

akira_maru 2013/05/01

リンク

Emmet Documentation

Emmet — the essential toolkit for web-developers Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: <!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> ~~~ tooltip: Type CSS-like abbreviation type: ul#nav>li.it em$*4>a{It em $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML ::: “Expand Abbreviati

akira_maru 2012/11/29

リンク

Emmet　CSSショートコード

Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形