使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA
ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。 そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 この記事ではデベロッパーツールでCSSをデバッグする方法や便利な機能などを紹介します。記事で使用しているデモは以下のリンクから確認できるので、実際にデベロッパーツールで操作しながら読み進めてみてください。 サンプルを別ウインドウで開く ソースコードを確認する 1. DOMのスタイルを確認 / 変更する デベロッパーツールでは、画面上でスタイルの確認、変更ができます。 (1)デベロッパーツールを開く まずはGoogle Chromeを開きます。 確認したい箇所を右クリックし、［
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
新Edgeでクリック時にmousemoveイベントが発火される問題 | バシャログ。
こんにちわ。山崎です。最近更新できておらず、久々の投稿になります。 今回はとあるプロジェクトの開発中に2020年1月15日にリリースされた新Egdeでの不具合を見つけたのでそれについて書いていこうと思います。 何を作っていたのか イベントサイトの会場マップでそのマップをドラッグしたらマップの位置を移動し、 クリックしたら該当の小間番号のモーダルが開き詳細が見られるというものです。 実際のソースコードを載せることはできないので、今回複数の企業が合同セミナーイベントを行うという程でかなり簡易的なものですがdemoを作ってみました。 デモはこちら 画面収録 2020-06-29 16.35.25.mov ソースコード <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>EdgeとChromeでclick時にmousemoveが発火
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処方法を紹介します。 １．問題点 テーブルのヘッダ部分がページの上部にさしかかると「position: sticky」で表示が固定されるサンプルを作りました。 <style> table { border-collapse: collapse; width: 600px; } thead { position: sticky; top: 0px; background: grey; } th, td { border: solid 1px #00 0000; } </style> <body> <p>1</p> <table> <thead> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> </tr> </thead> <tbody> <tr> <t
FlexboxやFloatでレイアウトが崩れてしまう原因がすぐに見つかるChromeの機能拡張- Pesticide
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
保護されたPDFのテキストをコピーする方法
保護されたPDFのテキストをコピーする方法を紹介します。 １．問題点 PDFファイルのテキストをコピーしたのですがペーストできません。 どうもPDFファイルが保護されているため、コピーができないようです。 文字数が多く手入力が面倒なので、できればコピーしたいのですが方法がわかりません。 ということで、保護されたPDFのテキストをコピーする方法を紹介します。 ２．対処方法 該当のPDFファイルをGoogle Chromeにドラッグして表示させ、印刷アイコンをクリック。 送信先を「PDFに保存」にして「保存」をクリック。ここでは「テスト2.pdf」で保存します。 保存したファイルを開くと保護が解除されています。 これでテキストをコピーできる状態になりました。
ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
404エラーで消えてしまったページを各種キャッシュサービスから掘り起こすChrome拡張「Web Cache」
404エラーで消えてしまったページのキャッシュを、Google・Yahoo・Bing・InternetArchiveなどの各種キャッシュで一度に探すことができる、Google Chrome用の無料拡張機能が「Web Cache」です。。 Web Cache - Chrome ウェブストア https://chrome.google.com/webstore/detail/web-cache/coblegoildgpecccijneplifmeghcgip?utm_source=chrome-app-launcher-info-dialog Web CacheをインストールするにはGoogle Chromeで上記のリンクを開いて、「CHROMEに追加」をクリック。 ポップアップウィンドウが表示されるので、「追加」をクリック。 「Web CacheがChromeに追加されました」と表示されたら
「https://」で始まるページでブックマークレットが動作しない理由
「https://」で始まるページでブックマークレットが動作しない理由を調べてみました。 １．問題点 はてなブックマークでブックマークをするときには、いつも公式のブックマークレットを使っています。 が、「https://」で始まるページではこのブックマークレットが動作しない場合があります。 FirefoxやChromeでこの現象が発生します。 ブックマークできない代表的なURLはTwitterやFacebookなどです。 なお、「https://」で始まるすべてのページでブックマークレットが動作しないという訳ではありませんし、ブックマークレットによっては動作するものもあります。 ２．原因 調べてみたところ、ChromeやFirefoxでは「Content Security Policy」というものに対応しているためのようです。 「Content Security Policy（CSP）」は
CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法
jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。 下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。IEやFirefoxでは想定通りに動きますが、Google Chromeでは想定通りに動きません。 [javascript] $(function(){ var w = $(‘#target’).css(‘width’); alert(w); }); [/javascript] jQueryの$()はDOMの読み込みが完了後に実行されるはずですが、画像の読み込みについては別なようなのです。ですが、jQueryのbindメソッドを使うことで画像の読み込みを待つことができます。 [javascript]
![[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Google Chromeから「Delta Search」を削除する方法
Google Chromeのデフォルト検索エンジンを「Google」にしているのですが、いつの間にか「Delta Search」になってました。 「Delta Search」は、中東イスラエルの翻訳ソフト開発会社「Babylon」が提供しているものです。 「Delta Search」の検索では英語サイトしか表示されなくなります（下）。が、検索結果ページのデザインやロゴの配色がGoogleと似ていて「ちょっと変だな」とは思いながらもDelta Searchと気がつくまでに結構時間がかかりました。 プログラムの一覧を見ると、Delta Chrome ToolbarとDelta toolbarというものがインストールされてしまったようで、この関係でChromeの設定も変わってしまったようです。 そういえばパソコンを再起動したときに、 It appears that there is an att
パソコンでサッと電車の遅延情報を確認できるChrome用アプリ | ライフハッカー・ジャパン
Chromeユーザーなら、ブラウザ上で電車の運行情報を集められるアプリがあります。それがChrome版『ジョルダンライブ！』です。 ジョルダンライブ！とは、駅のホームや電車内など、目の前で起きている運行状況をユーザーが投稿し、 その投稿が一覧表示されるサイトのこと。スマホアプリ『乗換案内』（iOS版、Android版）を利用している人には馴染みがあるかもしれません。 このサービスは、どの運行情報よりもいち早く情報を入手できるのがポイント。Chrome版は地図上にピンが表示されるところも見やすくて良いです。ダウンロードはこちらのページから行えます。 デフォルト設定では、全国の運行情報が表示されます。ドロップダウンリストでは、各地域ごとの表示に切り替えることもできます。 「（電車が）止まっている」「遅れ」など、電車の状態ごとに絞り込み検索が可能です。「3h」というボタンをクリックすると「24h
「Purge Memory」機能でGoogle Chromeが使用するメモリ量を削減 | ライフハッカー・ジャパン
Chromeはスピーディーなブラウザですが、その代償として必要となるのが結構な量のメモリ。 RAMをたくさん積んだパソコンを使っている場合、大した問題ではないのですが、そうでない場合、メモリをちょっとしたわざで解放する方法があるのです。 Download Squadのリー・マシューさんは最近のChromeの開発ビルドにはコマンドラインスイッチ（--purge-memory-button)があることを発見。Chrome起動時に走らせておくとChromeのタスクマネージャにメモリ消去ボタン(Purge memory)が追加されます。 他のブラウザと同様にChrome/Chromiumはブラウジングセッションが長引くにつれて必要となるRAMの量も増えていきます。--purge-memory-buttonスイッチをコマンドラインに追加することにより、メモリを開放することが可能になります。しばらくネ
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」:phpspot開発日誌
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 2011年05月10日- JavaScript Errors Notifier - Chrome ウェブストア JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 エラーがあった場合に、アドレスバーの星アイコンのとなりに次のように通知してくれます。 アイコンをクリックすれば具体的なエラー内容が分かるという物。 赤のアイコンでエラー検知が分かりやすくていいですね。 通常の状態ではエラーがあろうと、デベロッパーツール等でコンソールを開いてない限り気づくことは出来ませんが、これは開発者は必須のツールかもしれませんね。 関連エントリ PHPのエラーなんかをブラウザで確認できるC
Chrome 10 でフォントを指定してるのに反映されない現象の対処法 : 二十歳街道まっしぐら
Chromeをメインブラウザとして使ってるのですが、先日からフォントまわりがどうやらおかしいことに気づきました。 何を血迷ったのか、Chromeをアンインストールしてしまい、もう一度入れなおしました。 Chrome10を再インストール後、フォントを設定しているのに、ページにぜんぜん反映されないという現象が起こりました。 色々調べてみますと、どうやらChrome 9 → 10のアップデートで、ゴシック系のフォントが指定できなくなったようです。 以下にその対処法を載せておきますね。フォント設定でお困りの方どうぞ。 通常だと、オプションの高度な設定からフォント設定が可能です。 もちろん、ここから設定は可能なのですが、反映されないことがあります。 その理由はこちら。（2ちゃんねる Chromeスレ より引用。） バージョン10以降でフォント設定の変更が反映されない Edit バージョン9以前の従来
Google Chromeでfloatレイアウトが崩れる件について
Google Chromeでfloatレイアウトが崩れる事象が発生しました。 かなりレアケースと思われますが、備忘録として以下に詳細を残しておきます。 １．サンプル サンプルはdl/dt/dd要素を使ったfloatレイアウトで、コメントフォームを想定しています。 (X)HTML（赤色が対象部分） <?xml version="1.0" encoding="euc-jp"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Browser Bug Searcher
http://blog.e-riverstyle.com/2013/09/chromefirefoxcsscss.html