外部リソース（画像・スタイル・スクリプト）

画像やスタイルシート（CSS）、スクリプト（JavaScript）は別ファイルで用意します。CSSは見た目を整え、JavaScriptは動きを加えます。ブラウザはHTMLを読みながら必要な外部ファイルを順に読み込みます。

ファイル配置とURL

ファイルはサーバ上に配置し、URLで指定します。相対パス（./images/photo.jpg）と絶対URL（https://例…）を使い分けます。正しい場所に置くとブラウザが自動で取得します。

ブラウザとサーバのやり取り

ユーザーがURLを開くとブラウザがサーバに要求を送ります。サーバはHTMLや画像などを返し、ブラウザが画面を組み立てます。表示はこの一連の流れで成り立ちます。

最小の例

見出し

本文

インタラクティブ機能とWebアプリケーション

概要

Webページに動きや対話を加えるには、JavaScriptなどのスクリプト言語を使います。ボタンを押したときに表示を変えたり、入力内容をその場で確認したり、サーバーとやり取りして新しい情報を取り込んだりできます。こうした動的な表示を活用して作る応用を「Webアプリケーション」と呼びます。

主な仕組み

• イベント: クリックや入力といった利用者の操作を検知して処理を起動します。例として、送信ボタンを押したら入力をチェックする処理が動きます。
• DOM操作: ページ内の要素をその場で追加・変更して見た目を変えます。文章や画像を差し替えるのに使います。
• サーバー通信: 新しいデータを取得したり保存したりする際に、ページを再読み込みせずに通信します（fetchや非同期通信）。

よくある機能（具体例）

• フォームの入力チェックや自動補完
• 画像スライダーやモーダル（拡大表示）
• 地図表示やチャットのようなリアルタイム更新
• ページ遷移を伴わない「シングルページアプリ」

作るときのポイント

利用しやすさと動作の軽さを意識してください。視覚以外の利用者にも配慮する（キーボード操作や音声読み上げへの対応）と使いやすくなります。外部と通信する部分は不正な入力を防ぐ対策を行い、個人情報の扱いに注意してください。

静的Webページと動的Webページ

概要

Webページには「静的」と「動的」の二つの性質があります。静的は保存されたまま表示する“写真”のようなページ、動的は表示時に処理を行いユーザーごとに変わる“動画”のようなページです。

静的Webページとは

静的ページはあらかじめ作ったHTMLや画像をそのまま送ります。例として、個人のプロフィールや会社の会社案内ページがあります。表示が速く、管理が簡単です。もし内容を更新するなら、ファイルを書き換えます。

動的Webページとは

動的ページは表示時にサーバーの処理やデータベースの情報を使って内容を組み立てます。ログイン画面やショッピングカート、ニュースの一覧などが該当します。ユーザーごとに表示が変わり、個別の情報を出せます。

主な違い

• 更新方法：静的はファイルを直接更新、動的は処理で自動更新が可能
• 表示速度：静的が速く、動的は処理時間が必要な場合がある
• カスタマイズ性：動的は個別対応が得意

使い分けの目安

案内や紹介中心なら静的で十分です。個人化や頻繁なデータ更新が必要なら動的を選んでください。近年は静的に近い速度を保ちつつ、必要な部分だけ動的にする方法もよく使われます。

実例でイメージ

• 静的：店舗の営業時間ページ
• 動的：会員専用ページ、検索結果ページ

これらを理解すると、作るべきページの方針が決めやすくなります。

Webページの表示特性

表示の可変性

Webページは印刷物と違い、画面サイズに合わせて自由に見え方が変わります。パソコン、タブレット、スマートフォンで同じページでも配置や文字の大きさが変わり、閲覧しやすくなります。

スクロールとズーム

内容が画面に収まりきらないときはスクロールで上下に移動します。閲覧者はブラウザのズーム機能や文字サイズ設定で画面を拡大・縮小できます。画像も自動で縮小される場合が多いです。

レイアウトの調整と具体例

多くのページは幅に応じて要素を並べ替えます。たとえば、横並びのメニューが狭い画面では縦に並び替わる例があります。こうした調整は読みやすさを保つためです。

