武蔵野個別指導塾の特徴

【情報I】Web ページと情報発信を図解で総まとめ—HTML と CSS の役割・構造と見た目・公開の注意｜武蔵野個別指導塾

公開 2026.10.12更新 2026.10.12武蔵野個別指導塾の特徴高校情報I 単元解説

【情報I】Web ページと情報発信を図解で総まとめ—HTML と CSS の役割・構造と見た目・公開の注意のアイキャッチ武蔵野個別指導塾

HTMLとCSSの役割を、通信の流れと見出し構造の図で整理します。相対パスや文字サイズの例題を解きながら、読みやすさと公開前に確かめる点を学べます。

よくあるのは、祖父母の家の客間で、自分が作った行事案内のWebページを見せたところ、「どこを押せば場所がわかるの」と尋ねられ、きれいに作ったつもりなのに説明が必要になるという場面です。文字を大きくした箇所が見出しとして伝わっていなかったり、写真の中の案内が拡大しないと読めなかったりすると、作り手には明らかな情報でも、読む人には届きません。

Webページを作る学習では、画面の色や形だけでなく、情報にどのような意味を与え、どの順に届けるかを考えます。HTMLは見出しや段落などの構造を表し、CSSは文字の大きさや配置などの見た目を整えます。さらに、ページのデータを受け取る仕組みと、公開してよい情報かどうかの判断も必要です。

この単元の目標は、用語を暗記することだけではありません。ページが表示されないときに調べる場所を絞り、読み手が情報にたどり着けない理由を説明し、安全に発信するための修正案を出せるようになることです。

この単元で身につけること

URL、ブラウザ、Webサーバの役割を区別します。情報の場所を示すもの、受け取って表示するもの、要求に応じてデータを返すものを分けて説明します。
HTMLの要素と属性を読み取ります。見出し、段落、リンク、画像が何を表し、文書のどこに置かれるかを確かめます。
CSSの指定を読み、構造と見た目を分けます。文字を大きくする操作と、見出しとして意味を与える操作の違いを捉えます。
読む人の条件に合わせた確認ができます。文字の拡大、音声での読み上げ、キーボード操作などから、使いにくい部分を探します。
公開前に素材と個人情報を点検します。自分で作ったか、使用条件を満たすか、人が特定される情報を含むかを別々に判断します。

中学校で学んだ情報モラルや、前の単元で扱う情報の構造化は、Webページの制作にもつながります。文章を見出しごとに整理してから装飾を加えると、なぜそのタグや色を選んだのかを説明しやすくなります。完成画面だけでなく、情報のまとまりを言葉で説明できる状態を目指しましょう。

基本の考え方

Webはデータを要求して受け取る仕組みです

Webは、インターネットを通して文書や画像などを利用する仕組みの1つです。インターネットはさまざまな機器をつなぐネットワークであり、Webと同じ意味ではありません。Webページは個々の文書、Webサイトは関連するページなどをまとめたものと考えると区別しやすくなります。コンテンツは、そこで伝える文章、画像、音声、動画などの内容を指します。

ブラウザは、Webページを取得して表示するソフトウェアです。Webサーバは、要求に応じてページなどのデータを提供する役割を持つコンピュータやソフトウェアです。読む側をクライアント、提供する側をサーバと呼びます。これは役割の区別であり、画面の大小やコンピュータの新しさによる区別ではありません。

URLは、Web上の情報の場所などを示す表記です。典型的なWebのURLには、通信方式を表すスキーム、ホストを示す部分、資源を指すパスが含まれます。HTTPSという方式では通信が暗号化されますが、暗号化されていることと、ページの文章が正しいことは別です。アドレス欄を見るときも、通信の状態と内容の信頼性を混同しないようにします。

図1のように、まずブラウザが必要な資源を要求し、サーバが応答を返します。ブラウザは受け取ったHTMLを読み、必要ならCSSや画像を追加で要求します。最後に、それらを組み合わせて画面に表示します。図では順番を追いやすいように通信をまとめていますが、実際には複数の資源を取得することがあります。

