Lessonであれば、「index.html 」など HTML ファイルを最初にリクエストすることになるでしょう。Web サーバは要求されたリクエストに応えなければなりません。これを「レスポンス」といいます。つリクエスト／レスポンス

信の仕組みは、サーバとクライアント間のリクエストとレスポンスで成り立っている。

まり、サーバとクライアント（ Webブラウザ）という関係の中で、W e b デ ザ インの 世 界 を 知 るることをレスポンスと呼ぶ。WWWを介したデータ通

1

Word

ファイルを要求することをリクエスト、その要求に答えネットワークを通して必要なファイルのリクエストとレスポンスが繰り返されているのです 図 1 。

HTML ファイルには、単なるテキストだけではなく、写真などの画像ファイルへのリンクなど、さまざまな内容が記述されていWord

CSS

Cascading Style Sheets（カスケーディング・スタイル・シート）の略。HTML には情 報のみを記述し、Webブラウザでの表示といった見た目のデザインやレイア
ウトはこの CSSを用いて指定するのが現在の Web デ

要であればそのファイルをリクエスト、ページのデザインやレイアウトが指定されている CSS（カスケーディング・スタイルシート）が必要であれば、それもまたリクエストするのです。このやりとザイン手法。
Wordます。ブラウザはダウンロードした HTML を解析し、画像が必HTTP

Hyper Text Transfer Protocol（ ハイパーテキスト・トランスファー・プロトコル）の略。ハイパーテキストであるHTMLを転送するためのプロトコル（通信規約）のこと。

りを数回から数十回、ときには数百回と繰り返してはじめて、ブラウザの中に Web ページが表示されます。
例えばブロードバンド回線では転 送 速 度が速いため、このHTTP プロトコルを通じたデータのやり取りは高速に実行されまWhy?: Webサイトの表示時間についてすが、携帯電話やスマートフォンのような電話回線を経由したア

かつてはインターネットへの接 続 速 度も遅く、Web ページの表示が完成するまでに 8 秒 〜 10秒以内だと大丈夫ともいわれていました。しかし、最近ではブロードバンド回線の普及もあり、3 秒以内に表示が完成しないと遅いとされています。この表示時間は当然環境によって変わるものですが、表示に時間がかかるようではせっかくの訪問者がブラウザを閉じてしまうかもしれません。それでは、せっかくの Web サイトを見てもらうこともできません。

図1

クセスではネットワーク帯域が不安定であったり、転送速度が遅いため表示までに時間がかかることになります。Web サイトの表示に時間がかかりすぎると、目的を持ってアクセスしてきた閲覧者が途中でブラウザを閉じてしまう、といった問題も起こります。魅力的な Web サイト制作を行うには、ブラウザでの見え方だけではなく、このような実際の転送の仕組みも考えなければなりません。

Webページが表示されるまでの仕組み

DNS

192.168.1.101 だよブラウザ に 入 力 された

example.com はどこ？
index.html

URI から接 続 先のホスト

httpd192.168.1.101 へ
Browser

ServerSUMMARY

まとめ名をIP アドレスに変換し、目的地のサーバに接続してファイルをリクエスト、レスポンスが返される( 1 ) ドメイン名を IP アドレスに変換する仕組みが DNS( 2 ) サーバとWebブラウザ間ではリクエストとレスポンスが繰り返され、Web サイトが表示される

13

le1-02_12-13.indd 13

14/10/11 17:36

Lesson 3

15 文書同士をつなげるa要素
Web サイト同士や、あるいは Web サイトの中でページとページをつなげる役割を果たすのが a 要素です。
ここでは、a 要素の使い方やリンク先の設定の方法を解説します。

THEME

テ ーマ

ページ同士や文章間のリンクを設定するには？

リンク先を新しいウィンドウ（タブ）で開く指定

HTML5 でのリンクの扱い

a 要素の機能と役割
インターネット上にはたくさんの Web サイトが存在しており、Web サイト同士や Web ページ間でつながりを持っています。そのつながり（リンク）を作るためのものが「a 要素」です。世界中Worda要素

a は「 anchor 」の略で、「船の錨（いかり）」や「つなぎとめる」の意味がある。

Why?: Webサイトは a要素でつながるの Web サイトがこの a 要素でリンクされ、情報の行き来させる上a 要素は Web ページ同士をつなぐ、HTML の中で非常に重要な役割を果たしています。

でも最も重要な要素のひとつです。リンク元とa 要素はページ同士のリンクや、文章間のリンクに使用するインライン要素です。< a > 〜 < /a >で囲まれた範囲が「ハイパーリリンク先がつながることで、Web ページ同士で情報の橋渡しがなされ、ユーザーも行き来できるようになります。

ンク」として機能し、「href 属性」で参照先（リンク先）を指定します。href 属性には Web ページ以外にも、画像などのオブジェクト、メールアドレスなどを記述することができます。参照先へのパスを指定する方法には、いくつかの書き方があります 図 1

図1

リンク先を絶対パスで指定する場合< a href="http://w w w.magical-remix.co.jp/" >マジカルリミックス公式サイト< /a >「 http:// 」から始まるURLを記述する

図2

図2 。

Wordhref属性

