BEST252014-09-30TweetPocketブラウザ上でWeb制作作業を行うことも多くなってきましたが、拡張機能は揃ってますか?DevToolsしか使っていないという方にはこの記事はまさにおすすめ。Developer定番のWeb開発ツール。javascriptのオンオフや画像の非表示など多くのことができます。ChecklistWeb開発にやるべきことのチェックリストを作れる拡張機能。タスク一覧が表示されるシンプルなチェックリストです。Rulerコンテンツのサイズをドラッグ&ドロップで測定できるChrome拡張機能。Webサイトのサムネイルの大きさや、コンテンツの間隔などを測定するときに使ってます。PerfectPixelこちらはPhotoshopなどでデザインした画像を上から被せて、ブラウザ上のボタンサイズなどを最適化するためのアドオン。デザイン通りの見た目にしたいときに便利。Validity現在開いているページをバリデーションできる拡張機能。JSONViewJSONデータを見るためのツール。FireFoxでも同じアドオンが提供されています。SourceKitブラウザ上で使えるHTMLエディター。TextMate風のデザインで、Dropboxにファイルを保存できるようになっています。ColorZillaページ上のカラーを取得できる拡張機能。参考サイトなどで、どんな色を使ってるのか調べたいときなどに使えます。WhatFontWebページで使用されているフォント情報を取得できる拡張機能。PreviewerこちらはGoogleFontのプレビューを見ることができるChrome拡張機能。Chrome画像のカラーパレットを自動的に作成してくれる拡張機能。Switcherこちらはユーザーエージェントを変更してくれる拡張機能。項目の中から選べます。モバイルアプリなどの開発なんかで使えそうです。SEOquakeWebページのSEO解析ができるGoogleChrome拡張機能。Indexなど様々な項目について解析できます。現在のページにSEO関連の情報を表示してくれます。Web解析をする際は入れておきたいツールですね。EditorCSSシェイプを簡単に作れる拡張機能。スクリーンショットでは画像にテキストを回り込ませていますが、このような複雑なシェイプを簡単につくれるようです。Screenshotこちらはスクリーンショットを撮るときになくてはならない拡張機能。ページの一部や全部のスクリーンショットを撮影できます。Captureこちらもスクリーンショットを撮影できる拡張機能。Downloaderこの拡張機能は先ほどのスクリーンショットとは違い、ページ上にある画像をダウンロードできるツール。ドラッグ&ドロップでも画像を引っ張ってくることはできますが、こちらは複数の画像を一度にダウンロードできるので便利。TabChrome内でIEの表示ができる拡張機能。FireFoxにあるもののChrome版です。YSlowページテストを行うためのツール。Insightsこちらもページのパフォーマンステストを行うツール。ページの読み込み速度はWeb制作でも重要です。Resizerブラウザのウィンドウサイズを特定の大きさ(iPhoneサイズなど)に変更してくれるツール。レスポンシブレイアウトのテストにも使えます。しているページを手持ちのiPhoneと同期してくれるすごいやつです。Cacheさくっとキャッシュのクリアをしたいときに便利な拡張機能。AutosaveChromeでよく使うDevToolsですが、CSSやjavascriptを編集してもファイルに保存することができませんでした。この拡張機能を使うと、ブラウザで編集したものをファイルに保存できます。SugimoriフリーランスのWebエンジニア。現在はテンプレート職人としてTetraThemesでテンプレートを開発中。ブログや個人に関するお問い合わせはTwitterかFacebookへ。2017-06-26Webに必須の高品質な写真素材を無料でダウンロードできるサイトを10本集めてみました。Web制作に限らずWebライティングでも必ず必要なのが写真素材。2017-06-21カラーミーショップはスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。2017-06-21カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので完全オリジナルデザインのショップを自由に構築することができます。2017-06-19カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので頑張ればオリジナルデザインのショップを構築することも可能です。2017-06-16カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。USTetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。