Dreamweaver CC 2017でEmmetを使い倒す | Thinking Salad

2017/03/28 72 users Dreamweaver CC 標準 ほか 拡張機能 最初

Dreamweaver CC 2017（以下Dw）ではEmmetが標準搭載されているほか、自分でDw用の拡張機能（いわゆるフル版のEmmet）として追加することも可能です。 この2つのEmmetの違いは何か、どのようにして使い分ければいいのか、順を追って解説していきます。 なお呼び方としては 最初からインストールされているEmmet→標準のEmmet 自分で追加する、Dwの拡張機能のEmmet→拡... 続きを読む

Webサイト制作におけるフロントエンドの必須スキル＆開発環境はこれで決まり！ - North-Geek

2016/04/22 428 users North-Geek Git Sass Gulp 流行

最近フロントエンドの流行がどうのこうのという記事をよく目にしますが、実際に現場で 必要となるスキルと開発環境 を紹介していきます。これくらい知っていると全く問題ない。といったことですね。 主にWebサイトを制作のスキルは、 HTML・CSS、CSS3、Sass、SublimeText、Emmet、gulp、Git についてのスキルがあれば開発がしやすく流行の開発環境ではないかと思います。 さて、そ... 続きを読む

UAスタイルシートと リセットCSS

2015/08/30 56 users リセットCSS UAスタイルシート もくじ KOJIKA17

UAスタイルシートと リセットCSS 1. UAスタイルシートと リセットCSS 2. Tomoki Kubo 株式会社まぼろし
 マークアップエンジニア
 ブログ: KOJIKA17
 Adobe Creative Stationにて、Emmetの連載中 3. もくじ • UAスタイルシート
 - UAスタイルシートの基本
 - モダンブラウザのUAスタイルシート • リセットCSS
 - 全称... 続きを読む

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

2015/08/28 87 users コーディング 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入門 エディタ 爆速コーディング CSS HTML

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

Web制作時に備えておきたい便利なチートシートのまとめ -Bootstrap, WordPress, CSS3, Git, SublimeTextなど | コリス

2015/06/11 410 users Git SublimeText コリス デベロッパーツール

BootstrapやFoundationなど人気のフレームワーク、CSSの各フレームワークの比較、WordPressのテーマ作成やコピペで利用できるコード集、Gitのコマンドやフロー、iOS/Androidのグラフィックガイドライン、ChromeのデベロッパーツールやSublimeTextやEmmetなど、Web制作に役立つ便利なチートシートを紹介します。 紹介している主なチートシート Boots... 続きを読む

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

2015/02/25 170 users Drea Emmet入門 エディタ 爆速コーディング CSS

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

HTMLを効率よく書く！Emmetの書き方・使い方まとめ | Designup

2015/01/09 183 users Designup コーディングルール HTML 応用 自動補完

Emmetを使ってHTMLコーディングの効率を上げることができます。この記事では、Emmetのインストールからコーディングルールの基本、応用までを簡単に解説。明日からすぐに使えるテクニックを大公開！コードエディターにはHTML・CSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができるのですが、ここではさら... 続きを読む

Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ） | コリス

2014/07/24 526 users GitHub Git iOS コリス Bootstrap

iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チート... 続きを読む

Emmetの次期バージョンv1.1(Beta)の新機能がスゴい | REFLECTDESIGN

2014/02/13 57 users REFLECTDESIGN beta 爆速 CSS HTML

Emmetといえば、HTMLやCSSが爆速で書けるようになるWeb制作者なら誰もが知っているであろうアレですが、現在次期バージョンとしてv1.1の開発が進められています。そのことは、昨年の12月23日にEmmet公式ブログで発表されたものの、あまり話題になっていないようなのでここで簡単にご紹介します。 インストール方法 v1.1(Beta)は現状Sublime Textでのみ試すことができます。な... 続きを読む

爆捗！ WordPressテーマ作成ショートカット（1）：Dreamweaverで始めるWordPressサイト構築の基礎知識 (1/3) - ＠IT

2014/02/09 147 users Sass Zen-Coding Compass CMS メイン

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamwe... 続きを読む

【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。 ｜ Developers.IO

2013/08/06 81 users beta Emmet LiveStyle リアルタイム 一連