href「 hypertext reference 」の 略 で、
「 参 照 するWeb ページ」というような意味。リンク先（参照先）の場所となるファイル名や URLを指定する属性。

リンク先を相対パスで指定する場合

MdNのWebサイト
index.html
company
index.html
ir.html
imagesimg01.jpg
img02.jpg<a href="../index.html"> ホームページ </a>
ひとつ上の階層を指定する場合は「../」から記述<a href="./ir.html">IR 情報 </a>または
<a href="ir.html">IR 情報 </a>
同じ階層を指定する場合は「./」またはファイル名から記述<a href="images/img01.jpg"> 画像で見る </a>
ひとつ下の階層を指定する場合はフォルダ名から記述

リンク元のファイルを基準にして、ひとつ上の階層を指定する場合は「../」から記述する。
同じ階層にあるファイルを指定する場合は「 ./ 」から、またはファイル名を記述。ひとつ下の階層を指定する場合はフォルダ名から記述する

84

L e s s o n 3 - 1 5 _ 文書同士をつなげる a 要素

le3-15_84-85.indd 84

13/06/27 11:13

Lesson

図1

ボックスの構造

contentheight（内容）

border-rightpadding-top

margin-rightpadding

padding-rightborder-top

padding-leftborder-left

margin-top

borderC S S の 役 割とできること

margin-left4

marginwidth
padding-bottom
border-bottom

margin-bottom

図2

ボックスモデルの計算
左右のマージンが10px、左右のボーダーが5px、左右のパディングが10px、横幅が500pxだった場合

10px ＋ 10px ＋ 5px ＋ 5px ＋ 10px ＋ 10px ＋ 500px ＝ 550px
マージン

10px

10pxボーダー

パディング

500px

横幅

ボックスの幅

10px

10px

5px

5px

SUMMARY

まとめ( 1 ) すべての要素に「ボックス」の各領域がある( 2 ) 要素の幅、高さの計算はボックスモデルに基づいて行う( 3 ) 背景色、背景画像はパディング、ボーダーの領域まで有効

le4-18_152-153.indd 153

14/10/11 17:39

LessonRGB はコンピューターのディスプレイの発光を利用して色を表

Point _
RGB ではレッド、グリーン、ブルーの 3 色の光を掛現（加法混色）します。
「値が低い＝発光していない状態」では色け合わせてさまざまな色を表 現します。R、G、B そ
256 段階の明るさで色を表現できます。0 がもっとも6は暗く、「値が高い＝最も発光させる」と色は明るくなります。RGB

れぞれを数 値で 表すことができ、0 から 255 までののすべてを最も明るい色で掛け合わせた場合は白になり、逆にす暗く、255 がもっとも明るい状態となります。また、R、べてを最も暗い色で掛け合わせると黒になります 図 2なります。数値が小さいほど暗いグレーに、数値が大きいほど明るいグレーになります 図 3 。

W e b サ イトを 表 現 する色G、B のすべてを同じ値にすると、グレー（無彩色）に図3 。

一方、CMYK は絵の具を掛け合わせていくような表現（減法混色）です。CMY の 3 色は色を重ねるごとに色は暗くなり、3 色Wordを等量で混ぜ合わせるとグレーになります。CMY の 3 色の数値

無彩色

無彩色とは、白、灰色、黒を指す。彩度のない色のを最大まで上げた場合でも鈍い濃色（黒に近いグレー）までにしことをいう（ 212 ページ、Lesson6-02 参照）。

かならず、これを黒にするために K（黒）を使用します。
Memo _RGB が 0 から 255 までの数値で表されるのに対して、環境にって違う色の見え方

CMYK は 1 から100 までの数値で表されます。

Web サイトはコンピューターのディスプレイや携帯電話の画面などで閲覧します。しかし、これらの画面で表示される色は、その機器を製造しているメーカーやコンピューターの設定の違いなど、個々のユーザー環境に大きく依存します。すべての人が完Why?: 再現される色は十人十色
ディスプレイ画 面で 表 示される色には、コン全に同じ色で見ているかというと、実際はそうでもありません。

ピューターの種類やメーカー、設定など、個々青が赤になるといった極端な違いはありませんが、例えば同じの環境により差があります。ユーザーの環境に大きく依存するということは、すべての環境で「赤」といっても少し暗い印象だったり、くすみがあったりと、環完全に同じものを見せるのは物理的に不可能と境ごとに発色や印象に違いがあるのです 図 4 。

いうことになります。

Web サイトを作ったあとで「色が違う」などのトラブルが発生するケースもあるため、あらかじめ基準となる環境や条件を決めておくとよいでしょう。

図3（無彩色）の表現
RGBでのグレー0255

図40RRGGBB

ディスプレイで表示される色

255

制作者

ユーザー 1

ユーザー 2

RGB（レッド、グリーン、ブルー）すべてを同じ値にするとグレー（無彩色）

同じ色であっても、ユーザーの環境ごとに発色や印象が異なってしとなる

まう

SUMMARY

まとめ( 1 ) ディスプレイ表示を目的とした場合に使うカラーモードはRGB( 2 ) 印刷物を制作する場合に使用するカラーモードはCMYK( 3 ) ディスプレイや環境の設定などの個体差により、ユーザーごとに見えている色が違う

le6-01_210-211.indd 211

211

13/06/27 11:14