[14-1] ブラウザでソースを見る(ソースを見て学習しよう)

最終更新日:-0001年11月30日  (初回投稿日:2011年05月12日)

「ブラウザでソースを見る」ことは、とてもためになります。
ウェブサイト上の、HTML、CSS、JavaScriptなどの各ソースは、
ブラウザで簡単に見る事ができるようになってます。

良いサイトのHTMLソースは勉強になります

良いサイトのソースをよく読むことで、
「知らなかった効率のいい書き方」とか「新しいタグの使い方」などを学べます。
ここでわからない要素などはその都度検索し、資料のURLをブックマークして蓄積していきます。
この方法は、ハウトゥー本なんかを読むよりずーっと手っ取り早いし、身に付く(と思います)。

優れたサイトは、ソースがシンプルで効率がよく、洗練されています。
また、アクセシビリティに関しても、よく考えられていて勉強になります。

★アクセシビリティについての詳細は「[12-2] なんでHTMLとCSSはセットなの?」で。

あくまでも学習のために読みます。パクリは違法!

今日の記事で勘違いが起きないように、念のため書いときますね。

ソースを読んだりローカルに保存するところまではOKですが、流用はNG ! ですよ。
(これを読んでくださってるみなさんは、そんなこたぁわかってると思うけど、一応。)

ブラウザは、キャッシュを保存します。読み込み速度を速める目的で。
(何度も同じページを見ると、初めて見た時より速く表示されるのはこのため。)
ですから、作り手(アップするほう)も、
キャッシュデータがビジタのローカルディスクに保存されるのを承知してる。

そして、ウェブページを公開するという事は、ソースを公開するという事なので、
作り手も、ソースを読まれることは、公開時にわかってるんです。

ですが、その「データ」を流用するってのは、別問題!
例えばビジタが自分のサーバにそのままアップしたり、
プリントアウトして使用したりするのは、著作権法上の犯罪です。

あくまでも「学習」目的で見せていただく姿勢で!

ソースを読ませてもらって
「は〜んなるほど。これはうまい方法だなー!こうやってやるんだー!」って時があります。
この「うまい方法」を真似る。これが学習。
尊敬と感謝を込めて、良いところを真似させていただく。わけです。
(だって受講料タダですから!「ほんっとお世話になります… <(_ _)> 」って気持ちでね。)

ブラウザでソースを見る方法です

ほとんどのブラウザは、メニューバー(画面上のブラウザメニューのあるところ)の「表示」を
プルダウンして「ソースを見る」メニューを選びます。
各ブラウザのメニューを調べてみました↓お使いのブラウザのメニューを確認してみてください。

IE 表示 → ソース
Firefox 表示 → ページのソース
Google Chrome 表示 → 開発/管理表示 → ソースを表示
Apple Safari 表示 → ソースを表示

下の画像は、アップルのサイト(http://www.apple.com/jp/)のソースを見ているところ。
MacのFireFox3.6の画像ですが、ほかのプラットフォーム、ブラウザでも似たようなものです。
[1] このように「表示」からプルダウンして「ページのソース」を選択すると…

メニューバーの表示からプルダウンしてソースを選択
クリックで画像が拡大します(別ウィンドウ)

[2] 別ウィンドウでページのソース(HTMLソース)が開きます。
別ウィンドウで開いたソースをザーッと読んでみましょう。
自分が探している要素(タグ)が使われていたり、構造をよく調べてみたいなと思ったら
自分のハードディスクに保存しましょう。

★下記は、表示されたHTMLソースで、外部CSSのパスをコピーしているところです。
HTMLに読み込ませている外部ファイルも、<head>部にリンクのパスがありますから、
それをコピーしてブラウザで表示させられます。([3]で説明します。)

外部CSSファイルのパスをコピー
クリックで画像が拡大します(別ウィンドウ)

[3] 外部CSSを表示させます。
先ほどコピーしたパスを、ブラウザで新規ウィンドウを開き、URLを書く欄にペーストし、
リターンキーを押すと、下の画像のようにCSSソースが表示されます。
CSSはHTMLソースではないので、ブラウザのウィンドウでそのまま表示できます。
これも先ほど保存したHTMLと同じところに保存しましょう。

外部CSSを表示させる
クリックで画像が拡大します(別ウィンドウ)

ハードディスクに保存してじっくり読ませていただく

自分のハードディスクに保存する理由は、じっくり構造の学習をするためです。
保存したHTMLファイルをテキストエディタやDreamWeaverなどの編集ソフトで開き、
外部CSSファイルのパスを、自分のHDD上のパスに書き換えて読み込ませます。

このとき、画像は保存してませんから、画像無しの状態です。
画像が無いと構造がわからないときは、上記の要領(パスをコピペして新規ウィンドウで表示し、ローカル保存する)で画像もハードディスクに保存しましょう。

ただし、このようにウェブサイトから取ったファイルは、保存するところまでは許されますが
それを自分のものとして使用するのはNGですよ。
しつこいようですが、くれぐれも。

で、ソースのどこがどの表示部分になっているのか、よく読んで確かめます。

ソースを読むだけではわからないHTMLタグやCSSがあったりしたときは、
ソースをちょっと編集してみて、プレビュへの影響を見てみます。

私がよくやるのは、コメントタグ(<!-- と -->)で特定の部分を囲み、無効にしてみる方法。
「これかな?」と思うタグをコメント化して無効にし、プレビューでどこが変化するか確認。

★HTMLのコメントタグについての詳細は「[8]コメントを入れよう」で。

外部CSSファイルも同じようにソフトで開き、コメントタグ(/* と */)で囲んで無効にし、
HTMLをプラウザプレビューして、どこに影響を与えていたか確認します。

★CSSのコメントタグについての詳細は「[12-1] CSSを外部ファイルにしよう」で。

巨大サイトでなく、こじんまりしたサイトのソースを見ましょう

巨大なポータルサイトやECサイトは、構造が複雑すぎて、かえって混乱します。
学習用には、ちょっとこじんまりしたサイトが良いと思います。

私はデザイン会社や服飾ブランド系サイトが、シンプルで勉強になるものが多いように思います。
このようにジャンルを決めて検索したり、自分が好きなサイトのソースを見るのがおすすめ。
サイトの内容に興味があった方が、構造を理解しやすいですよね。

次回予告

いかがだったでしょうか。
「ブラウザでソースを見る」と、とっても勉強になりますので試してみてくださいね。

次回は、これも早めに説明しとこうと思っていた「GIFとJPEGの違い」をまとめましょう。
またHTML要素と違いますが(汗;)
ウェブで使う画像の種類と、どういう時にどの画像形式を使うのがベストかを知っておくと便利です。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2017/09 | 10
- - - - - 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.