Webサイトはどうやってできているの？
コードを触って学ぶWebの仕組み

はじめに

最近は、生成AIにお願いするだけで、Webサイトのコードまで作ってもらえるようになりました。
「それなら、Web制作を勉強しなくてもいいのでは？」と思うかもしれません。
でも、作ってもらうことと、仕組みを理解して修正・運用できることは別です。

今回は、サンプルサイトを実際に触りながら、HTML・CSS・画像ファイルがどのようにつながってWebサイトになっているのかを見ていきましょう。

お使いのパソコンのメモ帳だけで、今回は取り組むことができますよ。

※本記事ではサンプルサイトを無料配布しています。パソコン（WindowsまたはMac）からのアクセス・操作を推奨いたしますが、スマホでもお楽しみいただける内容となっています。ぜひ最後までご覧ください。

サンプルサイトの確認

今回、操作していただくのは、観光地紹介サイト「Discover Italy」です。
ヴェネツィアの風景をメインに、ローマ、ポジターノ、トスカーナという3つの旅先を紹介しています。

完成例はこちらになります。

Webサイトは、いくつものファイルでできている

それでは、今回使用するデータをダウンロードしてみましょう。

ダウンロードしたファイルは圧縮されたzipファイルになっています。

Windowsの方は右クリックをして「すべて展開」を選択します。表示された「discover-italy」フォルダを開いてください。
Macの方は、zipファイルをダブルクリックし、表示された「discover-italy」フォルダを開きます。

今回使う「discover-italy」のフォルダを見てみると、こんな構成になっています。

大きく分けると、HTML・CSS・画像という複数のファイルからできています。
一般的にはこのようにフォルダ整理をします。

また、ファイル名はすべてアルファベットであることも確認してください。
Webサイトで使うファイル名は、小文字の英字や数字を使うのが基本です。
日本語のファイル名は、環境によって正しく扱えないこともあるため、できるだけ避けましょう。

コードを編集するには、どんなアプリを使う？

HTMLやCSSは、実は特別なアプリがなくても編集できるんです。
Windowsならメモ帳でも、HTMLを書くことはできます。

ただ、Web制作ではコードエディターと呼ばれる専用のアプリを使うのが一般的です。

現在、よく使われているアプリは「Visual Studio Code（VS Code）」です。
（ダウンロードサイト：https://code.visualstudio.com/download?_exp_download=d53503e735）

VS Codeではコードが色分けして表示されるため、普通のメモ帳よりも内容が読みやすくなります。

また、左側にフォルダやファイルの一覧が表示されるので、「HTMLはここ」「CSSはこのフォルダ」「画像はimgフォルダ」という関係も確認しやすくなります。

Web制作ではコードを書くことだけでなく、どこに何のファイルがあるのかを把握することも大切です。

今回はこのようなアプリを使っていただいても構いませんが、メモ帳で作業を進めていきますね。

サンプルサイトのコードの確認

それでは「discover-italy」フォルダ内のindex.htmlをダブルクリックしてブラウザで開いてみましょう。

ダウンロードしていただいたデータは、実は完成例より少しずつ間違いがあるのです。
今回はその間違いをみなさんに直していただきながら、このページを完成させていきたいと考えています。

間違いは３つあります。

一つめは「一度は訪れたい、イタリアの風景。」と書いてありますが、ここは「心に残る、イタリアの風景。」に変更します。

二つめも同じ部分で、文字の色は青緑色に変更します。

三つめは「おすすめの旅先」の画像。コロッセオの画像が表示されていない原因を確認し、修正します。

メモ帳でのコード編集

それでは、編集をしていきましょう。

「discover-italy」フォルダ内のindex.htmlと、「css」フォルダ内のstyle.cssを、メモ帳で開きます。
開き方にコツがありますので、ご案内しますね。

Windowsの方は右クリックをして「プログラムから開く」から「メモ帳」を選択します。

Macの方は、右クリックをして「このアプリケーションで開く」から「テキストエディット」を選択します。