【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。 NEW: 2013年08月06日 以前、ブログでEmmetをご紹介いたしましたが、またまたEmmetが良さげなツールを開発中です。 現在はまだベータ版ですが公開されていたので一連の流れを試してみました。 アジェンダ Emmet LiveStyleとは？ 環境設定 動作確認 SCSS... 続きを読む

Emmet LiveStyleで爆速HTML/CSSコーディングの境地へ | REFLECTDESIGN

2013/08/06 269 users REFLECTDESIGN generation 境地 爆速

簡単な記述でHTML/CSSが爆速でコーディングできるという神プラグイン「Emmet」。フロントエンドな人ならほとんど方が使っているんじゃないかと思います。この度そのEmmetから「Emmet LiveStyle」なるものが出ました。 Emmet LiveStyle — live bi-directional CSS edit of new generation 簡単に言うと、エディタとブラウザ双... 続きを読む

Notepad++とEmmetでサクサクコーディング | 56docブログ

2013/05/20 54 users Notepad+ コーディング net ブログライティング

Notepad++とEmmetでサクサクコーディング 【Web技術】 wrote on 2013/05/20 http://blog.56doc.net/Entry/579/Notepad++とEmmetでサクサクコーディング 以前の記事で紹介したNotepad++、大変便利で私もブログライティングやコーディングのデフォルトエディタとしてありがたく使わせてもらってます。 最新のNotepad++で... 続きを読む

[SublimeText]Emmetを使いこなすためのショートカットキー | DevAchieve

2013/04/11 105 users SublimeText DevAchieve HTML編

2013/03/09 [SublimeText]Emmetを使いこなすためのショートカットキー Emmet には便利なショートカットキーがあるのでまとめておく。 Actions | Emmet Documentation Expand Abbreviation[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieveで 説明した事ができる。詳しく書... 続きを読む

【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 ｜ クラスメソッド開発ブログ

2013/01/31 194 users 下巻 sublime text クラスメソッド開発ブログ

ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil labo... 続きを読む

【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻 ｜ クラスメソッド開発ブログ

2013/01/23 141 users 上巻 sublime text インストール 上下巻

【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻 こんにちは、ちょっと年末前くらいから、「Emmet」というキーワードを聞くようになり、 日頃お世話になっている、sublme text 2でも使えるということで今回、上下巻に分けてご紹介したいと思います。 アジェンダ Emmetとは？ 誰が開発してるの？ Emmetプラグインのインストール！ ... 続きを読む

Sublime Text2『hayaku』+『Emmet』で変わるセカイ | toybox

2012/12/15 127 users せかい Sublime Text2

Web制作にあたり、デザイン業務とコーディング業務をやっている。もっとデザインに時間を割きたいけど…コーディング苦手だし、なかなか時間取れない…。こういった悩みを持っている方って結構多いと思うんですよね。デザインが絶対的な土台にあるわけですから、コーディングの時間を効率化させて、デザインにかける時間を増やしましょう。この記事は、Sublime Text 2 Advent Calendar 2012... 続きを読む

ちょっとよさげなSublime Text 2の設定 | A Memorandum

2012/11/17 128 users sublime text A Memorandum 設定

たまたま目にした海外の記事「Configuring Sublime Text 2」に、自分が指定してないSublime Text 2の設定がありまして。ちょっくらそれを拝借しつつ、自分が指定しているいくつかの設定とZen-Codingの次期バージョン「Emmet」を日本語環境で使う時にしておいた方が良い設定をまとめておいた。 「Cmd＋,」で出る「Settings – User」に書いとけば大丈夫... 続きを読む

CSSの記述を高速化する、Emmet (Zen-Coding)｜Web Design KOJIKA17

2012/10/18 288 users Zen-Coding 真価 プロパティ CSS HTML

Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの... 続きを読む

知らない人は遅れてる？新Zen-Coding Emmet

2012/10/11 529 users Zen-Coding HTMLコーダー HTML リズム 進化

頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話します... 続きを読む

Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17

2012/09/19 208 users Zen-Coding htm GitHub IDE エディタ

Zen-Codingの次期バージョン、Emmet について : Web Design KOJIKA17 Web Design KOJIKA17 Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTM... 続きを読む