Web制作者にとって、Chrome デベロッパーツールは欠かせません。Web制作にすぐに役立つ、便利な機能・使い方を紹介します。 Cool Chrome DevTools tips and tricks you wish you knew already 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 要素をElementsパネル内でドラッグ&ドロップ 02. コンソールで現在の要素を参照 03. コンソールで最後に実行された値を参照 04. セレクタを加えて、要素のスタイルを追加 05. 変更したCSSをファイルに保存 06. 指定した要素のみをスクリーンショット 07. CSSセレクタを使用している要素を検索 08. コンソールで複数の行にまたがるコマンドを記述 09. Sourcesパネルの便利な機能 10. Wa

2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張

それぞれのボタンをクリックすると別タブが開き、編集画面になります。 フロッピーディスクのアイコンをクリックすると、PNGまたはJPGで画像が保存されます。ちなみにフロッピーディスクって現在使われているんでしょうか^^;。 （画像の保存形式は「ツールバーのアイコンを右クリック→オプション」から変更できます） その右のボタンではそれぞれ、「PDFで保存」「クリップボードにコピー」「サムネイル画像として保存」「印刷」が可能です。 「PDFで保存」「クリップボードにコピー」は地味に使えるので便利ですね。 下のボタンからは、Gmail・Dropbox・Evernoteなどに共有ができます。 また、キャプチャして保存する前に、左上のツールで直接画像を編集することができます。 気になったサイトを画像保存してアーカイブとして残しておきたいという時に重宝しますね。 DLリンク：Openscreenshot

こんにちは！ ディレクターのともぞうです！ あっというまに夏が終わり、気づけば今年も残り少なくなってきて焦ります……。 今回は、業務効率化でかかせない Google Chrome の拡張機能をご紹介します！ 気が早いですが、年末の忙しい時期に向けて効率化を図りましょう！ 業務効率編 開いているページを一気に共有！ – Copy All Urls https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk 開いているタブのURLをクリップボードにコピーしてくれます。複数の URL を共有したいときに便利です。 デザイン確認後に修正してほしい URL のみをコピーしたりするときに利用します。 1クリックでページ全体のスクショができる – Full Page Screen Cap

GoogleChrome（以下、Chrome）をメインブラウザとして使用しているWeb制作者の方は多いのではないでしょうか。 Chromeは標準のままでもじゅうぶんに快適なのですが、拡張機能（アドオン or エクステンションともいいます。）と呼ばれる機能があり、自分の好きなようにブラウザをカスタマイズすることができます。 この拡張機能によって、毎日のブラウジングがより快適になるだけでなく、Web制作を行うにあたっても非常に便利な機能を追加することができるのです。 しかし、非常に多くの種類があり、どれを選んでいいかわからない、という方もいるのではないでしょうか。 今回は、数あるChrome拡張機能の中から、特にWeb制作に携わっている人へ「最低限これだけは入れておきたい！」というものを厳選してご紹介します。 拡張機能をインストールする際の注意点 拡張機能は便利であるため、ついついインストール

Web担当者ならWebページのスクリーンショットを撮りたいケースはよく遭遇します。 そんなときにオススメしたいのが、今回ご紹介するFireShotです。 FireShotは、無料でありながらスクリーンショットを撮る範囲を「ページ全体」「目に見える部分」「選択した部分」から選べ、保存形式もjpgだけでなくpdfで保存することも可能です。 今回はFireShotの使い方をご紹介します。 FireShotとは https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja FireShotとは、Webページのスクリーンショットをキャプチャするためのブラウザの拡張機能です。 WindowsやMacにも、スクリーンショットのためのショートカットキーが標準

こんな便利な機能拡張があったんですね！ レスポンシブ対応ページを作成する時に大切なのは、さまざまな表示サイズでレイアウトや要素がどのように変化するかです。 レイアウトやコンポーネントの構造を視覚化し、px, emでサイズを表示し、その変化を確認できるChromeの機能拡張「Responder」を紹介します。 ResponderはWebページの表示サイズを変更すると、ページ上の要素をブロックレベルでアウトラインで表示し、どのように変化するかが確認できます。 Responderが表示されるのはブラウザのサイズを変更している間だけで、変化しない場合は表示されません。 サイズはpx単位とem単位に対応しており、幅と高さが表示されます。 インストールは、下記ページから。

Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ

Chromeのバージョン59でAPNG (Animated PNG)が対応されたみたいなので、早速作ってみたいと思います。 目次 APNG (Animated PNG)とは？ APNGのデモ APNGのブラウザ対応状況 APNGの作り方 Adobe Animate CCでアニメーションを作成 PNGシーケンスに書き出し 「アニメ画像に変換する君」のダウンロード APNGへの書き出し設定 JSライブラリ「apng-canvas」で非対応ブラウザでも再生 APNG (Animated PNG)とは？ アニメーションをするPNGファイルで、The Animated Portable Network Graphicsの略です。アニメーションGIFのPNG版といったところですが、アニメーションGIFが256色しか扱えなのに対して、APNGは24bitのフルカラーでアルファチャンネルを扱えます。 また

Google Chromeユーザのデザイナーのために、本記事ではデザイナーにとって便利なクローム内プラグイン、その中でも選りすぐりのものを紹介します。 本当に便利なので、ぜひ一度試してみてくださいね。 Window Resizer 別のブラウザレゾルーションでレイアウトを試すのに便利です。レゾルーションリストは自由にカスタムできます。 Chrome Daltonize ダルトナイゼーションは色盲の方にもディテールを見やすくするためのテクニックです。コンピュータユーザの20人に1人は色盲だと言われています。 CSS－Shack レイヤースタイルをひとつのCSSファイルにエクスポートできるウェブ・デスクトップアプリです。 Fontface Ninja このプラグインをブラウザにインストールすると、何がどのフォントか知るだけでなく、様々なフォントを試したり購入したりできます。 Page Rule

5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show

Chromeデベロッパーツール、使いこなしていますか？ モバイルブラウザーエミュレーターの機能が拡張され、通信帯域やセンサーのシミュレーション、PWAの検証など、どんどん進化しています。これは便利です！ Webサイトのテストはますます複雑になっています。ほんの数種類のブラウザーで機能の互換性を確認していた時代は遠い昔の話。ピカピカの傑作サイトも、OS、画面解像度、マシン性能が異なる幅広いデバイス（モバイル、タブレット、デスクトップ）での動作確認が求められます。極端な話、開発そのものと同じくらい時間がかかってしまうことさえあります。 Webサイトのテストはタッチスクリーンと高解像度画面の登場でさらに複雑になりました。通常のPCにマウスとキーボードをつないで開発していたら、せっかくのWebサイトがどう動くか確認するのは困難です。たとえば、マウスポインタを乗せたときの動作などは必ずしも機能せず、

こんにちは。GoogleChrome（グーグル・クローム）をこよなく愛する男、鮫島です。 仕事でもプライベートでもChromeを使いまくっているのですが、今回は超絶便利なChromeの拡張機能（エクステンション）をいくつかご紹介します。 これを全て使いこなせれば、業務の効率は確実に上がるので、特にWeb制作のディレクターの方にオススメですよ！ もちろんディレクター以外の人も使える拡張機能はたくさんあるので参考になれば！ そもそもGoogleChromeの拡張機能（エクステンション）ってなんなの？ 一言で言うと、Chromeに機能を追加するためのもの。Chromeにはいろいろな拡張機能が用意されていて、インストールすると、ページ全体のキャプチャを撮ったり、不必要な広告をブロックしたりする機能を追加できます。GoogleChromeのデフォルトの機能で物足りない方にオススメです。人によっては、

柔軟性が高くさまざまな拡張機能を利用できることなどからユーザー数が10億人を突破しているChrome。 参考： モバイル版Chromeユーザーが10億人突破 | TechCrunch Japan 日々多くの拡張機能が追加されているため、便利なものを見つけるにも時間と手間がかかってしまいます。 今回は、多くの拡張機能の中から作業効率を格段にあげるために知っておきたい、Chrome拡張機能10選をご紹介します。 無料で使用できるものがほとんどですので、特にWebディレクターやライターの方はぜひインストールしてみることをオススメします。 作業効率を上げてくれるChrome拡張機能10選 1.Hash Tab https://chrome.google.com/webstore/detail/hash-tab/ofmfddncbnnjlkppkifncbfkdengokih 使用料金：無料 Chr

Mozli Web中のデザインに関する新着記事やコンテンツを表示してくれるニュースfeedです。海外記事なのでほぼ英語記事ですが、英語が苦手な方でも画像やイラスト、Webコンテンツは楽しめますので、海外のWebデザイン動向をチェックするのに役立ちます。 http://muz.li/join/ Responsive Web Design Tester レスポンシブデザインの簡易な表示チェックができる拡張機能です。表示が確認できるデバイスも豊富なのでサクっとチェックできますね！ http://responsivewebdesigntester.com/ Window Resizer いろいろなディスプレイのウィンドウサイズをエミューレートして表示してくれる機能です。 https://chrome.google.com/webstore/detail/window-resizer/kkelica