中学技術 Webページの仕組み｜HTMLとCSSの役割2つを図でわかりやすく

はじめに

スマートフォンやパソコンで、毎日いくつものページを見ていますよね。
でも、そのページがどうやって画面に表示されているのか、考えたことはありますか。
技術の授業でこのしくみを知らないまま作業を始めると、思うような画面にならず、手が止まってしまうことがあります。

Webページには、実は仕組みが2つ重なっています。
ページの中身を組み立てる仕組みと、見た目を整える仕組みです。
この2つを分けて理解すると、画面づくりの迷いがぐっと減ります。

さらに、見た目が整っているだけでは、使いやすいページにはなりません。
ボタンの大きさや余白の取り方といった、使う人への配慮も必要になります。
この記事では、ページが表示されるまでの流れ、中身と見た目それぞれの仕組み、そして使いやすい画面をつくる工夫の3つに分けて解説します。

Webページができるまで｜3つの仕組みで整理する

結論からお伝えします。
Webページは、表示までの流れ、中身の骨組み、見た目を整える仕組みの3つが重なってできています。
どれか1つが欠けても、思ったとおりの画面にはなりません。
まずは全体の地図を頭に入れてから、1つずつ見ていきましょう。

ポイント1：ページが表示されるまでの流れ

ページがなぜ画面に表示されるのか、はっきり説明できる人は意外と少ないです。
実は、たった一往復のやり取りで、画面は表示されているんです。

Webページは、ブラウザが読み解く文書のこと

Webページというのは、文字や写真がまとまった、1つの文書のことです。
この文書を、ブラウザというアプリが読みこんで、わたしたちの目に見える形に組み立てて表示しています。
ふだん何気なく見ているニュースサイトも、学校の連絡ページも、いま読んでいるこの記事も、しくみとしてはすべて同じです。
文書の中身は、最終的には0と1の数字の並びとして保存されていて、それをブラウザが文字や画像に変換して見せてくれているんですよ。
だからこそ、スマートフォンでもパソコンでも、同じページが同じように表示されるんです。

つまりWebページとは、特別な魔法で映し出されているものではなく、決められたルールに従って組み立てられた、ふつうの文書なんです。
そのルールさえ分かれば、自分の手でもページを組み立てられるようになります。

ブラウザが「見たい」と伝えるリクエスト

ページを見たいとき、わたしたちはアドレスを入力したり、リンクをクリックしたりしますよね。
その瞬間、ブラウザは、ページのデータを持っている場所に向けて、「このページを見せてください」という求めを送っています。
この求めのことを、リクエストと呼びます。
リクエストには、どのページが欲しいのかという情報が正確に含まれていて、世界中のたくさんのサーバの中から、正しい相手にきちんと届くようになっているんですよ。
もし目的のページが見つからないと、エラーの画面が表示されることもあります。

リクエストを受け取る側は、サーバと呼ばれるコンピュータです。
サーバは、たくさんのページのデータを保管していて、リクエストが届くたびに、該当するデータを探し出しています。

サーバが返すレスポンスで画面に表示される

サーバは、求められたページのデータを見つけると、それをブラウザへ送り返します。
この送り返す動きのことを、レスポンスと呼びます。
ブラウザは受け取ったデータを、決められたルールにそって組み立て直し、文字や写真、ボタンなどが配置された画面として表示します。
この「求めて、返ってくる」一往復のやり取りが、ページが表示されるまでの正体なんですよ。
わたしたちがリンクを1回クリックするたびに、この一往復が、目に見えないところで毎回くり返されていて、わたしたちはその速さにまったく気づいていないんです。

この一往復は、わたしたちが感じるよりずっと速いスピードで行われています。
だからこそ、ボタンを押した瞬間に画面が切り替わるように見えるんですね。

表示の流れが分かったところで、次は届いたデータの中身を見ていきましょう。
ここからが、ページ作りの本題です。

ポイント2：HTMLとCSS、2つの仕組みの役割分担

届いたデータの中身は、実は2種類の役目に分かれています。
骨組みを作る仕組みと、見た目を決める仕組みです。

HTMLは、ページの骨組みを作る仕組み

実習で紙に下書きをするときも、考え方は同じです。
どこに見出しを置き、どこに文章を入れ、どこに写真を置くか、先に骨組みを決めてから中身を書いていくと、迷わず進められますよ。

CSSは、色や配置など見た目を決める仕組み

骨組みができたら、次は見た目を決める仕組みの出番です。
文字の色を変えたり、大きさを変えたり、背景の色を指定したりできます。
さらに、部品と部品の間の余白や、横に並べるか縦に並べるかといった配置まで、細かく指定することができるんですよ。
画面の幅に合わせて形を変える指定もできるので、スマートフォンでもパソコンでも見やすいページを作れます。
同じ見出しでも、大きく太い文字にするか、細く小さい文字にするかで、読み手に与える印象がまったく変わってくるんですよ。

同じ骨組みでも、見た目を決める仕組みの指定を変えるだけで、まったく違う印象のページになります。
色の組み合わせひとつで、読みやすさも大きく変わってくるんですよ。

骨組みと見た目を分けて作るとメンテナンスしやすい

