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サイト制作について勉強してみてはどうでしょうか？