「FireFox」 → 「Google Chrome」

ブラウザGoogle Chrome

「Google Chrome」に乗り換える準備を始めたのでメモ

 状態:-  閲覧数:4,180  投稿日:2012-02-25  更新日:2013-01-11
FFには、色々お世話になったけど、ついにと言うかいよいよ「Google Chrome」に乗り換える準備を始めたので、気が付いたことをメモしていく。
<乗り換え経緯>
・原因は不明だが、2週間前(?)ぐらいから、Googleの陰謀かよ! て勘繰りたくなるぐらいFFでのadsence表示が遅くなった。それこそ、ちょっともう耐えられないレベルにまで
・アドオンを片っぱしから無効化してみるも、効果なし。最終的にどうしても必要な2つだけ有効化してみたが、それでもダメ。どうしても改善しない。ググッても有効な手段が見つからない。原因不明。藁をもつかむ思いで、「Google Chrome」で表示させると、普通に表示される。このとき、もう「Google Chrome」にするしかないな、と思った


<エクステンション>
・FF アドオン「Make Link」同等機能
Create Link

・FF アドオン「Firebug 」同等機能
Firebug Lite for Google Chrome™



<ブラウザ間の違い>
・Google Chromeだけ、rssページが正常に表示されない。※IEやFFなら、正常表示されるのに
2010年時点なので、今は改善されているかもしれない。まだ、未確認
rssページが正しく表示されない/Google Chrome | DesignStyle

・URLが折り返し表示されない。
他ブラウザも同じ挙動かもしれない。未確認
URLが折り返し表示されない/Google Chrome | DesignStyle

・「line-height」の解釈が、条件によっては、異なることがある(かもしれない)
・もしくは、「FF+IE」と「CH」で、「インライン」「ブロック」の解釈が異なることがある
<遭遇したケース(メモ)>
今、目の前にあるサイトのレイアウトが「CH」だけ崩れてるんだけど、つまり、どういうこと?
現象的には、「CH」だとブロック、「IE」「FF」だとインラインっぽいのだけど、何で?
どっちがより標準に近いのよ?
てか、どれに合わせればいいの?
もしかして、全部?
連載インデックス「Webブラウザ別CSSハック&フィルタTips」 - @IT
こうゆうのの最新版ってどっかないかな?
ていうより、「IE」「FF」が同じ表示で、「CH」だけ違う、っていうシチュエーションがそもそもおかしいよね。
そんなことあり得るのかしら?
調べたけど全然情報ないし。
多分、「書き方が悪い」+「FFとCHの解釈の仕方は100%同じではない」、ってことなんだろうね。

もの凄い時間かかったけど、ようやく解決した。多分2時間ぐらいかかったかも(?) いくら考えても分からんかったから、CSS一つ一つ外していっちゃあレイアウト確認という小学生デバッグやってたからね。
原因は、「ブロック」と「インライン」の解釈の違いだと思う。
あんま詳しいことは分かんないけど、より正確には、それに伴う、line-height: 36px;の読み込みか……。
そもそも<li>タグに<h2>とか<div>とかようけ入れてたのが良くないのかもしれんが、
・「CH」…<li><h2>line-heightを反映。
・「IE」「FF」…<li><h2>line-heightを反映しない(?)
何かあんまり良く分かんないけど、「line-height」の解釈が、条件によっては、異なることがあるのかな?
修正すべきポイントは、「ブロック」「インライン」。
「IE」はともかく、「FF」は間違ってるCSSは修正せずにそのままブラウジングする、って認識だったけど、必ずしもそういうわけではないのかしら?
今、17:17。
ホントはコレ、明日やろうと思ってたのに、意地になってやり続けてたら、遅くなってしまった…。
昼ごはんとかまだ食べてないんですけど…


2012/3/8
・あるサイトのAJAX(?)ソートが「CH」だけ効かない。原因不明


・「CH」だけ動作しないjsサイトがある
Web Design by TVI
現在のサイトは「CH」だけ動作するが、以前のサイトだと「CH」だけ動かない。何をどうしたら動くようになるの?


