指定したWebページから、使用されているカラーを抽出し、カラーパレットを生成するChromeの機能拡張を紹介します。 Photoshop, Illustrator, Sketch用のスウォッチも作成できるので、かなり便利です。
![指定したWebページから、PhotoshopやSketchのカラーパレットを生成できるChromeの機能拡張 -Site Palette](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a0ccce5afdc83299026f964d3866ac539c034c4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018040901-03.png)
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拡張
mobile browser emulatorとは mobile browser emulatorは、簡単なクリック操作で、「複数サイズのモバイル端末画面」と「パソコン画面」を同時に開いて動作確認できるモバイルエミュレーター拡張です。 例えば、スマホ画面を動作確認するのであれば、ダブルクリック一発で以下のような状態を作ることができます。 動作確認可能なスマホサイズ スマホであれば、以下のような画面サイズの動作確認画面を手軽に呼び出すことができます。 320×480(スタンダードなモバイル解像度) 320×533(多くのSamsung、HTC、LG) 320×568(iPhone5) 360×640(Galaxy:S3,S4,S5、Nexus、Xperia:P,S,Z) 375×667(iPhone6) 動作確認可能なタブレットサイズ タブレットは、今のところ以下の2種類です。 768×10
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く