Pinterest2015.05.25この記事は約3分で読めます。※当ブログではアフィリエイト広告を利用しています。Chromeには、デベロッパーツールというものが付属しております。WordPressテーマカスタマイズや、HTML/CSSなどWeb開発には欠かせないツールです。デベロッパーツールは日本語化されておらず英語で、またかなり高機能でいろいろな機能があり、全てを使いこなすの結構難しそう。デベロッパーツールの必要な最小限だけ使い方を紹介します。今回のバージョンは以下です。Chromeで、Webサイトのページを開いた状態で、メニューバーの「設定」(三本線のマーク)⇒「その他のツール」⇒「デベロッパーツール」で開きます。ショートカットキーで開く場合は、以下のいずれかです。開くと、以下のような画面になります。デベロッパーツールはウィンドウの右側に開くか、下側に開くか選択できます。ウィンドウの下側に開いておいた方が見やすいし、ページのレイアウトも崩れないので、下側に開いておきましょう。デベロッパーツールの右上にあるウィンドウアイコン(「×」の左)をクリックします。すると、下側に切り替わります。使うタブは、「Elements」、「Styles」の2つです。「虫眼鏡マーク」をクリックすると、画面上の部品を選択することができます。選択すると、そのHTML/CSSソースの該当箇所を探して表示してくれます。HTML/CSSの一時変更HTML/CSSソース本体を修正することなく、一時的に変更し、画面で確認することができます。HTMLソースの修正したい箇所をダブルクリックで選択し、修正してみます。すると、画面も変更されました。CSSソースの修正したい箇所を選択し、修正してみます。スタイルの追加も行うことができます。すると、画面にスタイルが反映されました。デベロッパーツールは、特にCSSのデザイン修正時に役立つという印象です。WordPressテーマカスタマイズなどを行っていると、自分が書いた部分が思った通りに画面に反映されない時が結構あると思いますが、その際に該当箇所の適用されているCSSを確認することができるので非常に助かります。CSSソース本体を修正することなく、画面上で確認しながら一時変更できるところも良い点ですね。続いて、閲覧デバイスの変更について。スマートフォンやタブレットでの画面の見え方が正しいかどうかを確認するのに、本番環境に修正したものをアップロードしてから、自分の端末で確認するのでは効率が悪いし、修正が間違っている可能性もあるので、ローカル環境で確認してからアップロードしたいですよね。そんなときに、デベロッパーツールで閲覧するデバイスを変更することができます。「デバイスマーク」をクリックすると、画面がこのように切り替わります。iPhone6」にしました)し、「F5」キーなどで画面を更新します。すると、選択したデバイスでの表示になりました。スマートフォン用のレイアウトで表示されていますね。デベロッパーツールの必要最小限の使い方は、以上です。紹介した機能はほんの一部ですが、これだけでもWordPressテーマカスタマイズやHTML/CSSのWeb開発がとても捗りそうですね。Pinterestえふめん大阪在住、30代。業務系SE・社内SE。PCトラブルの調査、自作デスクトップPCのこと、PC周辺機器のレビューなどの記事を書いています。最新情報をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。※サイトホームソフトウェアえふめん大阪在住、30代。業務系SE・社内SE。PCトラブルの調査、自作デスクトップPCのこと、PC周辺機器のレビューなどの記事を書いています。コメント目次へトップサイドバータイトルとURLをコピーしました。