印刷表示との違い

画面用のページはインタラクティブ要素やリンクが多く、印刷用に最適化された版と見た目が異なります。印刷時には余分な部分が省かれ、紙に合わせて再構成されます。

アクセシビリティ配慮

文字サイズ、色のコントラスト、拡大時の崩れに配慮することで多くの人が使いやすくなります。閲覧者が表示範囲を選べることがWebの大きな利点です。

Webという名称の語源

語源の基本

「Web」という名前は、書類（ページ）とそれらを結ぶリンクを点と線で表すと、網目がクモの巣に似て見えることに由来します。点がページ、線がハイパーリンクです。互いに広がる結びつきが、平面上で網のように広がるため「web（クモの巣）」と呼ばれました。

名付けた背景

この呼び名は、ティム・バーナーズ＝リーが提案した「World Wide Web（ワールド・ワイド・ウェブ）」に由来します。彼は文書を相互に結びつける仕組みを設計し、相互リンクによって全体が網のように見える点を強調しました。技術そのものは「ハイパーテキスト」という概念から発展しましたが、視覚的な比喩として「Web」が定着しました。

わかりやすい比喩と例

• 地図と道路の比喩：都市を点（ページ）、道路を線（リンク）と考えると理解しやすいです。多くの道が交差すれば網目状になります。
• 人間関係のネットワーク：友人同士がつながる様子を点と線で描くと、やはり網のように見えます。ソーシャルな結びつきもWebのイメージに近いです。

呼び名が示す意味

「Web」は単に技術的な配線（物理的なネットワーク）を指す言葉ではありません。文書や情報が相互に参照し合い、利用者がリンクをたどって移動できる構造そのものを表します。名前は、この「つながり」の豊かさと広がりを直感的に伝えるために選ばれました。

Webサイトとの関係性

概要

複数のWebページをリンクしてまとめたものをWebサイトと呼びます。サイトは同じドメイン下でページを束ね、トップページ（ホームページ）が入口になります。ホームページは全体の案内板として主要情報や入口への道を示します。

ページとサイトの違い

Webページは単一の文書や画面です。Webサイトはその集合体で、複数ページの構成・目的にまとまりがあります。例として、ブログは記事ページが集まり、ECサイトは商品ページと購入フローで成り立ちます。

ナビゲーションと内部リンク

メニュー、パンくずリスト、フッターのリンクで利用者を導きます。内部リンクが多いほど目的の情報に辿りやすくなります。サイトマップを用意すると構造が分かりやすくなります。

デザインと構造の一貫性

統一したデザインや明快なURL構造は利用者の信頼を高めます。ページ同士の関係が分かる見出しやカテゴリ分けを心がけます。

運用面

更新やバックアップ、アクセス解析でサイトの健康を保ちます。小さな修正もサイト全体の体験に影響しますので注意が必要です。

Webページの内容と用途

概要

Webページは特定のテーマや目的に沿って情報をまとめます。企業、個人、団体などが目的に応じて構成を決めます。内容は読み手に分かりやすく伝えることを優先します。

企業の公式サイト

企業サイトは複数ページで構成されることが多いです。例として「会社概要」「製品・サービス紹介」「採用情報」「お問い合わせ」などを分けて掲載します。各ページは目的が明確で、訪問者が必要な情報にすばやくたどり着けるように設計します。

ランディングページ（LP）

ランディングページは特定のアクションを促すための単独ページです。商品の購入、資料請求、イベント参加の申し込みなどが目的です。余計な情報を減らし、ボタンやフォームを目立たせると効果が上がります。

個人ブログ・ポートフォリオ

個人向けのページは経験や作品、考えを伝える場です。写真や文章、サンプルを見やすく配置して、閲覧者が作者の強みを理解できるようにします。

用途別の作り方のポイント

• 商品紹介：機能と利点を具体例と写真で示します。
• 問い合わせ：フォームは簡潔にして返信方法を明記します。
• 教育コンテンツ：章立てや目次で学びやすくします。

注意点

著作権や個人情報の扱いに注意して作成します。情報は定期的に見直し、古くなった内容は更新してください。