CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
DOMノードの強調表示 Consoleタブを選択。 DOMノードに評価される式を入力。 入力する式 以下の便利な式を使用できます。 「document.activeElement」で、現在フォーカスのあるノードを強調表示。 「document.querySelector(s)」で、任意のノードを強調表示。sはCSSセレクタで、DOMツリー内のノード上をホバリングするのと同じ。 「$0」で、DOMツリーで現在選択されているノードを強調表示。 「$0.parentElement」で、現在選択されているノードの親を強調表示。 パフォーマンスパネルの最適化 今までのパフォーマンスパネルは大きなページをプロファイリングする際にはデータの処理とビジュアル化に時間がかかりました。Chrome 70ではこの処理とビジュアル化が高速になりました。 パフォーマンスパネルの最適化 信頼性の高いデバッグ Chro
スマートフォン(スマホ)が広く普及し、昨今では多くのWebサイトが、画面の狭いスマホに最適化した専用のビュー(表示)を備えるようになってきました。 サイトがスマホでどう見えるのかは、もちろん実際にスマホで表示してみるのが確実です。ただ、スマホやタブレットにはさまざまな機種があり、画面の解像度も異なるため、どう見えるかを全て実機でテストするのは困難です。 このような場合は、デスクトップ版Webブラウザの「スマホ表示」機能(スマートフォンのWebブラウザのエミュレーション)を利用すると、PCで簡単にスマホサイトの確認ができます。操作方法もそれほど難しくありません。 本記事では、Windows OS/macOSのデスクトップ版Google Chrome(以下、Chromeと略)の「デベロッパーツール(開発者ツール)」でスマホ表示を確認する方法を紹介します。このツールは名前に「デベロッパー(開発者
これは目から鱗! Googleがスマートフォンとデスクトップブラウザを連携させるサービスを幾つかリリースしています。その際にはデスクトップ側(または逆)で表示されたキーをもう片方で入力することでWebSocketによって接続しています。 技術的に高度で容易には実現しがたい訳ですが、もっと簡単にスマートフォンとデスクトップのブラウザを連携させる方法がありました。それを実現しているのがRemote.jsです。 こちらがデモ。スマートフォンで操作するとA/Bのハイライトが切り替わります。 こちらはスマートフォン側のリモコン。なぜか文字が逆になっています。 こんな感じで別なウィンドウを開いたり、閉じたりもできます。 種明かしをすると、Remote.jsは音を使っています。スマートフォンでボタンを押すと、特定の音が出ます。それをデスクトップ側のマイクで聞かせると特定のアクションを実行する仕組みになっ
起動オプションの設定方法 Windows版の場合 Google Chromeのショートカットを新規作成 作成したショートカットを右クリック、プロパティを選択 ”リンク先”へ起動オプションを追加 例 XP "C:\Documents and Settings\<ユーザー名>\LocalSettings\ApplicationData\Google\Chrome\Application\chrome.exe" --disable-javascript --disable-java --disable-plugins Vista "C:\Users\<ユーザー名>\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-javascript --disable-java --disable-plugins 半角スペースを空けてオ
※BloggerからWordPressへ移行しました。 このページの情報は古い可能性があります。 この記事のwordpressバージョンは以下URLからどうぞ。 http://wp.slovest8080.com/2012/05/19/130/ さて、覚書第1弾。 「Google Chrome」におけるマルチユーザの使い方。 マルチアカウントやアカウントスイッチとは違った、 マルチユーザが持つ使い勝手の良さをお伝えしたく。 また、今回記事にしたのは、 「デスクトップショートカットとして、そのユーザでChromeを起動する」方法が、 情報としてなかなか見つからなかったからです。 上記画像のアイコンを作成するところをメインとして、紹介したいと思います。 さてまずは、「マルチユーザ」の使い勝手の良さについて。 例えば、以下のことで困っている場合や、以下のことを実現したい場合などに有効。 ・一つの
Firefox Nightly と Chrome Dev に GamePad API が実装されているようです。 API: http://dvcs.w3.org/hg/webevents/raw-file/default/gamepad.html DEMO: http://rawkes.com/blog/2011/12/14/gamepad-api-demo-in-firefox-and-chrome if (navigator.gamepads) { window.addEventListener("gamepadconnected", connected, false); window.addEventListener("gamepaddisconnected", disconnected, false); // 仕様と実装が安定するまで Firefox では // "MozGamep
ブラウザが、毎回プライベートブラウジングモードで起動したらいいのに...と思ったことのあるプライバシーに敏感な方、いませんか?今回はそのような方々へ、デフォルトでブラウザをプライベートブラウジングで起動させる技をお送りします。この技は、どのブラウザ、どのOSでも使用可能です。 Download Squadで紹介されていたこの技は、コマンドラインスイッチをショートカットに追加するだけでできます。Windows 7ユーザーの方で、タスクバーのショートカットのプロパティにたどり着くのに手間取っている方は、タスクバーボタンを一度右クリックしてから、ジャンプリストにあるアプリケーション名を右クリックすると、表示されます。以下は、Windowsブラウザ用のプライベートブラウジング起動の適用方法です。 ブラウザのショートカットを右クリックし、プロパティのウィンドウが表示されたら、ショートカットのタブをク
Google Chrome をインストールして試していますが、軽快ですね動作が。Firefox 使いの私としては、かなり Firefox アドオンに依存している関係上、ブラウザを乗り換えるというところまでは行きませんが、Google Chrome にはアプリケーションショートカットという機能がついているので、Gmail 等、特定の Web アプリケーションの使用時には Google Chrome を使うという使い分けがいいかもしれません。 Google Chrome をインストールして試していますが、軽快ですね動作が。 Firefox 使いの私としては、かなり Firefox アドオンに依存している関係上、ブラウザを乗り換えるというところまでは行きませんが、Google Chrome には 「アプリケーションショートカット」 という機能がついているので、Gmail 等、特定の Web アプ
もう使ってる人はそんなの知ってるし・・・と感じるかもしれないけども、知らない人は絶対一度はつかっておいたほうがいいよねっていうアプリ。今更とか言わないの。 そもそもPCのブラウザがChromeを使っているので、これを使わない手はないんだけども、わりと私の周りで使ってる人がいなかったのでご紹介。 便利なポイント7つ 私はこれでChromeアプリをメインにしました的なポイント。 1)タブ移動が楽 これはもうほんと触れば一瞬でわかるレベル。複数のタブをペラペラ見ていける。 画面のはじから中央へスワイプしても隣のタブへ移動してくれます。 ただしこれはデメリットでもあり、だいたい赤いラインをひいたところがスタートラインとなります。この結果、普通にブラウジングしている時に引っ張ってしまう事も多々あります。 2)PCモードへの切り替えが楽 個人的な問題ではありますが、スマホ用の表示が大嫌いなんですよね。
unChromiumはunDonutのレンダリングエンジンをChromiumに変更したWebブラウザです。 2001年くらいはIEコンポーネントを使ったタブブラウザが隆盛でした。そんな時、個人的に使っていたのがunDonutです。そして年月は流れ…unDonutに新しい魅力を追加してかえってきたのがunChromiumです。名前の通り、unDonutのレンダリングエンジンをChromiumにしたWebブラウザです。 起動!このキャラは…安堂なつさんとでもおっしゃるんでしょうか?6年4組なので推定11歳? おお、ちゃんと見られるぞ!(失礼) HTML5も動くぞ! Chrome 18相当だそうです。 オプションが豊富なのはunDonutの証(どこまで使えるか分かりませんが)。 WebKitベースのレンダリングエンジンが使いたいと思いつつも、Safari for Windowsの酷さに辟易してい
かなり今さらの話ですが、過去記事のリンク切れ整理をしていて思い出したので。 スパイウェア疑惑やら広告置き換え騒動があったChrome用拡張機能「Smooth Gestures」ですが、結構前から Chrome ストアからダウンロードできなくなっています。 正直、Smooth Gestures は大変使いやすいので、環境によってはそのまま使っている人もいると思うんですが、気になる場合もあると思うので、今回は、ホイールジェスチャーでタブ切り替えができる他の拡張機能が無いか探してみました。 ※ この記事は、状況の変化に応じて将来更新する可能性があります。 今のところ「ホイールでタブ切り替えできる、ある程度の品質の拡張機能」というと以下の2つくらいしかない気がします。 Smooth Gestures に依存している方は、Smooth Gestures は削除せず、とりあえず無効にしてから試した方が
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 4月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを16進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい! Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く