ここでこのような表示になった方は、次の操作が必要です。

メニューの「テキストエディット」→「設定」→「開く／保存」で、「HTMLファイルを、フォーマットされたテキストではなくHTMLコードとして表示」にチェックを入れておきましょう。

開いたファイルはいったん閉じて、開き直す必要があります。

以下のようなコードだけが表示されていればOKです。

HTMLは「ページの内容」

まずは、開いたindex.htmlのコードを見てみましょう。
たくさんの英数字が並んでいますが、すべてを理解する必要はありません。
今回は、実際に画面に表示されている文章を探してみます。
コードの中から、次の部分を探してみてください。

<h1>
一度は訪れたい、<br>
イタリアの風景。
</h1>

「一度は訪れたい、イタリアの風景。」という文章がありますね。
HTMLには、このようにWebページに表示する文章や画像などの「内容」が書かれています。
今回は、この文章を完成例と同じ

<h1>
心に残る、<br>
イタリアの風景。
</h1>

に変更してみましょう。
変更できたら、index.htmlを保存します。

そのあと、ブラウザで開いているページを再読み込みしてみてください。
サイトを閉じていた場合は、index.htmlをダブルクリックしてブラウザで表示させます。

見出しが「心に残る、イタリアの風景。」に変わりましたね。

このように、HTMLを書き換えると、Webページに表示される内容を変更することができます。

ちなみに、途中にある

<br>

は、文章を途中で改行するためのHTMLです。

今回はコードを覚える必要はありません。
まずは、「HTMLに書かれている内容が、ブラウザに表示されている」ということを確認できればOKですよ。

CSSは「ページの見た目」

次は、文字の色を変更してみましょう。
メモ帳で開いた「css」フォルダの中にあるstyle.cssを確認します。
CSSでは、文字の色や大きさ、余白、レイアウトなど、Webページの「見た目」を指定しています。

今回は、見出しの色を変更してみましょう。
style.cssの中から、次の部分を探してください。

.hero h1 {
margin: 0;
font-family: Georgia, "Yu Mincho", serif;
font-size: 52px;
line-height: 1.4;
color: #9b4b42;
}

この中の「color: #9b4b42;」が文字の色を指定している部分です。

現在はオレンジ色ですが、完成例では青緑色になっていましたので、次のように変更してみましょう。

「color: #244f56;」

保存してブラウザを再読み込みすると、見出しの色が変わります。

つまり、

• HTMLは「何を表示するか」
• CSSは「どのように見せるか」

をそれぞれ担当しているんです。

画像が表示されない原因を探してみよう

文章と色は直りましたが、ページをよく見ると、ひとつだけ画像が表示されていませんよね。
今回は、ローマの画像に問題があるようです。

まず、「img」フォルダを開いて、画像のファイル名を確認してみましょう。

「rome.jpg」という画像がありますね。

画像を表示するコードを見ると、このようになっています。

<img src="img/roma.jpg" alt="ローマのコロッセオ">

よく見比べてみると、画像ファイルは「rome.jpg」なのに、HTMLでは「roma.jpg」と書かれています。
スペルミスですね。

HTMLの「a」を「e」に

<img src="img/rome.jpg" alt="ローマのコロッセオ">

修正して保存し、ブラウザを再読み込みしてみましょう。
今度は画像が表示されました。

Webサイトでは、ファイル名が1文字でも違うと、正しく読み込むことができません。

今回のように、見た目は似ていても、rome.jpg と roma.jpg はパソコンにとっては別のファイルなのです。

HTMLは、画像ファイルの場所を指定している

先ほど修正した、imgタグの

src="img/rome.jpg"

という部分に注目してみましょう。

これは、「imgフォルダの中にある『rome.jpg』という画像を表示してください」という指示です。
画像そのものがHTMLの中に入っているわけではありません。

HTMLから別の場所に保存されている画像ファイルを読み込んで、ブラウザに表示しています。

そのため、「ファイル名を間違える」「保存するフォルダを変える」「フォルダ名を間違える」「ファイルを削除する」といったことがあると、画像を正しく表示できなくなります。

