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






いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Google Chrome 「要素を検証」のHTML/CSSの編集とエミュレーション機能を覚えておくと便利です
Google Chrome 「要素を検証」のHTML/CSSの編集とエミュレーション機能を覚えておくと便利です
そういえば、Google Chromeの機能がちょっと新しくなりました(2014年11月時点で数ヶ月前に)。ChromeにスマートフォンでWebページを見た時のエミュレーション機能がありまして、擬似的に画面を表示できます。これが結構便利なんです。使い方が少し変わったので、ついでに紹介したいと思います。iPhone6やiPhone6 Plusなんかもエミュレートできます。
http://2.bp.blogspot.com/-TVMI9L-exww/VHCuogwXxjI/AAAAAAAAVm4/ASEke-9xGXc/s1600/0001.png
http://2.bp.blogspot.com/-TVMI9L-exww/VHCuogwXxjI/AAAAAAAAVm4/ASEke-9xGXc/s72-c/0001.png
ふりむけばコウホウ
http://www.furimuke.com/2014/03/google-chrome-htmlcss.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2014/03/google-chrome-htmlcss.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy