文字の上にカーソルを置くだけでフォント名が分かるChromeの拡張機能「WhatFont」
ウェブサイトはレイアウトや文字の選択で雰囲気がガラっと変わるため、人目を引くウェブサイトが使っているフォント名・文字サイズ・文字の色などは気になるところです。文字の上にカーソルを置いたりクリックしたりするだけでフォントの種類や詳細が分かるGoogle Chrome拡張機能が「WhatFont」で、気になるウェブサイトのデザインの秘密が簡単に分かるようになっています。 WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu http://chengyinliu.com/whatfont.html Chrome ウェブストア - WhatFont https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpml
Mac/PCからのAndroid上のブラウザのリモートデバッグのまとめ - Nothing ventured, nothing gained.
スマートフォンやタブレットが主流になりつつあるが、それらモバイルデバイスでWebのデバッグするのは楽ではない。User Agent文字列を変更してモバイルデバイス上のブラウザの振りをしたMacやPCのブラウザからデバッグする方法もあるが、モバイルデバイスのブラウザの機能がMacやPCと同一ではなく、モバイル特有の状況もあるため、モバイルデバイスそのものを使った状態でデバッグしなければいけないことも多い。 そのような際に使われるのがリモートデバッグだ。 Mac/PCとAndroidの両方にブラウザを提供している主流ブラウザとしてはChrome、Firefox、Operaがあるが、このリモートデバッグ機能はこの3種のブラウザすべてに備わっている。また、ブラウザ開発元ではないが、Adobeもリモートデバッグ機能を提供している。すでに使っている人も多いと思うし、それぞれ多くの情報が提供されているの
SDK不要Android端末のリモートデバッグChrome拡張機能「ADB」 - Intelligent Technology's Technical Blog
こんにちは、石尾です。 Android端末のChromeをリモートデバッグする場合、Android SDKをインストールして、adbコマンド(Android Debug Bridge)を利用していました。 adbコマンドのリモートデバッグ これが当たり前だと思っていましたが、Chromeの拡張機能「ADB」を利用すれば、SDKをインストールする必要はありません。 PC： OS：Windows7(64bit) Chromeバージョン：30.0.1599.101 Android端末： OS：Android4.0.3 Chromeバージョン：30.0.1599.82 1.インストール PCのChromeからChrome Web Store - ADBにアクセスし、インストールします。 インストールすると、メニューに「ADB」アイコンが追加されます。 2.使ってみます PCとAndroid端末をU
Google Chromeでスマホサイト制作
Google Chromeでスマホサイト制作 @ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Screen resolution」を320×480に設定して表示領域をスマートフォンと同じくらいになるように設定して、「Emulate touch events」にチェックを入れタッチイベントをエミュレートしています。案件によ
Iframeがキャッシュを保持して更新されないときの対処法（特にChrome） - サイト制作の豆知識
Iframeがキャッシュを保持して更新されないときの対処法（特にChrome） ●top.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <iframe id="testtest" src="Iframeで読み込むhtmlのURL" width="400" height="300" frameborder="0" scrolling="NO"></iframe> </body> </html> ●iframe.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> 下記のスクリプト
search 型 input 要素 のスタイルをリセット - terkel.jp
HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基本的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res
スタイルシートで文字列を省略し、・・・を付ける方法
Webで使えるテクニック！Webで困ったときのメモ帳より、CSSだけで文字列を省略して「・・・」を付けて表示する方法というのがありました。 http://ameblo.jp/linking/entry-10268808742.html そして、その元記事はこちら FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20378240-2,00.htm 要は、 text-overflow: ellipsis; を使うのだが、文字数ではなく、幅で指定できるので、これは使えそうなテクニックだ。 と思ったのだが、 ・・・ Firefox や Chrome は？ 上記ページにあったサンプルをつかって、実際の表示を確認したところ
Google カレンダー の土日に色をつける方法 | SUEKICHI.org
Tweet Check 普段、Google Calendarを使っているのですが、土日のカラムに色がついていないのがとても気になっていました。 土日も平日も関係なく、がんがん仕事してる人や、そもそも土日が休みじゃない人には逆に良い仕様なのかもしれませんけど。 Google Calendarの土日に色を付ける方法は、ぐぐるとたくさん出てくるんですが、 結構古い情報で、最新(2010/03/15現在)では動作しなかったり、動作環境がちがったりと、なかなかいいのがなかったので、自作してみました。 スクリーンショット 実現方法としては、Google Calendarに独自のCSSが適用できればOKです。 Firefoxでは、プロファイルディレクトリ内にあるchromeディレクトリにuserContent.cssを編集もしくは追加します。 @-moz-document url-prefix("htt
複数のバージョンのGoogle Chromeを同時に動かす方法 - os0x.blog
複数バージョンのChromeを同時に動かす方法は公式には用意されていませんが*1、割と簡単にバージョンごとのChromeを動かすことができます。 出典はGoogle Chromeを任意のフォルダにインストールする方法など: 夜明け前と2chのChromeスレ*2からです。 インストールしたいバージョンのインストーラーを用意 4.0.249.30をインストールしたい場合、http://dl.google.com/chrome/install/249.30/chrome_installer.exe からダウンロードできます。 バージョン番号の後半2つをhttp://dl.google.com/chrome/install/xxx.xx/chrome_installer.exe のxxx.xxの部分に当てはめればそのバージョンがダウンロードできます。バージョン番号は後半2つだけでユニークになるよ
Google Chrome の単体インストールパッケージを入手する方法 - [ぴ](2010-06-12)
_ [Web制作][ソフトウェア] Google Chrome の旧バージョン単体オフラインインストーラを入手する方法 Google Chrome は常に最新版しかインストールしかできない。また、通常の方法ではインストーラをローカルに保存することもできないようになっている。 ではオフラインでインストールするための単体パッケージを残しておきたいブラウザマニアはどうやって入手したら良いのかだが、調べたところ、Windows 版は http://cache.pack.google.com/edgedl/chrome/install/[ビルドナンバー]/chrome_installer.exe でダウンロードできるようだ。 例えば 5.0.375.70 なら http://cache.pack.google.com/edgedl/chrome/install/375.70/chrome_insta
](https://cdn-ak-scissors.b.st-hatena.com/image/square/d228e8be070c32c738781e15c25aeb18f4dc6807/height=288;version=1;width=512/https%3A%2F%2Fpmakino.jp%2Ftdiary%2Ftheme%2Fogimage.png)
Google Chromeに入れておきたい拡張機能30個まとめ | フリーソフトラボ.com
Google Chromeもバージョン4になって、Firefoxのアドオンに相当するような拡張機能に対応しました。PCの中上級ユーザにとってFirefoxのアドオンはもはや手放せない機能となっているため、性能が良いと分かっていながらも、なかなかGoogle Chromeへの乗り換えに踏み切れなかった人も多いのではないでしょうか。 そんな人にオススメのChrome拡張機能ですが、まだ初期段階の現在では、大量の拡張機能から自分にあった「使える」ものを見つけ出す作業はなかなか難しく、ほとんどの説明が英語表記だけで提供されているため、どんな機能が利用できるのかも一目では分かりづらい・・・。 そこで今回は、Firefoxユーザーにもおなじみの気の利いたGoogle Chrome用の拡張機能を30個まとめて紹介します。まだFirefoxほど多数の優秀な拡張機能がそろっているわけではありませんが、Fir
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Extensions API リファレンス