【当ブログ管理人からのお知らせ】


訪問型パソコンサービス「誰にでもパソコン」は、日頃パソコンを御使いの中でのちょっとしたお困り事を解決します。

以下の3つのサービスでパソコンのお困り事にお応えします。

サービス1<パソコン設定サービス>
パソコンの初期化やインターネットの接続、プリンターの接続など、面倒で手間が掛かる作業を行います。

サービス2<ピンポイントレクチャー>
「パソコンについてここだけを知りたい」
「ワード・エクセルは使った事が無いが簡単な文書や集計表を作る方法だけを知りたい」
「デジカメ写真をDVDに保存する方法を知りたい」
等の様なピンポイントな御要望についてレクチャー致します。

サービス3<訪問パソコンレッスン>
パソコンやワード、エクセル、パワーポイント、アクセス等について一から身に付けたい方の為のマンツーマンレッスンです。
パソコン教室の様な授業回数や期限は設けず、納得頂けるまでレッスンを受けて頂けます。

パソコン教室、カルチャースクールでパソコン講師を務めた経験のある私が、上記3つのサービスでパソコンのお困り事を解決致します。

「誰にでもパソコン」の詳細は、こちらのホームページを御覧下さい。(担当者プロフィールも掲載しております)



PC教室では教えない豆知識:あらためて考えてみる「ブラウザって何?」

WebページやSNS、動画サイトなどのいわゆる「コンテンツ」と呼ばれるものを見る際に極当たり前の様に下のアイコンをクリックしていますが、この操作により開かれるブラウザについては特に意識する事は無いと思います。

また、パソコン初心者の方にはブラウザを開いていると言う意識すら無く、ただ単にWebページを開いている言う認識しか持って無い方もいるかと思います。

確かに余計な事を意識せずにパソコンを使えると言うのは良い事であり、それがパソコン普及の要因でもあります。

しかし私たちがコンテンツを見る事が出来るのは、黒子に徹しているブラウザがあればこそなのです。

えっ?「ブラウザなんて、ただ単にコンテンツをパソコンに表示しているだけだろ?」ですって?

いえいえ、とんでもない。

そこで今回は、パソコンの中で一番お世話になっているブラウザが黒子として一体何をしているのかについてお話しします。

それでは続きをどうぞ!
【コンテンツの真の姿は複雑怪奇!】

下の画像は、皆さんお馴染みのYahooJapanのWebページです。

さてパソコンでWebページやSNS、動画サイトなど色々なコンテンツを見る時、ブラウザはインターネット上にあるこれらコンテンツをただ単にそのままパソコンに表示しているだけとだ思っていませんか?

実はコンテンツの本当の姿と言うのは、かなり複雑怪奇で、そのままではパソコン画面には表示出来ないのです。

では、次はコンテンツの真の姿をご自分のパソコンで体験してみましょう。

Yahoo! JAPAN



①ブラウザがInternet Explororの場合:

御使いのブラウザーがInternet Explororの場合は、下の画像の様にブラウザに表示されているコンテンツ上の何も無い場所で右クリックし、メニューの中の「ソースの表示(V)」をクリックします。

IEのソース表示


②ブラウザがFirefoxの場合:

御使いのブラウザーがFirefoxの場合は、下の画像の様にブラウザーに表示されているコンテンツ上の何も無い場所で右クリックし、メニューの中の「ページのソースを表示(V)」をクリックします。


Firefoxのソース表示


すると、別のウィンドウが開き、下の画像の様な物が表示されます。

Webページの正体


如何ですか?

これが普段見ているコンテンツの本当の姿なのです。

普段見ているWebページの本当の姿がこんなに複雑で訳の分からないものなのか?と思いませんか?

これは「HTMLソース」と呼ばれる、いわばコンピュータ・プログラムなのです。

コンピュータ・プログラムと聞くと何だか小難しそうだと敬遠される方もいると思いますが大丈夫です。

このブログのお話しは誰にも分かり易い内容ですので、もう少しお付き合い下さい。

HTMLソースの中身は「HTML言語」と言うコンピュータ言葉で命令が書いてあり、この命令はブラウザーが理解出来る命令なのです。

ソースとは英単語で「Source」で、「」とか「根源」と言う意味です。

つまり、HTMLソースとは、HTMLと言う言葉で書かれたコンテンツの源と言う意味です。

それではHTMLソースには、どんな事が書かれているのかについてお話しします。
※今開いたHTMLソースはブラウザの新しいウインドウに表示しますので、新しいウインドウのタブを閉じればHTMLソースも
  閉じます。


【HTMLソースはコンテンツの構造とレイアウトとデザインの三位一体の設計図】

先程ご覧頂いたHTMLソースには以下の様な事が書かれています。

1)コンテンツに表示する文字
2)文字書式(文字のサイズ、色、太字、斜体、下線)
3)画像や動画、音声の保存場所
4)画像や動画のサイズ
5)画像や動画の表示位置
6)表の書式(セルのサイズ、枠線の太さ、枠線の色)
7)表の縦横のセルの数
8)文字や画像をクリックした時のジャンプ先のアドレス
9)ジャンプ先のページの表示方法(ジャンプ先のページを今のウインドウに表示するか、新しいウインドウに表示するか)