今回のサンプルサイトも、HTML、CSS、画像という複数のファイルが正しくつながることで、ひとつのWebページとして表示されているんですね。

パソコンで見えているだけでは、まだWebに公開されていない

ここまでで、サンプルサイトをブラウザに表示できました。

でも、この状態ではまだ、自分のパソコンの中で見えているだけです。

インターネット上で誰でも見られるWebサイトにするには、HTMLやCSS、画像などのファイルをWebサーバーに置く必要があります。

Webサーバーは、Webサイトに必要なファイルを保存しておき、アクセスされたときにそのデータを届けるコンピューターのことです。

そこに、

• index.html
• css/style.css
• img/main.jpg

といったファイルをアップロードします。

そして、Webサイトには「○○.com」のようなドメインを設定し、URLからアクセスできるようにします。
普段私たちが見ているWebサイトも、基本的にはこうした仕組みで表示されています。

こういった説明は、初心者のころの私も何度も聞きましたが、実際に触ってみるまでは、なかなかイメージできませんでした。

そこで、Webサイトを「家」に例えて考えてみましょう。

今、手元にあるHTMLやCSS、画像などのファイル一式が「家」です。

でも、この家をインターネット上でみんなに見てもらうためには、家を建てる「土地」と、その場所を示す「住所」が必要です。

この「土地」にあたるのがサーバーです。
一般的には、レンタルサーバーというサービスを利用して、Webサイトのファイルを置く場所を借ります。

そして「住所」にあたるのが、○○.comなどのドメインです。
ドメインを取得してサーバーとつなげることで、その住所からWebサイトを見に来てもらえるようになります。

• Webサイトのファイル＝家
• サーバー＝土地
• ドメイン＝住所

こう考えると、少しイメージしやすくなるのではないでしょうか。

Webサイトは、作って終わりではない

今回の公式サイト「Discover Italy」は、とても小さなサンプルサイトです。

HTMLは1ページだけで、画像も数枚しかありません。

では、実際の企業サイトのように、ページが50ページあったり、写真が数百枚あったり、複数のスタッフで更新したりする場合はどうでしょう。

ファイル名を思いつきで付けたり、画像を適当な場所に保存したりしていると、だんだん「どのファイルが何なのかわからない」という状態になってしまいます。

さらに、実際のWeb制作では、HTMLやCSSだけでなく、

• ファイルやフォルダの管理
• 画像の扱い方
• リンクの設定
• スマートフォンへの対応
• サーバーへのアップロード
• 更新や修正
• 不具合が起きたときの確認

など、さまざまな知識が必要になります。

そしてこれは、生成AIを使ってWebサイトを制作するときも同じです。

AIにコードを作ってもらうことはできても、どこを直せばいいのか、なぜ表示されないのか、AIの提案が適切なのかを判断するには、Webの基本的な知識が必要です。

おわりに

今回は、サンプルサイト「Discover Italy」を使って、Webサイトがどのようなファイルから作られているのかを学びました。

HTMLの文章を書き換えたり、CSSの色を変更したりして、「意外とさわれるかも！」と思った方もいるのではないでしょうか。

一方で、画像のファイル名が1文字違うだけで表示されなくなるように、Webサイトは複数のファイルが正しくつながることで成り立っています。
生成AIがコードを書いてくれる時代になっても、こうした仕組みを知ることの大切さは変わりません。
むしろ、基礎知識があるからこそ、AIに適切な指示を出したり、作られたものを確認したり、必要な修正を加えたりできるようになります。
これからのWeb制作では、「すべてのコードを自分で書けるようになること」だけが学ぶ目的ではありません。

HTMLやCSS、ファイル管理、Webサイトが公開される仕組みなどを基礎から理解し、AIも活用しながら自分で判断できる力を身につけることが大切です。

しっかりWeb制作を身につけたい方は、ぜひスクールの講座で、私と一緒に基礎から学んでみませんか？

関連記事