Webページは、完成した1枚の画像が必ず送られてくるわけではありません。そのため、文章は見えるのに写真だけが表示されない場合は、画像の場所やファイル名に問題がある可能性があります。一度取得したデータを手元に保存して再利用するキャッシュもあり、毎回すべてを取り直すとは限りません。修正が反映されないときは、保存したファイルと公開先、再読み込みの状態を順に確かめます。

HTMLは内容の意味と構造を表します

HTMLは、文書の構造を記述するためのマークアップ言語です。多くの要素は、開始タグ、内容、終了タグの組み合わせで表します。たとえば <p>受付は入口です。</p> は、受付の案内を1つの段落として表したものです。タグだけでなく、内容を含めたまとまりを要素として捉えると、入れ子の構造を理解しやすくなります。

文書全体を囲む html 要素の中には、文書に関する情報を持つ head と、ページの内容を持つ body があります。head には文書の題名を指定する title や文字コードの指定などを置きます。title はブラウザのタブなどで使われる題名であり、本文に表示する見出しの h1 とは役割が違います。日本語のページでは、html に lang="ja" を付けて文書の言語を示すことも役立ちます。

本文では、h1 が最上位の見出し、h2 がその下の段階の見出し、p が段落です。見出しの数字は文字の大きさを直接指定する数字ではなく、見出しの段階を表します。行事案内全体を h1、その中の「日時」と「持ち物」をそれぞれ h2 にすると、同じ階層の項目だと伝えられます。番号なしの一覧には ul と li、順序のある一覧には ol と li を使います。

属性は、要素に追加の情報を与えます。リンクを表す a 要素では、href 属性に移動先を指定します。<a href="place.html">会場への行き方</a> なら、表示される文字は「会場への行き方」で、移動先は place.html です。移動先の名前を文章に書くだけでは、リンクとしての働きは生まれません。

画像を表す img 要素では、src 属性に画像の場所、alt 属性に代替テキストを指定します。img は終了タグを持たない要素です。すべてのタグを機械的に開始と終了の対にするのではなく、要素ごとの決まりに従います。意味のある画像の代替テキストは、見た目を延々と描写するのではなく、その場面で画像が伝える情報を文章でも伝えるために書きます。

CSSは見た目を指定します

