CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC

2016年5月31日 10時9分 リンクをコピーする by ライブドアニュース編集部 ざっくり言うと が格段にになる「裏ワザ」を紹介している 間違えて閉じてしまったタブは「Ctrl＋Shift＋Tキー」を押すと復活する 「Ctrl＋F5キー」を押せば、キャッシュを無視して再読込してくれるなど パソコンを起動したら、ブラウザを開くのは当たり前とも言えるこの時代。毎日使っているものだから、ブラウザの操作は完璧、と思っているかもしれない。 でも、ちょっとした操作で、それをさらにすばやく、簡単にできたらどうだろう。 そんなのな小技を紹介する。 ●タブを閉じる 開いているタブを閉じるには、タブの右側にある×印をクリック。これが定番だろう。 しかし、実はわざわざこの×印にマウスポインターを合わせるという作業は面倒くさい。そんな時には、マウスのホイールボタンを利用しよう。 タブ上でホイールボタンをクリッ

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ

普通に画像の寸法を測ったり、Divサイズを図ったり、フォントサイズを図ったりなんていうツールは大量にありますが、ブラウザで見えてるもの全てを測るなんてものは今までに無いでしょうね。 いや、ないですよね？え？ある？ とりあえずご紹介。 見えているものを測るとはどういうことか 例えばこちらのページ。 https://www.pakutaso.com/20151103315post-6250.html 以下のように、要素を測るなんて言うのは当然の機能として・・・。 この辺りから本気だしはじめます。 よく見るとテキストの『日』までの間を測っています。 おでこの範囲を測ることもできます。 二人の距離を測ることもできます。 ちょっとLaLaさんに近づきすぎですね。81ピクセルの距離。 ちなみに、どこからどこまでの距離を測るとか言うツールではなくて、マウスをそこに持って行ったら、勝手に距離を測ってくれる

先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム

2024 著作権. 不許複製 プライバシーポリシー

いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能 以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。 以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I） スマホ（device mode）アイコンをクリック drawerアイコンをクリックする （Emu

黒背景でハイライト表示！デベロッパーツール用のテーマが拡張機能として利用可能！うぉぉ！こんな拡張機能があったなんて、もっと早く知りたかった！と思う人が続出しそう（？）ですが、Google Chromeのデベロッパーツールを物凄く見やすい配色に変更するテーマファイルのChrome拡張機能を試してみました！ 今回試してみた拡張機能は「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」という拡張機能。同様のデベロッパーツールのテーマを変更する拡張機能は他にもありますが、配色の違いなので好みで選択するのが良さそうです。 下記の画像が通常のデベロッパーツールを開いた画面。コードはハイライトされていますが、白背景だと見づらいです。 そこで「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」を利用すると以下の

What I Know ～ワッタイナ ほぼ鳥取県出身、東京在住のエンジニアがお送りする日々の出来事や役に立つ情報(=What I know)を紹介するブログ。わったいな（鳥取県の方言ですごいという意味）といってもらえるような記事を更新予定。※本ページはプロモーションが含まれています 2017/02/07 追記 Chrome 56 において、フォントがMS Pゴシックからメイリオに変更されて困っている方は、こちらの記事をご覧ください。 Chrome 56 でデフォルトのフォントがMS Pゴシックからメイリオに変更 2015/12/02 追記 Chrome 47 において、フォントがメイリオから MS Pゴシックに変更されて困っている方は、こちらの記事をご覧ください。 Chrome 47でフォントがメイリオからMS Pゴシックに変更＆元に戻す方法 2015/04/29 追記 Opera 29

Readable テーマファイルの適用方法 テーマファイルを適用するには、Chromeの試験運用機能を使用します。 ※試験運用機能はサポート対象外のため、ご利用の際には十分ご注意ください。 テーマファイルをダウンロードします。 Chromeのアドレスバーに「chrome://flags/#enable-devtools-experiments」と入力し、試験運用機能にある「デベロッパー ツールのテストを有効にする」を有効化します。 Chromeを再起動。 デベロッパーツールを起動し、設定の「Experiments」タブを選択し、「Allow custom UI themes」をチェック。 これでデベロッパー ツールにテーマファイルが適用されます。 「Experiments」タブの「Allow custom UI themes」をチェック ※テーマ適用済みなので既に背景がブラックです。通常は

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

また、以前に書いた「Any.do」の記事はこちらです。併せてどうぞ！ おすすめタスク管理ツール「Any.do」を紹介！リマインド機能やスマホとの連携が便利 | Design Color 以前に書いた「Any.do」の記事 ブラウザの開きすぎにご用心！「The Marvellous Suspender」 追記 以前は「The Great Suspender」を紹介していましたが、マルウェアが含まれているとして、Chrome ウェブストアから拡張機能が削除されてしまったため、代替の拡張機能である「The Marvellous Suspender」を紹介しています。 作業中、調べ物などをしていてついついブラウザを開きすぎてしまい、PCが重くなってしまった経験ありませんか？このプラグインを入れておけばアクティブでないタブを停止状態にすることができます。 停止までになる時間を「5分」「15分」「30

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

表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。 マージンが期待通りにならない、カラーの指定がおかしくないかなど、CSSのチェックに大活躍する機能拡張です。

Chromeのアドレスバーというのは一瞬しか見ません。URLを入力したら、あとはWebサイトに行くからです。しかし、使い方さえ知れば、実はもっと多くのことができます。 これまでもChromeに関する小さなコツを何度かご紹介してきましたが、アドレスバーについてはいつもスルーでした。しかし、実は色々とできることがあるのです。今回は、アドレスバーの知られざる裏技をご紹介していきましょう。 単位の変換や計算ができる ちょっとした計算をするために、いちいち計算機アプリを開くのは面倒だと思うことはありませんか？　そんな時は、計算式を入力すればChromeのアドレスバー（オムニボックス）に答えが出ます。Enterキーを押す必要すらありません。同じように、気温など基本的な単位の変換もできます。数字と単位を入れた後で「=」を入れるだけで変換してくれるのです。例えば、摂氏50度が華氏何度か知りたい時は「50

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

モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura（Slack） 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏（以下、ポール氏）は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle