コーディング環境 (2014.08) | soohei.net
コーディング環境 (2014.08) 日々進化している最近のコーディング (フロントエンド開発) 環境について、 ここ1年くらいのノウハウを詰めて、 極端には新しいもの好きではない視点で整理します。 目次: 1. psdからのスライス 2. Compass 3. スプライトイメージの自動化 4. CoffeeScript 5. Gruntによる自動化 6. ローカルサーバー 7. その他 1. psdからのスライス Slicyというアプリを使い始めてからは、ずっとこれです。 Photoshopのレイヤーやグループ名に画像のファイル名(+拡張子)を付けることで、 ワンクリックで画像を書き出せます。 ファイル名に@2xと付けることで、Retina用画像(@2x)と、 等倍画像を同時に書き出すこともできます。 その他に@boundsというレイヤーをつくって矩形領域を指定したり、 @slicesと
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
LINEスタンプが売れなさすぎて泣けてくるから反省点と売れるポイントをまとめておく
もうちょっと売れると思ってたんですよね。 ウンコをソフトクリームに替えてまで審査に通したのに全然売れなかった。。。 悔しすぎる。。。 売れなかったスタンプの売上報告を見ても価値ないかもしれませんが、反省を踏まえた売れるポイントをまとめました。 「売れなかった奴の売れるポイントなんて信用ならねーよ！」 と思うかもしれませんが、なるべく客観的に分析してみました。 今後、新たにスタンプを作る方は、この屍を踏みつけて進んでもらいたいもんです。（泣） 目次 発売初月のスタンプ売上報告 カワイイだけじゃスタンプとして生きていけないの！ 顔がないと表現力が弱い！ 余白を取りすぎると目立たない！ ブログにアクセスがあるだけじゃダメ！ 海外向けスタンプにするかどうかは迷い所 スタンプ販売開始後の再編集はできない！ 販売中のスタンプは販売停止しなくても言語を追加できる！ あとがき 発売初月のスタンプ売上報告
モリサワ、任意のWebページ上でフォント変更を体験できる無料サービス開始
モリサワは、クラウドフォントサービス「TypeSquare」において、任意のWebページの書体変更を体験できる無料サービス「TypeSquare Web Font Tryout(タイプスクエア ウエブフォント トライアウト)」を公開した。 「TypeSquare Web Font Tryout」は、任意のURLを入力すると、読み込んだWebページ上のテキストを、指定した書体で表示できるというもの。TypeSquareから配信されるすべての書体が選択可能。「見出しフォント」と「本文フォント」を分けて指定することができ、実際にTypeSquareを導入した場合に得られる効果を体感できる。 また、書体の選択以外にも、文字サイズや行間の変更も可能。加えて、TypeSquareにログインした状態で利用すると、ページ内の一部のみの変更や、実際のWebサイトに適用可能なCSSの書き出しが可能となっている
I/O 2014 アプリに学ぶマテリアルデザイン
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
