goto_jp さんのアバター 363views

Gruntの使い方:タスクを実行させる

前回の続きです。コマンドプロンプトを package.json のあるプロジェクトフォルダへ移動しておいてください。 まずプロジェクトフォルダ内が下記の構成になるようCSS用フォルダとファイルを用意してください。 project ├css 2013年12月10日
goto_jp さんのアバター 413views

Gruntの使い方:プラグインのインストール

前回の続きです。コマンドプロンプトを package.json のあるプロジェクトフォルダへ移動しておいてください。 今回はGruntに機能を加えるプラグインを入れます。 npm install grunt-contrib --save-d 2013年12月9日
goto_jp さんのアバター 418views

Gruntの使い方:基本パッケージの準備

前回の続きです。 まず適当なプロジェクト用フォルダを作成してください。コマンドプロンプトで作成したプロジェクトフォルダへ移動します。Cドライブ直下に「project」というフォルダを作った場合は下記になります。 cd C:\project 2013年12月6日
goto_jp さんのアバター 627views

フロント開発を自動化するGruntをインストールする

GruntとはWebのフロント開発の様々な作業を自動化してくれるソフトで、一部を挙げると下記のようなことができます。 ・メタ言語のコンパイル(Sass、Lessなど)・HTML, JS, CSSなどを圧縮(minify)・CSSスプライトの 2013年12月5日
goto_jp さんのアバター 686views

WindowsでCompassをコンパイルした時の「Windows-31J」問題

WindowsでCompassを使ってSassをコンパイルした時、文字コードに「Windows-31J」という見慣れない文字コードが勝手に設定されます。 CompassはRubyで動いているわけですが、WindowsのRubyはデフォだと 2013年12月4日
goto_jp さんのアバター 272views

Emmetメモ:CSSのコーディング速度UP

HTMLと異なり複数行一度に出力はできませんが、CSSもプロパティ名を短縮形で書くことができます。 db dn poss posr posa posf m:a m10,5x w100 w100% fz13 fwb c#f00 それぞれ展開す 2013年12月3日
goto_jp さんのアバター 221views

Emmetメモ:HTML基本構造を出力する

「Doctype」から始まるHTMLの基本構造を一発で出力できます。 ! 「コード?」って感じかも知れませんが、これをHTML展開すると下記になります。 <!doctype html> <html lang="e 2013年12月2日
goto_jp さんのアバター 797views

Emmetメモ:面倒なselectタグを一気に作る

selectタグによるプルダウンは量が多いこともあり、普通にコーディングしていると結構な手間です。そんな時こそEmmetで楽しましょう。 select>option*115>{$@1900} select>option*1 2013年11月29日
goto_jp さんのアバター 316views

Emmetメモ:フォームパーツを一括量産

Emmet記法 form#form1>ul.radioList>li*5>label[for=r-$]>input[type=radio name=r id=r-$]+{内容$} HTML展開結果 <form 2013年11月28日
goto_jp さんのアバター 614views

Emmet(zen-coding)でコーディング高速化!

だいぶ前より自分自身zen-codingの話は耳に挟んでいましたが、つい先日ようやく触れ始めたので共有します。※以前はzen-codingというプロジェクト名でしたが、最近になってEmmetとプロジェクト名が変わったようなので、以後はEmm 2013年11月26日