Google Chrome 「要素を検証」のHTML/CSSの編集とエミュレーション機能を覚えておくと便利です

おすすめ記事ピックアップ

そういえば、Google Chromeの機能がちょっと新しくなりました（2014年11月時点で数ヶ月前に）。ChromeにスマートフォンでWebページを見た時のエミュレーション機能がありまして、擬似的に画面を表示できます。これが結構便利なんです。使い方が少し変わったので、ついでに紹介したいと思います。iPhone6やiPhone6 Plusなんかもエミュレートできます。

Google Chromeの「要素を検証」を覚えておくと、HTML/CSSの編集や、スマートフォンでの表示チェックが簡単になります。一度覚えると簡単に使えます。知らない人は習得をおすすめします。主要の2つの機能だけ紹介します。

Webページ画面上で、右クリックをします。「要素を検証」を選択すると下に画面が出てきます。エレメントとスタイルのタブの内容が表示されるはずです。

この左上の虫メガネを選んでみましょう。

これです。虫めがねを選択すると色が付きます。

虫メガネを選択して、Webページ上にカーソルを移動すると、要素が選択されます。クリックをしますと、その該当のHTMLが左側に表示されます。右側には関連のCSSが表示されます。

この下に表示されているHTMLやCSSの数字を自由に変更できます。ブラウザー上で仮想的に、HTMLやCSSを変更した場合の影響を確認することができます。見ながら変更できるので、とても便利なんです。

変更以外にも、あたらしくコードを追加することもできます。リアルタイムでHTMLやCSSのデザイン変更や修正のテストができるのです。変更が確定したら、本番のHTMLやCSSを同じように変更すればOKです。

次にエミレート機能を紹介します。右にある「スマートフォンっぽいマーク」をクリックします。

これです。

上にもうひとつ、画面が開きます。

「You might to reload～」と表示されるときは、更新しましょう。以前の表示の影響で画面が正しくシュミレートされていません。更新すると正しい画面になります。

Deviceからいろんなスマートフォンを選択できます。iPhone6やPlusもあるのが嬉しいです。

左上や左下のアイコンをクリックすると元の画面に戻ります。

例えば、このようにiPhone5で見た画面が表示されます。実際の画面とは、微妙に違うようですが、大雑把な確認ができるのでとても便利です。

この「HTML/CSSの変更」と「スマートフォンでのエミレート機能」を覚えておくと、修正などがサクサクできて便利です。他にもいろいろな機能が付いています。一見難しそうですが、怖がらずにさわってみるとよろしいかと思います。