＜＜第12回：ネットワークの電話帳【ホスト名・DNS・名前解決・再帰問い合わせ・DNSリゾルバ・リソースレコード・ルート・キャッシュ・DHCP・DHCPクライアント】
この記事のポイント
- Web サイトはWebサーバアプリケーションで公開しているWebページの集まり
- WebページはHTMLファイルとして作成されていることが多い
- 「Webサイトを見る」とは、WebブラウザとWebサーバアプリケーション間でWebページのファイルを転送すること
Webサイトはどのようにできているか？
Webサイト
Webサイトとは、Webサーバアプリケーションが公開しているさまざまなWebページの集まりです。Webサイトをつくるには、WebサーバにWebサーバアプリケーションをインストールして、公開するWebページを決める必要があります。そして、WebページはHTML ファイルとして作成していることが一般的です。
Webサイトの構成
Webサイトを見るとは？
「Webサイトを見る」とは、Webサイトを構成するWebページのファイルをWebサーバアプリケーションからWebブラウザに転送して表示することです。
Webサイトを見る
- Web ブラウザでWebサイトのアドレスの入力や、リンクをクリックすると、Webサーバアプリケーションヘファイル転送のリクエストを送信します。
- Webサーバアプリケーションは、リクエストされたファイルをリプライとして送り返します。
- Webブラウザで受信したファイルを表示することで「Webサイトを見る」ことになります。
Web サイトを見る際のWebブラウザとWebサーバアプリケーション間のWebページファイルの転送は1回で完結するとは限りません。必要ならば複数回のファイル転送を繰り返します。そして、Webページファイルの転送に利用するTCP/IPのアプリケーション層プロトコルはHTTPです（※1）。HTTPはトランスポート層にTCPを利用し、インターネット層にはIPを利用しています。アプリケーション層からインターネット層までのプロトコルの組み合わせは、WebブラウザもWebサーバアプリケーションも同じです。最下位のネットワークインタフェース層のプロトコルは同じものを使う必要はありません。
（※1）暗号化する場合はアプリケーション層プロトコルとしてHTTPSを利用します。
Webページをつくる
次の項目のポイント
- HTMLファイルを作成するためにHTMLを利用する
- HTMLタグで文書の構造やリンク、見た目を決められる
WebページはHTMLファイルでつくられる
WebページをつくるHTMLファイルのHTは Hyper Text (ハイパーテキスト）の頭文字です。「ハイパーテキスト」とは、複数の文書を関連づけて相互参照できる文書です。
ハイパーテキスト
そして、HTMLのMLはMarkup Languageの略で、日本語ではマークアップ言語です。マークアップ言語とは、文書の構造を明確に表現するための言語です。マークアップ言語によって、文書のタイトルや見出し、段落、箇条書き、他の文書からの引用などの構造を明確にすることで、コンピュータでの文章構造の解析が簡単にできるようにしています。
見た目を決めるHTMLタグ
HTMLでは文書の構造やリンク、文字の大きさやフォントなどの見た目を決めるためにHTMLタグを利用します。HTMLタグには開始タグと終了タグがあり、セットで利用します。開始タグは文書の要素を「＜＞」で囲み、終了タグは「＜/＞」で囲みます。開始タグと終了タグで要素を囲んでいくことを「マークアップする」といいます。タグは「目印」という意味です。「この部分はこんな要素の内容ですよ」という目印をつけるのがマークアップという言葉の意味です。
例えば、「ネットワークのおべんきょしませんか？」というタイトルをあらわすHTMLタグは以下のようになります。
<title> ネットワークのおべんきょしませんか? </title>
この場合、開始タグ＜title＞と終了タグ＜/title＞で囲まれている「ネットワークのおべんきょしませんか？」は、title要素です。「この文書のタイトルは『ネットワークのおべんきょしませんか？』ですよ」とマークアップしているので、Webブラウザのウィンドウやタブの部分に「ネットワークのおべんきょしませんか？」と表示されます。
HTMLタグの例
Webページの見た目を決める
次の項目のポイント
- スタイルシートでWebページのデザインを決められる
- スタイルシートを利用すると、Webページのデザインを簡単に変更できる
CSS（スタイルシート）
Webページの見た目も大事
Webページを見るのは人間です。Webページを見ているユーザに、Webページで伝えたいことを伝えるには、見た目も大事な要素です。例えば文章中で大事なポイントは色を変えたり太字にするなど、見た目を工夫することで伝わりやすくなります。
HTMLタグでWebページの見た目を決めることもできます。例えばHTMLタグのfont要素は、文字のフォントの種類やサイズを決められます。ただ、その都度、フォントを指定するのは非常に面倒です。
Webサイトは複数のWebページ（HTMLファイル）から構成されるので、フォントを変更するときにはすべてのWebページで変更しなければいけません。これは非常に手間がかかります。そのため、現在ではフォントなどの文書の見た目をスタイルシートで別に定義することが一般的です。
スタイルシート（CSS）
スタイルシートとは、文書のレイアウトや文字のフォントや色といったWebページのデザインについて定義するための仕組みです。スタイルシートを記述するためにCSS（Cascading Style Sheets）と呼ばれる言語があります。（※2）
スタイルシートはHTML ファイル内に記述することもできますが、たいていは、HTMLファイルとは別にファイルを作成します。HTMLァイル自体は文書の見出しや段落といった構造とその内容だけを記述しておいて、見た目はスタイルシートを読み込むというように、文書の構造と見た目を分離させます。
スタイルシートの概要
スタイルシートを使うと、Webページのデザインを簡単に変更できるようになります。Webページはメインのコンテンツ以外に、ヘッダーやフッター、メニューなどいろんなコンテンツで構成されています。Webページを構成するコンテンツのレイアウトを変更したいときには、スタイルシートを変更すればよいだけです。
ページデザインの変更例
（※2）CSSのことを単にスタイルシートと称することもよくあります。
＞＞第14回：Webサイトのアドレス【URL・スキーム・HTTPリクエスト・メッセージヘッダ・エンティティボディ・HTTPリクエスト・HTTPレスポンス・バージョン・ステータスコード・説明文】