CSSは、HTMLなどの文書をどのように表示するかを指定する言語です。たとえば h2 { color: #1f4e79; } は、h2 要素の文字色を紺色にする指定です。h2 のような対象を選ぶ部分をセレクタ、color をプロパティ、色の指定を値と呼びます。対象、変更する項目、変更後の値に分けて読むと、記号の並びに見えにくくなります。

文字の大きさは font-size、行の高さは line-height、要素の外側の余白は margin、内側の余白は padding などで指定します。CSSを別ファイルにまとめれば、複数のページで共通する見た目を管理できます。ただし、変更したい要素に別の指定が重なっている場合は、どの指定が適用されるかの規則も関係します。「最後に書けば必ず勝つ」とは限りません。

読みやすさを整えるときは、対象の意味をHTMLで決め、その意味に合う見た目をCSSで与える順番が役立ちます。段落を大きな字にしただけでは、見出しの構造はできません。逆に、見出しを小さく表示しても、HTML上の見出しとしての意味は残ります。構造と見た目を分けることは、画面を見ない利用者にも内容を届ける土台になります。

例題で解き方を確かめる

例題1　ページと画像の場所を読み取ります

event フォルダの中に index.html と place.html があり、同じ event フォルダの中の fig フォルダに map.svg があります。index.html から会場のページへ移るリンクと、地図を表示する画像の指定を考えます。ここでは、相対URLの基準を変更する要素は使わないものとします。

基準となる文書を確かめます。今回は index.html を書いているため、通常はその文書がある event フォルダを出発点にします。
移動先のページとの位置関係を調べます。place.html は同じフォルダにあるので、別のフォルダに移動する指定は必要ありません。
画像までの道筋を調べます。先に fig に入り、その中の map.svg を選ぶので、間を / で区切ります。
要素の役割に合う属性を選びます。リンク先には href、画像の取得先には src を使います。場所が同じような表記でも、属性を入れ替えることはできません。

リンクなら <a href="place.html">会場への行き方</a>、画像なら <img src="fig/map.svg" alt="受付は建物の東側入口です"> と書けます。代替テキストは、地図が東側入口にある受付を伝えているという条件での例です。実際の地図が別の情報を伝えるなら、文章もそれに合わせて変えます。

先頭に / を付けた /fig/map.svg は、同じ意味にはなりません。Web上ではサイトのルートを基準にするため、event の中の画像を指せなくなる場合があります。手元で動いたことだけで判断せず、公開先でも同じ位置関係が保たれているか確かめる理由がここにあります。

答え：リンク先は href="place.html"、画像の場所は src="fig/map.svg" です。

例題2　見出しの階層を決めます

「交流会の案内」というページに、「日時」と「持ち物」の2つのまとまりがあり、それぞれに説明文が1段落ずつあるとします。題名と各まとまりに適した要素を選び、見出しと段落がそれぞれいくつあるかを求めます。

文書全体の主題を1つ見つけます。「交流会の案内」が全体をまとめているので、この例では h1 にします。
主題の下に並ぶ項目を選びます。「日時」と「持ち物」は同じ段階なので、両方を h2 にします。先に出てくるから h2、次だから h3 と数を増やすわけではありません。
各項目の説明を段落に分けます。説明は見出しの題名ではないので、両方を p にします。
画面の文字数ではなく、選んだ要素の種類を数えます。見出しは h1 と2つの h2、段落は2つの p です。

図2のように、文書の階層と画面での配置を並べると、同じ階層の見出しが画面では上下に並ぶことがわかります。図の線は情報のまとまりを示すもので、タグのすべての親子関係を表す図ではありません。たとえば段落を h2 の中に入れるという意味ではありません。

要素の並びをPythonのリストにして数えると、次のように確かめられます。これはHTMLを表示するプログラムではなく、今回選んだ要素の個数を確認する短い計算です。

tags = ["h1", "h2", "p", "h2", "p"]
headings = ["h1", "h2", "h3", "h4", "h5", "h6"]
print(sum(tag in headings for tag in tags))
print(tags.count("p"))

出力は順に 3 と 2 です。見出しを正しく付けると、見出し単位で移動する読み方でもページの内容を探しやすくなります。太い文字が3か所あるかを数える問題とは区別しましょう。

答え：全体の題名は h1、2項目はそれぞれ h2、説明は p で、見出しは3個、段落は2個です。

例題3　CSSの指定から必要な高さを求めます

ある段落に font-size: 20px; line-height: 1.5; padding: 12px; を指定します。本文はちょうど3行で、文字の大きさが異なる部分や画像は含みません。上下の枠線はなく、外側の余白を除くとき、段落の表示に必要な高さを求めます。ここでは、各行の高さがこの指定どおりになる単純な場合を考えます。

1行分の高さを求めます。単位を付けない line-height の値は文字サイズに対する倍率なので、20 × 1.5 = 30pxです。
3行分を合計します。内容部分の高さは30 × 3 = 90pxになります。文字そのものの見える輪郭の高さを測る問題ではありません。
内側の余白を加えます。padding: 12px は上下左右に12pxずつ指定するため、高さには上と下の2回分を加えます。
求める範囲を確認します。外側の余白は除く条件なので、90 + 12 + 12 = 114pxで止めます。

Pythonでも、行の高さ、内容部分、余白込みの高さを分けて計算できます。どこで数値が増えるかを追うと、余白を1回しか加えない誤りに気づきやすくなります。

font_size = 20
line_height = font_size * 1.5
content_height = line_height * 3
box_height = content_height + 12 * 2
print(line_height, content_height, box_height)

出力は 30.0 90.0 114.0 です。実際のページでは、画面幅によって折り返しが増えると行数も変わります。高さだけを小さな値に固定すると文字が収まりきらなくなるため、文字を拡大した状態でも読めるかを確かめます。

答え：1行分は30px、内容部分は90px、上下の内側余白を含めた高さは114pxです。

例題4　タグを文章として表示します

HTMLの説明ページに、タグの形である <h2> を文字として表示したいとします。HTMLの本文にそのまま書いた場合と、記号を文字参照に置き換えた場合の違いを説明します。

文字を表示したいのか、見出しを作りたいのかを決めます。今回はタグの書き方を説明するので、見出しとして解釈されない形が必要です。
HTMLで特別な意味を持つ記号を探します。特に < はタグの始まりとして使われるため、表示したい文字として区別します。
必要な記号を文字参照に置き換えます。<h2> と書けば、ブラウザ上では <h2> という文字列を表示できます。

Pythonの標準ライブラリには、この置き換えを行う関数があります。次のコードの出力は、ブラウザで描画した結果ではなく、HTMLに書き込める文字列です。

from html import escape
text = "<h2>"
print(escape(text))

出力は <h2> です。この出力をHTML本文の通常のテキスト位置に書くと、画面には <h2> と表示されます。HTMLのソースと、ブラウザに表示される文字を分けて考える練習になります。なお、この関数だけであらゆる入力の安全性を確保できるわけではなく、入力を入れる場所に応じた処理が必要です。

答え：そのままの <h2> は開始タグとして解釈され、文字として示す場合は <h2> と書きます。

つまずきやすいところと直し方

誤り1　大きな文字なら見出しです

誤った書き方は「p の文字を大きくすれば、HTMLでも見出しになります」です。どこが違うかというと、見た目の大きさと文書内の意味を混同しています。CSSで文字を大きくしても、その要素が p であることは変わりません。

正しい書き方は「見出しの段階をHTMLで指定し、見た目をCSSで調整します」です。直すときは、装飾を見ずにページの見出しだけを並べてみます。「日時」の下に本当に小見出しがある場合はその段階を下げますが、単に小さい字にしたいという理由で見出しの段階を選びません。文章のまとまりを説明できれば、選ぶ要素も決めやすくなります。

誤り2　画像には「写真」と書けば十分です

誤った書き方は「すべての画像の alt を『写真』にすれば、画像が見えなくても内容が伝わります」です。どこが違うかというと、画像の形式だけを示し、その画像が担う情報を伝えていません。会場案内の地図なら、読者が知りたいのは写真か図かという分類ではなく、どこから入ればよいかです。

正しい書き方は「画像の役割に応じて、必要な情報を代替テキストや近くの本文で伝えます」です。複雑な地図は短い alt だけに押し込まず、本文にも道順を記します。情報を持たない飾りの画像では、alt="" として読み上げを省けるようにする方法があります。空の属性と属性自体の省略は同じ扱いとは限りません。

図3のように、同じ情報を画面で読めるか、音声で理解できるか、キーボードで操作できるかを分けて確認します。図の3つは代表的な確認の観点であり、これだけですべての使いにくさが見つかるという意味ではありません。

このように、多様な人が情報を利用できるようにする考え方がアクセシビリティです。色だけで受付の可否を示すと、色を区別しにくい条件では伝わらないため、「受付中」「終了」の文字も添えます。リンクには移動先がわかる文言を付け、背景と文字の明暗差も確かめます。キーボードだけでリンクへ移動して実行できるか、現在の操作位置が見えるかも確認します。

誤り3　出典を書けば写真を自由に公開できます

誤った書き方は「インターネットで見つけた写真は、出典を書けば自由に載せられます」です。どこが違うかというと、著作物の利用について、出典の表示だけで必要な条件をすべて満たすと考えています。手元で見るための複製と、不特定の人が見られるWebへの掲載も区別する必要があります。

正しい書き方は「自分に利用する権利があるか、許諾や利用条件を確かめて掲載します」です。引用には条件があり、単なる飾りとしての転載を、出典だけ付けて引用と呼ぶことはできません。配布されている素材でも、加工や公開などの条件は個別に確認します。

さらに、自分で撮影した写真でも、写った人の顔や名札、住所などをそのまま公開してよいとは限りません。著作権の確認と、個人情報や肖像への配慮は別の点検です。掲載目的に必要な範囲か、本人の意向を確かめたか、背景から生活場所などが推測されないかを見直します。公開を止めても複製が残る可能性があるため、投稿前の判断が必要になります。

練習問題

練習1　同じフォルダと1つ下のフォルダ

guide フォルダに index.html と time.html があり、guide 内の images フォルダに gate.svg があります。相対URLの基準を変更していない場合、index.html から time.html へのリンクの href と、画像を表示する src の値を答えます。ファイルが存在することに加えて、名前の大文字と小文字、拡張子も一致しているものとします。

練習2　段階と順番を分けます

「見学の案内」を全体の題名とし、その下に「日時」「会場」「持ち物」を同じ段階で並べます。各項目には説明文が1段落ずつあります。全体の題名に h1 を使うとき、3項目には何を使いますか。また、見出しの合計と段落の合計を答えます。

練習3　行数が増えた場合

例題3と同じ条件の単純な段落で、文字サイズは18px、line-height は単位なしの1.5、本文は4行、上下の padding はそれぞれ10pxです。枠線と外側の余白を除く高さを求めます。続いて、幅が狭くなり5行に増えた場合の高さも求めます。

練習4　公開前の修正を考えます

行事案内ページに、他人が撮影した写真を許諾や利用条件の確認なしで載せようとしています。出典だけは記入してあります。写真には参加者の顔と名札が写り、受付の可否は赤と緑の丸だけで表示されています。公開前に修正すべき点を、素材、人物、情報の伝え方の3つに分けて答えます。

答えと解説

練習1の答えは、href="time.html" と src="images/gate.svg" です。文書のあるフォルダを基準に、必要な移動だけを書きます。先頭に / を足すとサイトのルートを基準にする指定になるため、今回の位置関係をそのまま表す答えとは異なります。

練習2の答えは、3項目とも h2、見出しは合計4個、段落は合計3個です。項目が出てくる順番で数字を増やさず、全体の題名との関係で段階を決めます。説明文は見出しの数に含めません。

練習3の答えは、4行なら128px、5行なら155pxです。1行は18 × 1.5 = 27pxなので、4行の場合は27 × 4 + 10 + 10 = 128px、5行の場合は27 × 5 + 10 + 10 = 155pxになります。1行増えたときの差は27pxで、余白の分は増えません。

練習4の答えの例は、写真の掲載に必要な許諾や利用条件を確認すること、参加者の意向と顔や名札を公開する必要性を確認して必要な加工や差し替えをすること、色に加えて「受付中」「終了」などの文字を表示することです。1つを直しても残りの問題は解消しないため、3つの観点でそれぞれ点検します。

次の単元へのつながりと家庭での確かめ方

Webの要求と応答は、ネットワークやインターネットのサービスを学ぶ土台になります。また、閲覧者の入力に応じて表示を変える仕組みを学ぶと、文書の構造を記すHTML、見た目を整えるCSS、処理の手順を記すプログラムの役割をさらに分けて考えられます。

家庭での確認の1つ目は、5分で身近な案内文を「全体の題名」「同じ段階の項目」「説明」に分け、紙に見出しだけを書き出す方法です。2つ目は、別の5分で案内ページの文字を拡大し、キーボードでもリンクをたどって、文章が隠れないか、移動先がわかるかを確かめる方法です。読む人に説明を加えずに目的の情報へ進めるかを見ると、修正点を見つけやすくなります。

個別指導で扱う際は、タグを思い出せないのか、文章のまとまりをつかめないのかを分けて確かめます。必要ならフォルダの位置関係や、題名と本文を区別するところまで戻ります。保護者の方は、お子さまに色の好みを尋ねるだけでなく、「会場はどこを見ればわかるか」と実際の探し方を聞くと、学習した内容を確かめられます。