作成:2014/12/22Web制作2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。何かアイデアを得たい時にも便利。CSS-Tricks2.CSSアニメーションサンプルCSS3のアニメーションライブラリ。クラスを付与するだけで様々なアニメーションを出力してくれます。背景切り抜きジェネレーター。三角形や六角形菱型などを選択し、パスを動かすとプロパティclip-pathのコードを生成してくれるツール。backgroundに画像URLを指定すると画像切り抜きが簡単に出来ます。Clippy4.SCSS/CSSに変換するツールオンライン上でSassのコードをCSSに変換出来ます。フレームワークとチートシートフレームワークに沿った記述をしていくだけで今風のデザインを構築出来るので便利。こちらはフレームワークを扱う時に見ておきたいチートシート。IDEA*IDEAで紹介されてたCSS3だけで表示出来るアイコン集。アイコンをクリックするとコードがポップアップされ、コピーするだけという手軽さ。CSSの勉強にもなります。コード整形UIが綺麗なオンラインコード整形ツールならこれ。liだけの要素を貼り付けて「Clean」を押すと、インデント整形・タグの補完などの他、bodyやheadなども挿入してくれます。CSSをダウンロードできるレスポンシブ用モックアップツール。Reflowについて書かれた記事。RWD用のデザインカンプにかける時間をこれらで短縮。各ブラウザごとのHTML5/CSS3対応状況を確認する時はこれ。ブラウザサポート状況確認表SVGのブラウザサポート状況を確認できる表はこちら。APIの一覧と検索が可能です。ローディングアニメ作成オンライン上で動くSVGアニメーション生成ツール。コピペできるので簡単。2と3を消しCircle1で形を整えたら、Actors横ボタンで図形を増やします。EditでSVGを出力します。トレンドのジオメトリックなパターンもあるので今後使いたいツールです。パターン背景作成メニューの+ボタンで図形のパターンを選択し背景画像として作成することができます。SVGアップロード可能。Pattern」:phpspot開発日誌14.ロングシャドウ生成ロングシャドウを作成するためのPhotoshopプラグインとオンラインジェネレータ。面倒なポリゴン画像をSVG出力してくれるツール。パターンを選択しノイズとサイズを指定可能です。@qrohlf16.アイコンフォントウェブアイコンをフォント化したモノクロベースのオシャレなアイコンフォント。Iconvauはフォント生成サービス。TypiconsCONDENSE-iconFontIconvau.lt17.OGP画像シミュレータFacebookのOGP画像シュミレータ。画像をアップロードすれば、様々なサイズのプレビューをその場で確認することができます。主要パッケージの他に入れておきたいもの。Useは知りませんでした。処理が遅くなるので入れすぎに注意。ショートカットキーをMacとWin版で分けて見ることができます。-テーマテーマを変更したいときに。Rubyなど各コードのカラーをプレビューできるテーマ集。チートシートEmmetの使い方や例の一覧、公式チートシート。忘れたらここを見ます。text、Dreamweaver、Notepad++など様々なエディターに対応したEmmetプラグイン一覧。Download23.VPS操作:コマンドVPSでファイルを扱う時に。VPSでWordPressを動かす時もターミナルからssh接続してコマンドを打ち込みます。以下結構使うコマンドです。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2016/01/4それなりに使える、Web制作者がお世話になる便利ツール毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。実際にどういった本が2015/03/23Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済むCSSテクニックなどをまとめました。今回はWeb制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテ2014/08/4メモしておきたい!サイト制作時に知っておくと「意外」と役に立つこと今回はサイト制作において毎回使うこと、意外と面倒で忘れがちなものをメモしておきます。事前に知っておくことで効率的にコーディング、納品できると思います。コメントデータの処理方法の詳細はこちらをご覧ください。