goto_jp さんのアバター 657views

Sassメモ:関数でカラースキームを自動生成する。

Sassには標準で便利な関数が用意されています。標準関数は膨大にありますが、一例として色に関する関数を使ってカラースキームを作る記法を紹介します。 下記はSass記法例。 $mainColor: #339999; $lightColor: 2013年12月26日
goto_jp さんのアバター 519views

Sassメモ:@extend でCSSクラスを統一しよう

あるCSSクラスをベースに、右詰めや左詰めなどバリエーション違いのクラスを作りたいというケースに @extend は使えます。 下記はSass記法例。 .box { width: 300px; height: 200px; } .right 2013年12月25日
goto_jp さんのアバター 333views

Sassメモ:@mixin と @include でCSSプロパティを楽に統一しよう

似たようなスタイルのパターン違いを作る時など、同じプロパティを書くのは手間なので @mixin と @include で楽しましょう。下記はSass記法例。 @mixin boxSize() { width:200px; height:10 2013年12月24日
goto_jp さんのアバター 201views

Sassメモ:変数を使って値を統一しよう

変数を設定しておくことで、CSSの値の統一性を取れます。下記はSass記法例。 $gray: #999; $red: #f00; $blue: #00f; .red { color: $red; } .error { color: $red 2013年12月20日
goto_jp さんのアバター 766views

Gruntの使い方:CompassでCSSスプライトを自動生成する

実はGruntは関係なくてCompass単体の機能なのですが、前々回GruntでCompassを自動処理できるようにしたので、scssファイルに記述を追加するだけでCSSスプライトを自動生成できます。 下記のフォルダ構成を前提とします。 p 2013年12月19日
goto_jp さんのアバター 794views

Gruntの使い方:プラグインを削除する

不要だと思ったプラグインは下記コマンドで削除。 npm remove {プラグイン名} --save-dev 例) npm remove grunt-contrib-less --save-dev 「–save-dev」のオプシ 2013年12月18日
goto_jp さんのアバター 794views

Gruntの使い方:Compassをコンパイルする

前回Sassのコンパイルを行いましたが、Compassのコンパイルはまた別のタスクになります。 下記のフォルダ構成を前提とします。 project ├css ├sass ├config.rb (compass用設定ファイル) ├packag 2013年12月18日
goto_jp さんのアバター 1,335views

Gruntの使い方:Sassをコンパイルする

下記のフォルダ構成を前提とします。 project ├css ├sass ├package.json └Gruntfile.js Gruntプラグインは grunt-contrib をインストールしてあることを前提とします。https:// 2013年12月16日
goto_jp さんのアバター 260views

Gruntの使い方:プラグインを一括で読み込む

前回の続きです。プロジェクトフォルダは前回同様となります。 プラグインを多数インストールしている場合、一つ一つGruntfile.jsに設定しなければならないのは手間です。 Gruntfile.js を下記のように修正してください。 mod 2013年12月13日
goto_jp さんのアバター 454views

Gruntの使い方:タスクをまとめて実行

前回の続きです。コマンドプロンプトを package.json のあるプロジェクトフォルダへ移動しておいてください。 module.exports = function(grunt) { grunt.initConfig({ cssmin: 2013年12月12日
goto_jp さんのアバター 391views

Gruntの使い方:ファイルを監視しタスクを自動実行する

前回の続きです。コマンドプロンプトを package.json のあるプロジェクトフォルダへ移動しておいてください。 Gruntfile.js を開いて grunt.initConfig に「grunt-contrib-watch」のプラグ 2013年12月11日
goto_jp さんのアバター 363views

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

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

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 さんのアバター 691views

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

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

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 さんのアバター 898views

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

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

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 さんのアバター 616views

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

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