SNSのベクター形式ロゴをダウンロード

必要になって調べたので、メモ。

各ソーシャル・ネットワーキング・サービスの、ベクター形式の公式ロゴデータをダウンロードできるページのURLです。

Facebook:
https://www.facebookbrand.com/

Google+
http://www.google.com/+/business/resources.html

Twitter（eps）
https://twitter.com/logo

LinkedIn（eps）
http://jp.press.linkedin.com/Media-Resources?SubjectID=644

これを元にアイコンとか作ってみようかなー。

ドラッグ＆ドロップでWebアプリを作る「Divshot」

ちょっと触ってみただけですが、
サクサク動くし、おもしろいです。
デザインもきれい。

Divshot
http://divshot.com/

ブラウザベースのHTMLエディタとしても
使えそうなところがいいですね。

いまのところベータテスト中で無料です。

レスポンシブのフレームワーク「Foundation」

モバイルファーストでレスポンシブなフレームワーク、
Foundation
http://foundation.zurb.com/
を試してみようかな、と思ってメモ。

マークアップも良さそうな感じなんですが、
jQueryではなくて、
Zepto.js
http://zeptojs.com/
を使っているのが気になったポイント。

先日、某大規模サイトの制作チームに
スマホサイトについてヒアリングさせてもらうという
貴重な機会があったので、
おまけでついて行ったのですが…
サイトの軽量化のため
「jQuery Mobileでも重すぎるので、
それをさらに軽量化したものを作って使ってる」
とのこと。

でもうちの職場は少人数低予算なベンチャーなので、
そんなの開発できないよなぁ…と言っていたのです。

Foundation＋Zepto.js で
軽量なサイトをデザインできたらいいなぁ♪

ちなみに、モダンブラウザのみ対応です。

WordPressに関するスライド

WordPressのお仕事をすることになりそうだけど、
最近さわってないのです…

すごく勉強になりそうなスライドを、
自分が後で読むために貼っておきます！

WordPressを使ったWeb制作効率化のためのTips&Tools from kenji goto

ブログの枠を超える？ためのWordPressカスタマイズ入門 from muracchi

CSS3ジェネレータ＆ブラウザ対応状況

やっぱりこの頃スマホの案件が多いですね。
…と言うより、対応するのが当然になってきてるんですね。

なので、HTML5＋CSS3を使う機会が断然増えました。

ブラウザ上で動くCSS3ジェネレータは色々ありますが、
私はこちらが使いやすくてお気に入り。
CSS3 Generator

対応しているプロパティ：

• Border Radius
• Box Shadow
• Text Shadow
• RGBA
• @Font Face
• Multiple Columns
• Box Resize
• Box Sizing
• Outline
• Transitions
• Transform
• Selectors

※GradientはUltimate CSS Gradient Generatorにリンクされてます


あと便利だったのが、
When can I use...
というサイト。

HTML5, CSS3などに
現在、どのブラウザが対応しているかを
一覧で見ることができます。

対象ブラウザに
iOS Safari、Opera Mini、Android Browserが
含まれているところが貴重です。

Graceful DegradationとPolyfill

新しい言葉を覚えたのでメモ。

• Progressive Enhancement
  プログレッシブ エンハンスメント
  →旧ブラウザメインだけど、モダンブラウザで見るとちょっといい感じになってる。
• Graceful Degradation
  グレイスフル デグラデーション
  →モダンブラウザがメイン。旧ブラウザでも見られないことはない。
• Polyfill
  ポリフィル
  →モダンブラウザがメインだけど、JSライブラリなどを使って旧ブラウザでも同じように見せる。

こんな感じで合ってるかな？

お仕事で商用サイト（しかもEC）作ってると
HTML5やCSS3の使い方は悩みますもんね…

IE8以下もまだ当分捨てられないけど、
リニューアルとかのタイミングで
対応しとかないと後で困りそう。

Polyfillは活用する価値ありそうだけど、
重くなりそうなところが
大規模サイトだと厳しいかなぁ。


参照：
HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill

Firefoxのアドオン「User Agent Switcher」

最近スマートフォン対応のお仕事が増えてきたので、
こちらのアドオンを入れました。
便利！
User Agent Switcher

ユーザエージェントを偽装して、
Firefoxでスマホ用のページを見ることができます。

機種ごとのユーザエージェントは検索するといっぱい出てきますので、
それをコピーしてきて自分で追加することもできます。

FireMobileSimulatorでもいいんですが、
たまに表示が崩れることがあったり、
横幅が固定されちゃうのが不便な時があって、
User Agent Switcherの方が気に入ってます。