・PHP等でデバッグすると、「CH」だけ文字化けする
ファイル先頭に
<meta charset="utf-8">
を追加すれば、O.K.
>charaset=utf-8の前に文字列の出力があったもんだから、これは文字コードを指定していないファイルだからshift-jisのデフォルトで読み込もうと認識されたようです。
Google Chromeで文字化け!-ITかあさん
>Google Chromeでは、HTML文書中にエンコード指定がない場合には既定のエンコードで
表示されます。デフォルト設定では既定のエンコードは Shift_JIS ですので、文字化けします。
文字化けについて - Google グループ

なお、下記は未検証
>また、[エンコード] メニューの一番上の "自動検出" をチェックしておくと、本文の内容から
使用されているエンコードが推定されて自動選択されます。

ちなみに、ファイル先頭に
<meta charset="utf-8">
を追加してどういう不具合が生じるかと言うと、
デバッグ終了したときに消し忘れた場合(あるいは別につけててもかまへんわと甘く見た場合)。
「CH」「FF」だと表示がそのままなので油断しがちだが、
「IE9」だと、思いっきりレイアウトが崩れてしまう。

なので、デバッグ文字化け対策として、
ファイル先頭に
<meta charset="utf-8">
を追加した場合、必ず面倒くさくても削除するよう、気をつける



2012/4/19
<ChromeのJSでは、「数値キーが自動的に先頭に並んでしまう」>
JavaScriptが、Chromeでどうしても期待通りに動作しないとき、試した方が良いかもしれないこと | JavaScriptStyle



2012/6/15
<Chrome Developer Tools>
「Chrome Developer Toolsの基礎 - ドットインストール」メモ | JavaScriptStyle



2012/6/21
<開いているすべてのタブを、一気にブックマークする方法>
・すべてのタブをブックマークする(バージョン4.0以降のみ)
・Ctrl + Shift + D
※ブックマークを格納するフォルダ名とフォルダの追加場所を選択するダイアログが出る


■Google Chromeブックマーク … 「別のフォルダを選択」を選択せずに、希望フォルダへ保存する方法
◇準備
・「ブックマーク バーを常に表示する」にチェックを入れておく

◇背景
・ブックマーク追加時にフォルダを選択する際、選択できるフォルダ数は少ない
・「別のフォルダを選択」を選択すれば他のフォルダも選択できるが、はっきり言って超面倒

◇手順
・アドレスバー右端の☆クリックから追加しない
・アドレスバーの左端のファビコンをドラッグしたまま、「ブックマークバーのフォルダ」や「その他のブックマーク」フォルダなどの上にドラッグしたら、中にあるサブフォルダも展開し、希望のフォルダにドロップ・狙いのフォルダ(場所)にドロップした後、☆クリックすると、名前と登録されたフォルダ(場所)が表示された編集ダイアログが表示されので、名前の変更可能

◇短所
・登録完了が分かりづらい

Google Chromeのブクマ時フォルダ選択 - ブラウザ - 教えて!goo

・何か便利なエクステンションないかと思い探したけど、見つからなかった。みんなどーやってるんだろ?
・正直、現状って、凶悪仕様だと思うのだが…。誰が仕様を決めたのよ? 2段階にする意味とかないんじゃね?、と思うのだが…



2012/7/3
<RSSフィード表示エクステンション導入>
Chrome ウェブストア - RSS Subscription Extension(by Google)
・ブラウザ再起動しないと、更新は反映されない

「Firebug Lite for Google Chrome™」アンインストール

 閲覧数:807 投稿日:2013-01-11 更新日:2013-01-11
・「Chrome Developer Tools」があれば十分なので、アンストールした

<経緯>
・ブラウザ開く度毎に、いつも立ち上がって、正直かなり、うっとおしかった
・そもそも普段から、「Chrome Developer Tools」を利用している
・FF時代に愛用していたから、入れてみたけど、「Firebug」より、「Chrome Developer Tools」の方が多分高機能
・少なくとも、、「Chrome」ブラウザに対しては、最適化していると思われ


URLが折り返し表示されない/Google Chrome

「名前を付けて保存」すると、「http://」からのパスがずれる



週間人気ページランキング / 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 10
3 Design 0 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
5 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
7 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ Lab | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 色モデルイメージ図 | 色変換(色) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 ICCプロファイル | カラーマネージメント(色) 2
8 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2024/11/23 1:01 更新