コーディングメソドロジー

第46回 Google Chromeの対応について

Google Chromeは近年、IE9やIE8に迫る勢いでシェアを伸ばしています。
他のブラウザに比べ、Javascriptのレンタリングが早く、ストレス無く表示できるブラウザの一つとしてユーザーに好まれていると考えられます。
Google ChromeはHTMLレンタリングエンジンにWebKitを採用していたり、強制アップグレードの仕組みがあるという特徴があり、特にメッセージもなくバックグラウンドで更新が行われるため、ほぼ100%の人が最新バージョンを使用しているという想定ができます。
また、Chromeには標準機能として付属しているdeveloper toolがあり、 Firefoxのアドオンとして有名なFirebugとは若干機能や操作感に違いはありますが、同じようなデバックが可能です。

10px相当のフォントサイズのテキストリンクにはhover時のunderlineが表示されない場合がある

10px相当のフォントサイズのテキストリンクにはhover時のunderlineが表示されない場合がある

画面が100%表示のとき、font-familyの指定にもよりますが、10px相当のフォントサイズにしたとき、hover時のunderlineが表示されないことがあります。

画面を例えば120%に拡大するとunderlineが表示されることがあるので、100%時の10pxについての表示に問題があるようです。
100%表示のみの一時的な回避方法となりますが、padding-bottom: 1px;を指定すると表示ができるようになります。

10px未満のフォントが全て10pxに揃えられてしまう

10px未満のフォントが全て10pxに揃えられてしまう

ハックについては、webkit系共通の@media screen and (-webkit-min-device-pixel-ratio:0)を使用してstyleを書きます。
ただし、Safariにも有効なハックなため、ハックを使用しないコーディングを前提とし、どうしても使用する場合はその他のブラウザへの影響を考慮する必要があります。

ハックについて

ハックについて

Chromeの標準機能として付属しているdeveloper toolの中の、その中でもコードインデントを揃える機能はとても便利な機能です。

便利な機能について

便利な機能について

Chromeの標準機能として付属しているdeveloper toolの中の、その中でもコードインデントを揃える機能はとても便利な機能です。

解析したいサイトでJavascriptが改行を省いた状態で参照されていて、解析しずらい場合があります。
その場合、chrome developer toolの標準機能にある「Sources」の中から解析したいJavascriptを選び、アンダーバーの一番左にある「{}」機能をクリックすると、自動的に改行をしてくれるので、改行が省かれたソースが見やすくなります。
この機能を活用することにより、他の人が書いたソースの検証がし易くなります。

どんなブラウザにも独自のクセのようなものがあります。
Chromeは今後もシェアが広がることが予想されるので、そのクセの検証と対処方法が必要となっていくことでしょう。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム