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

最終更新日:2017年10月31日  (初回投稿日:2011年05月12日)

たいがいのブラウザは、ソースを表示する機能があります。
サイトを構成している 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の違い」などをまとめます。
ウェブで使う画像の種類を知っておくと便利です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.