骨組みを作る仕組みと、見た目を決める仕組みを分けて作っておくと、あとから直すときにとても楽になります。
見た目だけを直したいときに、中身の文章や写真をさわらずに、色や配置の指定だけを書き換えればすむからです。
反対に、中身の文章を直したいときも、見た目の指定を気にせずに書き換えられます。
役割を分けておくことは、作業の手間を減らす、とても大切な工夫なんですよ。
もし2つを混ぜて作ってしまうと、少し直したいだけでも、ページ全体を見直さなければならなくなってしまいます。

この考え方は、Webページだけでなく、ノートの取り方にも応用できます。
まず内容の骨組みを箇条書きで作ってから、あとで色ペンで見た目を整えると、整理がしやすくなりますよ。

骨組みと見た目が分かったところで、最後は使う人にとっての使いやすさを考えていきましょう。

ポイント3：使いやすい画面（UI）をつくる工夫

見た目が整っているだけでは、使いやすいページとは言えません。
使う人がどう操作するかまで考えて、はじめて完成するんです。

ボタンは押しやすい大きさと位置に

大事なボタンほど、目立つ位置に置くのもポイントです。
ページの中でいちばん押してほしいボタンを、大きく、見つけやすい場所に配置してみてください。

紙で試作してから、公開前に確認する

完成が近づいてきたら、公開前の確認も忘れずに行いましょう。
文字の大きさや色は、誰が見ても読みやすいかを確かめてください。
写真を使うときは、使ってよい写真かどうか、ルールを守ることも忘れないでくださいね。

余白を使って情報を整理する

余白を上手に使うことも、大切な工夫のひとつです。
文字と文字の間、部品と部品の間を少し空けるだけで、画面はぐっと読みやすくなります。
反対に、情報を詰めこみすぎると、どこから読めばよいのか分からなくなってしまいます。
情報のかたまりごとに区切って配置すると、見る人が自然と内容を追いやすくなるんですよ。
教室の掲示物でも、詰めこみすぎたものより、余白のあるもののほうが目に入りやすいのと、同じ考え方なんです。
文字の大きさをそろえることも、読みやすさにつながりますよ。

余白は、何もない「むだなスペース」ではありません。
情報と情報の関係を伝えるための、大切な役割を持っているんです。

テスト前の確認リスト

テストの前日に、全部を読み返す必要はありません。
確かめるのは、下の5つだけで足ります。
覚えているかどうかではなく、自分の言葉で説明できるかどうかで確かめてみてください。
教科書を閉じた状態で言えたら、大丈夫です。
もし1つでも止まったら、その項目のところだけこの記事に戻ってきてください。

よくある質問

テストに出るのはHTMLとCSSのどちらですか

どちらも出題される可能性がありますが、いちばん多いのは、それぞれの役割を区別させる問題です。
「この部分はどちらの仕組みが担当しているか」という形で問われることが多くなっています。
骨組みを作るのがHTML、見た目を決めるのがCSS、という一言をしっかり覚えておけば、どちらの形で出てもあわてずに答えられますよ。
用語の意味だけでなく、具体的な使用例を自分の言葉で説明できるかどうかも、あわせて確認しておきましょう。
たとえば「見出しの色を変えたい」という指示は、CSSの役割だとすぐに判断できるようにしておくと安心です。

HTMLとCSS、覚える順番はありますか

先にHTMLから覚えるのがおすすめです。
CSSは、HTMLで作った骨組みに対して見た目を指定する仕組みなので、骨組みがどうなっているかを先に理解していないと、何に色をつけているのか、何を動かしているのかが分かりにくくなってしまいます。
まず骨組みを作れるようになってから、見た目を整える練習に進むと、混乱せずに理解できますよ。
実習でも、まず骨組みだけのページを組み立ててから、色や配置を少しずつ足していくと、失敗が少なくなります。
一気に両方を仕上げようとすると、どこを直しているのか分からなくなりやすいので注意しましょう。

使いやすい画面と、きれいな画面はちがいますか

はい、ちがいます。
きれいな画面というのは、色づかいやデザインが整っている画面のことです。
一方で使いやすい画面というのは、見た目に関わらず、迷わず操作できて、欲しい情報がすぐに見つかる画面のことです。
どんなにきれいでも、ボタンが押しにくかったり、情報が探しにくかったりすると、使いやすいとは言えません。
この記事で紹介した工夫は、どちらも両立させるための考え方なんですよ。
作品を仕上げるときも、見た目のかっこよさだけで満足せず、実際に友達に操作してもらって確かめてみるとよいですよ。

おわりに

今日たどってきたのは、ページが表示されるまでの流れ、HTMLとCSSの役割分担、そして使いやすい画面をつくる工夫の3つでした。
ブラウザが求め、サーバが返す。
骨組みを作る仕組みと、見た目を決める仕組みを分けて考える。
そして、使う人のことまで考えて画面を作る。
この3つがつながると、ページ作りの見え方がまるで変わってきますよ。

最後に一つだけお願いです。
身のまわりのWebページを1つ開いて、どこが見出しで、どこがボタンなのか、探してみてください。
知っているつもりだったページが、少しちがって見えてくるはずですよ。

ご視聴ありがとうございました。
この記事の内容を動画でも解説しています。
ぜひご覧ください。

中学技術【Webページのしくみ】HTMLとCSSの役割をわかりやすく解説

中学技術の授業でつまずきやすいところを、一つずつ動画にしています。
予習や復習に使えそうだと思ったら、チャンネル登録をしておいてくださいね。