chromeでソース表示させる
![](http://cdn2.aprico-media.com/production/imgs/images/000/012/059/original.jpg?1524585414)
Web系のエンジニア・コーダー・Webデザイナーなどの仕事でHTMLを扱う人やこれからHTMLを学ぼうという人は、実際のWebサイトのソースコードを参考にすることがあります。
筆者もネットの閲覧中に気になるサイトを見つけたら、「このWebサイトはどうやって作られているんだろう?いけてるサイトだから参考にしたい」とすぐにサイトのソース表示をして、ソースコードを見ています。
実際に稼動しているWebサイトのソースコードを見るのは、HTMLを学ぶ上では参考書を用いて勉強することと同じ、もしくはそれ以上に重要です。
![](http://cdn2.aprico-media.com/production/imgs/images/000/012/068/original.png?1524664142)
ソースコードには興味があるけどどうやってWebサイトのソースコードを見ればいいのか分からないという方も多いかと思いますが、実はかなり簡単です。
ブラウザによってはメニューから簡単にソースを見ることができます。人気ブラウザ「Google Chrome」も開発者ツールを備えており、ブラウザ1つでHTMLの勉強ができるようになっています。
chromeでソース表示させる方法
それでは、PC版・Android版Chromeでソースコードを表示させる方法についてご紹介します。
メニューから
![](http://cdn2.aprico-media.com/production/imgs/images/000/012/065/original.jpg?1524663511)
PC版Chromeでは、ソースコードを表示させたいサイト上で右クリックしてメニューを表示させ、「ページのソースを表示」をクリックすることでソースコードを表示させることが可能です。
![](http://cdn2.aprico-media.com/production/imgs/images/000/012/066/original.jpg?1524663600)
新しいタブが開き、サイトのソースコードが表示されます。
ショートカットでソース表示させる
![](http://cdn2.aprico-media.com/production/imgs/images/000/012/067/original.png?1524663691)
また、ショートカットキーでもソースコードを表示させることが可能です。「ページのソースを表示」のショートカットキーは「Ctrlキー+U」です。右クリックメニューからソースを表示した場合と同じく、新しいタブでソースコードが表示されます。
【Android】chromeでソース表示させる方法
![](http://cdn2.aprico-media.com/production/imgs/images/000/012/063/original.jpg?1524662748)
Android版Chromeでサイトのソースコードを見るには、ソースコードを表示させたいサイトのURLの先頭に「view-source:」と入力して移動しましょう。
![](http://cdn2.aprico-media.com/production/imgs/images/000/012/064/original.jpg?1524662836)
これで、ページのソースを表示することができます。PCブラウザ版Chrome同様ソースコードに色が付いているため見やすくなっています。
また、この方法はPCブラウザ版でも使用することができます。
まとめ
chromeでソース表示させる方法はいかがでしたでしょうか?
ブラウザとエディターがあれば出来るWEBページの開発はとてもおもしろく、世の中に教材が溢れている状況です。
プログラミング教育も義務教育に入ってきますし、ぜひこの機会にWEBサイト制作について勉強してみてはどうでしょうか?