chromeでソース表示させるには?Androidでのやり方を解説!

chromeでソース表示させるには?Androidでのやり方を解説!

Webエンジニアやデザイナー・コーダーなどの仕事をしている人や、これから勉強しようという人は実際のwebサイトのソースコードを参考にすることがあります。この記事では、PC版・Android版Chromeでソースコードを表示させる方法について説明しています。


目次

  1. chromeでソース表示させる
  2. chromeでソース表示させる方法
  3. 【Android】chromeでソース表示させる方法
  4. まとめ

chromeでソース表示させる

Web系のエンジニア・コーダー・Webデザイナーなどの仕事でHTMLを扱う人やこれからHTMLを学ぼうという人は、実際のWebサイトのソースコードを参考にすることがあります。

筆者もネットの閲覧中に気になるサイトを見つけたら、「このWebサイトはどうやって作られているんだろう?いけてるサイトだから参考にしたい」とすぐにサイトのソース表示をして、ソースコードを見ています。

実際に稼動しているWebサイトのソースコードを見るのは、HTMLを学ぶ上では参考書を用いて勉強することと同じ、もしくはそれ以上に重要です。

ソースコードには興味があるけどどうやってWebサイトのソースコードを見ればいいのか分からないという方も多いかと思いますが、実はかなり簡単です。

ブラウザによってはメニューから簡単にソースを見ることができます。人気ブラウザ「Google Chrome」も開発者ツールを備えており、ブラウザ1つでHTMLの勉強ができるようになっています。

chromeでソース表示させる方法

それでは、PC版・Android版Chromeでソースコードを表示させる方法についてご紹介します。

メニューから

PC版Chromeでは、ソースコードを表示させたいサイト上で右クリックしてメニューを表示させ、「ページのソースを表示」をクリックすることでソースコードを表示させることが可能です。

新しいタブが開き、サイトのソースコードが表示されます。

ショートカットでソース表示させる

また、ショートカットキーでもソースコードを表示させることが可能です。「ページのソースを表示」のショートカットキーは「Ctrlキー+U」です。右クリックメニューからソースを表示した場合と同じく、新しいタブでソースコードが表示されます。

【Android】chromeでソース表示させる方法

Android版Chromeでサイトのソースコードを見るには、ソースコードを表示させたいサイトのURLの先頭に「view-source:」と入力して移動しましょう。

これで、ページのソースを表示することができます。PCブラウザ版Chrome同様ソースコードに色が付いているため見やすくなっています。

また、この方法はPCブラウザ版でも使用することができます。

まとめ

chromeでソース表示させる方法はいかがでしたでしょうか?

ブラウザとエディターがあれば出来るWEBページの開発はとてもおもしろく、世の中に教材が溢れている状況です。

プログラミング教育も義務教育に入ってきますし、ぜひこの機会にWEBサイト制作について勉強してみてはどうでしょうか?


関連記事