[B! webdesign][chrome] monopooのブックマーク

サイト作成に活用しているChrome拡張機能を10コまとめてみた | Hanpen DaDa

2015年1月21日水曜日サイト作成に活用しているChrome 拡張機能を10コまとめてみた Labels Chrome , ブログツール私はWindowsでもMacでもAndroidでもiPhoneでもGoogle Chromeをメインブラウザとして利用しています。 Chrome ブラウザ Chromeに自分のGoogleアカウントでログインしておけば、アカウントに紐付いた設定を場所やデバイスを選ばずに使えるのでいつでもどこでも普段使いの環境でブラウジングすることができます。そしてChromeの何がいいかといえば、やはり充実した拡張機能です。 Chromeの拡張機能だけで完結してしまう作業もたくさんあるので（特にWindowsでは）Chromeを活用するようになってからはあまりPC自体にアプリケーションをインストールすることがなくなってきました。そんなChrome大好きっ子

monopoo 2015/01/21

リンク

これ便利でいいね！WebページのUIエレメントのサイズやマージンが簡単に計れるChromeの機能拡張 -Dimensions

Win/Mac対応、Chromeで表示したWebページのUIエレメントのサイズやマージンが簡単に計れてしまう無料の機能拡張を紹介します。 Webページだけでなく、画像をChromeで表示すれば画像も計ることができます。

monopoo 2014/09/16

リンク

スマホ版のウェブデザインをクリック一発で確認できるChrome拡張機能「MobileLayouter」

使い方はいたってシンプル。スマホ版のウェブデザインを確認したいページにアクセスし、右上のツールバーで確認したいスマホの端末をクリックするだけ↓↓ このようにサクッとスマホ用のページを見ることができます。↓↓ あとがき @isloopをフォローするかなり便利な拡張機能ではあるのですが弱点もあります。まぁMobileLayouterが悪いわけじゃなくChrome自体の問題なのですが、ウィンドウの横幅が400px以上に小さくならないのですね。したがってパーフェクトにiPhonenでのデザインを確認できないのがたまにキズではあります。（画面幅は320pxに出来ます。）まぁ、iPhone 6からどえらく画面が広くなるみたいですけど・・・。あぁホントにデカクなるのかなぁ。Storyboardの分岐が増えてしまうがな・・・。ﾊﾅｼｿﾚﾀ【関連】AutoPatchWork - 分割してるページ

monopoo 2014/08/09

リンク

CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide

ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストアインストールが完了すると、上部のバーにPesticideボ

monopoo 2014/05/01

リンク

Webデザイナー、コーダーならDLしとこう！あると地味に便利なGoogleChrome機能拡張4つ

今日は業務でよく使う、Webデザイナー・コーダーさんならあると地味に便利なGoogle Chrome機能拡張をまとめてみました。私にとって、どのエクステンションも無いと「ちょっと困る」ものたちばかりです。 Image Properties Context Menu まずはImage Properties Context Menu。画像を右クリックすると、パスやサイズ、altテキスト、ファイルサイズ等を別ウインドウで表示してくれます。参考：[Google Chrome]右クリックで画像のプロパティを簡単に確認できるエクステンション「Image Properties Context Menu」 MeasureIt! 続いてはMeasureIt。ブラウザ上に「ものさし」を表示してくれるエクステンション。ささっと画像サイズを調べたり、カラムの幅を測ったりするのに使用しています。 Show Ti

monopoo 2014/03/03

リンク

Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ

1 pixel｜サイバーエージェント公式クリエイターズブログサイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。フロントエンドエンジニアの谷です。本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ

monopoo 2013/10/09

リンク

WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌

Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。４月からはたいている新入社員のWEBデベロッパーさんにもオススメインストールすると以下のようなボタンが表示されますのでクリック。まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできますサイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能そ

monopoo 2012/04/16

リンク

ChromeをiPhoneシミュレーターにできる拡張「IPSim」:phpspot開発日誌

iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。インストールすると次のようにボタンが追加されますクリックするとシュミレーターが現れます。縦・横方向での表示が可能。以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHP フロントエンドのコンソールロギング用Chrome拡張「C