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

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

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

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制作時によく使うサイズとかスニペットとかショートカットとか、チート... 続きを読む

爆捗！ 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で爆速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 簡単に言うと、エディタとブラウザ双... 続きを読む

[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... 続きを読む