[14-1] ブラウザでソースを表示する

たいがいのブラウザは、ソースを表示する機能があります。
サイトを構成している HTML や CSS などをブラウザ上で表示する機能です。

この機能は、他の人が作ったサイトのソースを見たり、自分で作ったソースが、ちゃんと修正できているか確認したいときに便利です。

各ブラウザでソースを表示する方法

たいていのブラウザは「ページを右クリック」で「ソースを表示」を選べるようです。
またはショートカット Ctrl + U（Win）
Macなら Cmd + U または Cmd + Option + U で出ます。

Google Chrome

・「表示」→「開発/管理」→「ソースを表示」
・ショートカット（Win）Ctrl + U
・ショートカット（Mac）Cmd + Option + U

Firefox

・「ツール」→「ウェブ開発」→「ページのソース」
・ ページを右クリック →「ページのソース」
・ショートカット（Win）Ctrl + U
・ショートカット（Mac）Cmd + U

Safari

・「開発」→「ページのソースを表示」
Safari > 環境設定 >「詳細」タブ > 「メニューバーに”開発”メニューを表示」にチェックを入れることで「開発」メニューが表示されます。
・ ページを右クリック →「ページのソースを表示」
・ショートカットCmd + Option + U

Opera

・「表示」→「開発者用メニューを表示」「開発」→「ソースを表示」
・ ページを右クリック →「ソースを表示」
・ショートカット（Win）Ctrl + U
・ショートカット（Mac）Cmd + U

IE

・「表示」（またはページを右クリック）→「ソースの表示」

下は Macの Chrome 61 での表示例です。
ソースを表示すると、CSSなどの外部ファイルや <img>要素の画像ファイルも簡単に確認できます。

上の例は「宮古島市場ぱりぱり」さんの「宮古島の完全無農薬マンゴー」のランディングページを見ています。

ハードディスクに保存してじっくり読ませてもらう

表示されたソースを、自分のハードディスクに保存すれば、自分でちょっと編集してみて、ブラウザでプレビューし、どこが変化するかなどを確認できます。
ローカルファイルにして いじってみると、けっこう勉強になります。

保存したHTMLファイルを テキストエディタなどで開き、外部CSSファイルのパスを、自分のHDD上からのパスに書き換えて読み込ませるだけでも、パスの書き方の勉強になりますからね。

巨大サイトは避けよう。かえって混乱するから

巨大ポータルサイトや ECサイトは、構造が複雑でかえって混乱します。
いわゆる「イケてる」サイトってやつも、jQuery など 初心者だとちょっと難しいスクリプトも使っていたりして不向きです。

単純に HTML や CSS の学習用には、1ページ完結のページが良いと思います。
いわゆる「ランディングページ」ってやつ。広告をクリックして飛ぶ先のページです。

でもまあ、自分が好きなサイトのソースコードを見るのがおすすめ。
サイトの内容に興味があった方が、じっくり見ることができますから。

あくまでも学習のため。流用は違法です

ウェブページを公開するときには、作り手もソースコードを読まれることは わかってるんですが、それを流用されるのは別問題。
ソースを見たりローカルに保存まではOKですが、流用はNGです。
保存したものを別のサーバにアップして運用したり、プリントして使用するなどは、著作権法上の犯罪です。（当たり前だけど念のため）

ソースを見て、良いところを真似させてもらったり、見たことがないコードがあったら調べて学習するためだけに使わせてもらおう。
これなら受講料タダだし。ヘタな本を買うより、実践的な教材がウェブ上にあるよ。
（ただし、時間がないときは書籍の購入もオススメします。自己流での学習は時間がかかるから）

ブラウザの「Web開発ツール」も勉強になります

CSSがどう効いているか、値を変えたりして確かめるなら、ブラウザの「Web開発ツール」のほうが手っ取り早いかもしれません。

「Web開発ツール」については、「はじめてのCSS」カテゴリーの
（ちょっとメモ）Web開発ツールでCSSがどう効いているか確認しよう
で詳しく書いていますので、ご覧ください。

次回予告

次回は、画像ファイルの種類について。「GIFとJPEGの違い」などをまとめます。
ウェブで使う画像の種類を知っておくと便利です。