記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

FirefoxやGoogle Chromeのサイト制作時に役立つ開発者ツール

  • 2013.04.05
  • 2015.03.13
  • 技術
FirefoxやGoogle Chromeのサイト制作時に役立つ開発者ツール

開発者ツール

Webサイト制作時はFirefoxを利用することが多いですが、ブラウザの機能に制作時にとても役立つ「開発者ツール」というものが用意されています。ちなみに私が制作時によく使っているのがFirebugというアドオンです。

http://getfirebug.com/

firebug

FirebugはFirefoxユーザや開発者には有名なアドオンです。多機能で優秀なツールですが私はまだ一部しか使いこなせていません。その一部をご紹介するだけでも、非常に便利なツールであるとご理解いただけると思います。

まずFirebugの機能の1つとして、現在閲覧中のサイトのHTMLやCSSを確認することができます。これだけであればごく一般的な機能ですが、各要素に対してどれだけのスタイルが指定されているのかをピンポイントでチェックできる機能が備わっています。

スタイルが表示される

例えば作成中のページレイアウトが崩れている時、何が原因でレイアウトが崩れたのか、崩れている要素に対してどんなスタイルが指定されているのかを要素ごとに細かく確認できます。これが出来ることで制作者が想定していなかったスタイル指定が影響していることを発見できたり、HTMLの記述ミスを発見したりしやすくなるのです。

便利なのはオンライン上で一時的にHTML/CSSを編集できることです。HTMLだけではなくCSSも編集することができるので、「こうすると解決できるかもしれない」と思ったことを、今あるHTML/CSSファイルを編集することなく、その場で試してみることができます。

あくまでも一時的にブラウザ上で編集しているだけなので、ページを再読み込みすると試しに編集した内容は消えてしまいます。解決方法が見出せたら、手元のファイルを修正してアップして下さい。

その他、画像が表示されていない場合やjavascript実行時にエラーが発生した時などにエラーコンソールというメニューからそれらを確認することもできます。詳しい使い方は下記のURLなどを参考にしてください。
Firebugの基本的な使い方について

Google Chromeの開発者ツール

このような開発者ツールはGoogle Chromeにもあらかじめ備わっており、こちらの場合は新たにアドオンなどをインストールする必要はありません。

要素を検証
ブラウザ内で右クリック→「要素を検証」で表示させることができます。

Firebugをはじめとする開発者ツールは、非常に有用な様々な機能を備えています。全てを使いこなせなくても制作には十二分に役立てられますので、まずはいずれかを導入するところからはじめてみて下さい。

                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

技術カテゴリの最新記事