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

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

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

Gruntに置き換わるか？新生ビルドシステム「gulp」v3.5.2入門 | REFLECTDESIGN

2014/02/07 241 users Gulp Grunt ビルドシステム JSON形式 側面

みなさんご存知「Grunt」は、WEB制作者の間でも以前に比べるとだいぶ浸透してきているようで、実際に案件で使用しているという方も増えてきています。そんな中、ここ最近海外のエンジニアの中でGruntに変わって使われだしている新たなビルドシステム「gulp」をご紹介します。 Grunt vs gulp Gruntは、設定ファイルGruntfileがJSON形式で書けるという側面から一見わかりやすく見... 続きを読む

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

2013/08/06 269 users generation Emmet 境地 CSSコーディング

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

Sublime Text 2でStylus + Nibのコードをビルドする | REFLECTDESIGN

2013/05/24 11 users Stylus Nib Sass npm Compass

SassにはCompassというアツいライブラリがありますが、Stylusにも「nib」というライブラリがあります。このNibを使ったコードをSublime Textからビルドする方法です。 (1) Stylus + Nibのインストール 以下のコマンドでインストールします。要Node.js(npm)。 グローバルインストールしてますが、-g無しのローカルインストールでもどっちでもお好みな方で。 ... 続きを読む

静的サイトジェネレータ「roots」を触ってみた | REFLECTDESIGN

2013/02/28 73 users Roots ジェネレータ 静的サイトジェネレータ 特長 スキル

個人的にこういうのを仕事で使う機会はまずないんですけど、小規模な静的サイトをさくっと作る場合に、こういうのが扱えるスキルがあると制作者的には色々とモテるんじゃないかと思います。まあジェネレータにも種類はあるわけですが、今回は「roots」を取り上げます。 roots公式サイトは以下から。 roots | where it all begins rootsとは？ rootsの特長を簡単に。公式サイト... 続きを読む

Sublime Text 2をShift_JISに対応させるプラグインがあると聞いて | REFLECTDESIGN

2012/10/05 159 users emacs vim Dreamweaver エディター 最初

今エンジニア界隈で話題になっているエディター「Sublime Text 2」。プラグインの豊富さは、まだまだVimやEmacsなどには劣りますが、それらエディターのように細かい設定やプラグインをインストールしなくても、ある程度の環境が最初から揃っているなど導入コストが低い点が優れていると言われています。 しかし！ DreamweaverなどのGUIエディターから乗り換える人が多いようですが、それで... 続きを読む

GitHubのHTML/CSS Styleguideを適当に和訳してみた | REFLECTDESIGN

2012/09/11 64 users GitHub 原文 和訳 CSS HTML

今年の5月に書いた記事『「Google HTML/CSS Style Guide」を適当に和訳してみた』がかなり反響があったわけですが、和訳シリーズ第2弾として、GitHubが公開しているHTMLとCSSのスタイルガイドを簡単に和訳してみたいと思います。 原文はこちら。 HTML · Styleguide CSS · Styleguide HTMLスタイルガイド ドキュメントタイプ ブラウザが標準... 続きを読む

「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

2012/05/09 1524 users 原文 書式 CSS 文書 HTML

4/24に公開された「Google HTML/CSS Style Guide」が面白そうだったので適当に訳してみました。長いので各項の細かい説明は省いてます。より詳細に知りたい方は、原文を読んでみてください。 Google HTML/CSS Style Guide この文書の背景 この文書は、HTMLやCSSの書式とスタイルのルールを定義するものです。コードの品質が維持される場合に限り、難読化、最... 続きを読む

こんな時だからこそロールオーバー効果について今一度考えてみる | REFLECTDESIGN

2011/03/22 11 users ポインタ 考案 ロールオーバー 部品 手法

今では様々な手法の考案とともに、当たり前のように使うようになってきた画像のロールオーバー。今回はこのロールオーバーについて、どのような考えのもとにあるものなのか、どのような手法が最適なのかを今一度考えてみます。※ここでいう「ロールオーバー効果」（以下、ロールオーバー）とは、リンクなどが設定されクリックできるようになっている部品（画像など）にポインタを乗せたときに、表示が切り替わる事を言います。ロー... 続きを読む

意外とみんな知らないclearfixの始まりについて調べてみた | REFLECTDESIGN

2011/03/09 17 users

floatを解除するためのCSSのテクニック通称「clearfix」。これまでも記法や考え方などについて数々の議論がおこなわれてきましたし、それらのclearfixに関するエントリーはググればたくさん出てきます。なぜ今clearfixなのかというと、つい先日Web系の知り合い数人と「clearfix飲み会」というのをやったのですが、その中で「clearfixってだれが考えたんだっけ？」という話題が... 続きを読む