スマホサイトコーディングの覚え書き：ツール編

Can I use

HTML5やCSS3、SVGなどブラウザの対応を調べるサイト。
必要なプリフィックスもわかります。
PCサイトをHTML5で作るときにも使えます。
菊池崇さんのセミナーで知りました。
ちなみに菊池さんのレスポンシブの本はオススメ。

[amazonjs asin=”4048863231″ locale=”JP” title=”レスポンシブWebデザインマルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)”]

グラデを作るツール。
フォトショっぽいUIなので、フォトショに慣れていたら使いやすいです。

こちらは同じグラデでも、画像からグラデを作るツール。
複雑なグラデやグラデの詳細な情報が残っていないときには便利です！
ただし古いバージョンのwebkitのグラデには対応していないので補完する必要があります。

ロングシャドウを作るツール。
今回のブログデザインのときにもお世話になりました。

吹き出しとかに使うCSSの三角形のジェネレーター。

border-imageのジェネレーター。
ただし、このプロパティはレティナ対応はしていないようなので、こちらのコードを参考にしてください。