WebデザイナーはWebページを制作して、リンクなどの動作を確認したらそれで作業終了というわけではありません。Webページの表示確認が必要になります。というのもWebブラウザはバージョンや種類によってHTMLタグの解釈方法が異なるため、Webページの状態がWebブラウザによって異なって表示されてしまうのです。ひとつのWebブラウザに対応している機能などを利用してWebページを作成してしまうと、ほかのWebブラウザではその動作が確認できないといったことになります。またWebページの表示状態はWindowsパソコンとMacでも異なります。WindowsパソコンとMacでは使用するブラウザの種類や異なるほか、パソコンのフォント環境なども異なるところがあって、Webページの作り方によっては表示状態が異なってしまうのです。
そのため、WebデザイナーはWebページを制作した後、そのWebページの表示状態を確認しなくてはなりませんが、Webページの表示状態を検証するには複数のパソコンを用意し、Webブラウザをそれぞれ異なった種類とバージョンに設定して確認するといったことを行わなくてはならずなかなか大変です。
そうしたとき、利用したいのがChromeの拡張機能です。
Webブラウザには、マイクロソフトのInternetExplorerやFirefox、safari、operaといったいくつかの種類があり、Webブラウザによっては様々なアドインや拡張機能が開発、提供されています。WebブラウザのひとつであるGoogleのChromeもそうしたWebブラウザのひとつで、Webデザイナーに便利な拡張機能が提供されています。
Chromeではスタイルシートを反映したとき、リロードなしで更新したWebページを表示することができるCSS Reloader、Webページの要素を確認することができるCSSViewer、テキストボックスに入力してCSSを検証することができるLive CSS Editor、h1 /h2 /h3 といった見出し、サイト構造を一覧することができるHTML5 Outliner、サイトの構成を確認することができるChrome Sniffer、ページ内で縦横サイズを計測することができるメジャーのMeasureIt、alt属性がポップアップ表示されるPopup Image Alt Attribute、レンダリングをIEに変えてくれるIE Tabなど、Webページの制作や制作したWebページの確認に利用することができる機能が提供されています。
例えば、XHTMLに準拠したWebページを制作しているかの確認でalt属性の設定状況を確認するとき、Popup Image Alt Attributeの機能の使って画像のalt属性をチェックしていけば、設定ミスを検出して修正することができます。
またレンダリングをIEにするtabを使えば、1つのウィンドウでChromeとIEの表示状態を確認することも可能です。
より効率的なホームページ制作のためにChromeの拡張機能を利用してみることをおすすめします。
- この記事を書いた人
-
IT・デザイン・クリエイター向け求人サイト、グラフィカルジョブのライターです。デザイン業界に関する皆さんの疑問にお答えできる記事を投稿していきたいと考えています。
