こういうの欲しかった、デザイン・コーディングが捗るツールまとめ
使用頻度は高くないけれど「こういうの欲しかった」と思えた、役立つWeb制作で使うツールやサービスをまとめました。
エンジニア速報は Twitter の@commteで配信しています。
アニメーション12の基本原則デモ
ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモ。イラストやキャラクターなどを動かすときにインスピレーションを得たいときに。モーション作成やアニメーションの参考にした12種パターンのgif動画を見ることができます。
[参考] ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
CSSで写真にフィルタ加工してコード出力
アップロードした写真にフィルタをかけたり、CSSの疑似要素を使いフィルタ加工するためのコードも出力してくれるというツール。サイトに掲載した写真にCSSでちょっと加工したい時なんかに便利だし勉強にもなります。コードまで出力してくれるサービスはあまり見かけなかったので。
gulpファイル出力
日本語で分かりやすいです。gulpファイルを簡単に出力してくれるオンラインツール。css/jsの結合・圧縮、プロパティ順など任意の箇所にチェックをつけてダウンロード可能。
クライアントの環境をチェック
先方にOS・画面解像度・ブラウザサイズ・IPアドレスなどを確認してもらいたいときに。
ソーシャルサービスを使用しているか確認したい場合は、こちらのサービスと併用して確認すればOK。
gzipチェック
サイト高速化で必須のgzip圧縮がされているか調査してくれるサービス。圧縮されてないページに高速化の提案などいいかもですね。
transformプロパティを作成
要素に変形効果を付与するtransformプロパティ（移動・回転・傾斜・縮尺）のコードと間隔を出力。面倒な部分なので便利。これも勉強になる系ですね。
メディアクエリ作成ツール
スマホ・タブレット・PCもしくはプラットフォーム等を選択するとメディアクエリを出力してくれます。最近URLが変わったようなのでメモしておきます。
Simple CSS Media Query Generator
ターミナル記録
ターミナル操作だけを動画で記録させて共有できるサービス。ブログなどに埋め込んだスクリプトのテキストはコピペ可能という面白い仕様。
スポンサード リンク
Comments
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
Leave a Comment