この様にHTMLソースには、「コンテンツに何を表示し、リンク先がどこなのか」と言う構造についての情報と、それらをコンテンツ上のどこに表示し、どの様なデザインで表示するかと言う、いわばコンテンツの構成とレイアウトとデザインについての設計図が書かれているのです。

更に3)で気付かれたかと思いますが、HTMLソースはあくまでも設計図である為に、動画や音声はHTMLソースとは別に存在します。

つまり普段私たちが見ているコンテンツとは、HTMLソースと動画と音声がバラバラに存在しているものなのです。
※コンテンツに表示する文字は、HTMLソースに記します。
【ブラウザはコンテンツのシェフ】

HTMLソースと動画や音声は、それぞれがバラバラに存在していますが、共にWebサーバーと言うコンピューターに保存されています。

しかしこれは料理で例えれば、レシピ(HTMLソース)と材料(動画、音声)があるだけに過ぎず、シェフが居なければ肝心の料理(コンテンツ)は出来ません。

そこで登場するのがブラウザです。

下のイラストの様にブラウザは、あの複雑怪奇なHTMLソースを解釈し、パソコン画面上の指定した位置とサイズで動画や画像を配置したり、指定した色と大きさで文字を表示して、普段私たちが見ているコンテンツとして組み立ててくれるのです。

ブラウザの役目

ブラウザがHTMLを解釈し、組み立てる事を「レンダリング」と呼びます。

世の中には数多くのブラウザがあり、コンテンツを見る時の便利機能やレンダリングの速さがそれぞれ異なり、それがブラウザの特徴となっています。

因みに私は、以前はInternet Explororを使っていましたが、レンダリングの速さとブラウザに追加出来る拡張機能の豊富さで
今はFirefoxを使っています。

皆さんも色々なブラウザを試して、自分に合ったブラウザを見つけてみて下さい。

【デザイナーの真打:CSSの登場】

ところで現在の企業のWebページやブログ、ツイッター、フェイスブック等のコンテンツは情報の内容だけで無く、デザインや印象も重要な要素となっていて、イベントや新商品のコンセプトに合わせてデザインを変える事があります。

従来はHTML言語だけで、構造(コンテンツに何を表示させるかの指定)とデザインやレイアウトの全てを設計していましたが、現在はHTML言語では構造だけを設計し、デザインやレイアウトは「CSS」と言う言語で設計し、それぞれが適材適所の役割分担をしています。

その理由は以下の通りです。
・CSS言語でレイアウトやデザインを設計すると、同じレイアウトやデザインを適用した箇所は一括で変更が出来、効率的な
 コンテンツのメンテナンスが出来ます。

・HTML言語で構造だけを設計すれば、HTMLソースの内容がシンプル且つボリュームも少なくなり、HTMLソースのメンテナン
 スや改良時にHTMLソースの内容を把握し易くなり、パソコンでのコンテンツの表示も軽くなります。

・パソコン、携帯電話、スマートフォンの各端末毎に異なるデザインとレイアウトのコンテンツを作る時、HTMLソースを構造だけの
 設計にして置けば、HTMLソースを全ての端末で共有出来るのでコンテンツの開発やメンテナンス、更新が容易になります。


以上、多少難しいお話しになってしまいましたが、HTMLとCSSとブラウザの関係を建築に例えると下の様なイラストになります。

HTMLとCSSとブラウザの関係
ブラウザは建築家

企業のウェブページは素人が作るウェブページとは比較にならない程にデザインが洗練され、知りたい情報が直ぐに見つかり易くなっていますが、この背景にはHTML言語とCSS言語を熟知し、デザインセンスに長けた「ウェブ・デザイナー」と言うプロフェッショナルの方たちの活躍があればこそなのです。

私たちが日頃ウェブページやブログを閲覧し、楽しく有益な情報を得る事が出来るのもウェブ・デザイナーの方々の日々の努力と、その方たちが作り上げたコンテンツを忠実にパソコン画面上に再現するブラウザーのお蔭なのです。

ブログランキングに参加しています!
ランクアップに御協力下さる方は、下のアイコンをクリック願います!


訪問型パソコンサービス「誰にでもパソコン」は、日頃パソコンを御使いの中でのちょっとしたお困り事を以下の3つのサービスで対応致します!

パソコン設定サービスパソコンやインターネットの設定が分からない方に!

ピンポイントレクチャーパソコンやワード、エクセルのここだけを知りたい方に!

訪問パソコンレッスン一からパソコンやワードを身に付けたい方に!

当ブログ管理人である、私が御客様の元へ直接御伺いし、対応させて頂きます!

詳しくは、こちらのWebページをご覧ください!
スポンサーサイト

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://darenidemo.blog.fc2.com/tb.php/45-3dd2ec9f