この記事では、ウェブサイトの作り方と、インターネット上への公開方法をわかりやすく説明します。
HTML／CSSの知識がゼロの方が対象です。
前提条件
- プログラミングの知識：不要
- 費用：ゼロ円（すべて無料サービスを使用）
- ブラウザ：Google Chrome（ダウンロードはこちら）
本記事の手順はMacで確認しています。Windowsの方は一部の画面表示が異なる場合があります。
ウェブサイトの正体を見てみよう
まず、私たちが日常的に見ているウェブサイトが何から作られているのかを確認します。
下記URLを開いてください。
https://nextbook-fullstack-app-folder.vercel.app
これは筆者が用意したサンプルサイトです。
メルカリのような物販サイトをイメージしてもらえるとわかりやすいでしょう。
▼ サンプルサイトのトップページ
画面上で右クリックをすると、
メニューが表示されます。「検証（Inspect）」を選んでください。
▼ 右クリックメニュー
ブラウザの右側に、次のような画面が開きます。
▼ デベロッパーツール（Elementsタブ）
「Elements」タブが選択されているか確認してください。
英語でいろいろと書かれています。
<head>、<body>、<nav>といった見慣れない記号も見えます。
しかしこれこそがウェブサイトを作っている部品です。
ウェブサイトとは、これらの部品を組み合わせて作られているのです。
<div class="grid-container-in"> というところに注目してください。
<divの左側にある▶︎マークをクリックすると、中身が展開されます。
<a href="... で始まるものが複数出てきました。
さらに <a の左側の ▶︎ もクリックして展開しましょう。
一番下にある<div>...</div>に注目してください。
<div>の▶︎をクリックします。
<h3>メガネ</h3>の下にある<p>の▶︎をクリックしてください。
「使いやすいメガネです。Lorem ipsum dolor sit amet.....」という文章が見えます。
この文章は、ブラウザの左側に表示されているウェブサイトの「メガネ」という商品の説明部分と一致しているのがわかります。
他の部分でも同じ対応関係があります。
<h2>の▶︎を展開してみましょう。
「¥」「5500」といった価格情報と一致しています。
ここまでで確認できたのは次のことです。
【 ウェブサイトとは、<div>、<h2>、<a> といった部品（タグ）から構成されている 】
これらのタグを組み合わせ、その中に「メガネ」や「5500」といった情報を書き込むことで、ウェブサイトは作られているのです。
実際にHTMLファイルを作ってみよう
Macの方はTextEdit、Windowsの方はメモ帳を開いてください。
TextEditは「Launchpad」→「その他」の中にあります。
見つからない場合は、右上の虫眼鏡マークから「TextEdit」と検索してください。
▼ TextEditを開いた状態
次のコードをコピーして貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>私のウェブサイト</title>
</head>
<body>
<h1>初めてのウェブサイト</h1>
<p>今日の天気は晴れです</p>
<a href="https://www.google.com">Googleへのリンク</a>
</body>
</html>
▼ 貼り付けた状態
<p> や <a>といったタグが使われているのがわかります。
構造的には先ほどの物販サイトと同じです。量が少なく、シンプルなだけです。
ファイルを保存しましょう。上部メニューの「File（ファイル）」→「Save（保存）」を選びます。
保存場所やファイル名は好きなもので大丈夫ですが、拡張子は必ず .htmlにしてください。
デフォルトは .txtになっているので注意が必要です。
ここではデスクトップに「first-website.html」という名前で保存します。
ブラウザを開き、「first-website.html」をドラッグ＆ドロップしてください。
次のように表示されます。
少し地味なので、デザインを加えてみましょう。「first-website.html」の中身をすべて消して、代わりに下記のコードを貼り付けてください。
<head>の中に <style>という新しい要素が追加されていますが、下の方を見ると<div>や<a>という先ほど見たタグがあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>私のウェブサイト</title>
<style>
:root {
--primary-color: #5d5dff;
--secondary-color: #4a4aff;
--background-color: #f4f7f6;
--text-color: #333;
--container-bg: #fff;
--box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
}
.container {
width: 90%;
max-width: 600px;
background-color: var(--container-bg);
border-radius: 20px;
box-shadow: var(--box-shadow);
padding: 50px;
transform: translateY(0);
transition: transform 0.4s ease-in-out;
}
h1 {
color: var(--primary-color);
font-size: 3.5em;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
animation: fadeInDown 1.5s ease-out;
}
p {
font-size: 1.2em;
color: #666;
margin-bottom: 40px;
animation: fadeInUp 1.5s ease-out;
animation-delay: 0.5s;
animation-fill-mode: both;
}
a {
display: inline-block;
background-image: linear-gradient(45deg, #5d5dff, #8a8aff);
color: #ffffff;
text-decoration: none;
padding: 15px 30px;
border-radius: 50px;
transition: all 0.3s ease;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
a:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
background-image: linear-gradient(45deg, #4a4aff, #6f6fff);
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="container">
<h1>初めてのウェブサイト</h1>
<p>今日の天気は晴れです</p>
<a href="https://www.google.com">Googleへのリンク</a>
</div>
</body>
</html>
保存したら、同じように「first-website.html」をブラウザにドラッグ＆ドロップしてください。
▼ デザイン適用後
見た目が変わり、テキストにフェードインのアニメーションも付いています。
<style>の中に書かれているのがCSSです。<div>や<a>などのタグでウェブサイトの骨格を作るのがHTML、そこに色やアニメーションを加えるのがCSSという役割分担になっています。
ブラウザの役割を整理しよう
ここで一度、ブラウザの役割について確認します。
.docxファイルを開くにはWordというアプリが必要なように、.htmlファイルを開くにはGoogle ChromeやSafariなどのブラウザが必要です。
ただし、大きな違いが一点あります。
.docxファイルは通常、自分のパソコンの中にあります。
一方、ブラウザは インターネット上にある.htmlファイルを取得して表示します。
つまり、ネット上には無数の .htmlファイルが置かれていて、それを表示するためのアプリがブラウザなのです。
であれば、今パソコンの中にある「first-website.html」をオンライン上にアップロードすれば、世界中の誰もがアクセスできるようになるはずです。
次のセクションでそれを試してみましょう。
Netlifyで無料公開しよう
公開前に2つ準備します。
① フォルダを作る
新しいフォルダを作成してください。名前は何でも構いませんが、ここでは「my-website」とします。
▼ フォルダ作成
このフォルダの中に「first-website.html」を入れます。
② ファイル名を変更する
フォルダを開き、「first-website.html」を**「index.html」**に変更してください。
準備完了です。
次のURLを開いてください。
ページ中央に「my-website」フォルダをドラッグ＆ドロップします。
アップロードが完了するとURLが表示されます。
このURLが、公開されたウェブサイトのアドレスです。クリックすると、パスワード入力画面が表示されます。
パスワードは**「My-Drop-Site」**です（前の画面のURL下部にも記載されています）。
入力するとウェブサイトが表示されます。
これで、自分のパソコンで作った「index.html」がオンライン上に公開され、誰でもアクセスできる状態になりました。
Netlify Drops では、アップロードから約1時間後に自動削除されます。永続的に公開したい場合は、Netlifyのアカウントを作成してください（メールアドレスだけで無料登録できます）。
まとめ
この記事で確認できたことを整理します。
| 項目 | 内容 |
|---|---|
| ウェブサイトの構成要素 |
<div>、<a>などのHTMLタグ |
| ファイルの拡張子 | .html |
| ブラウザの役割 |
.htmlファイルを取得・表示するアプリ |
| CSSの役割 | HTMLの骨格にデザインを加えるもの |
| 公開方法 |
.htmlファイルをオンラインにアップロードするだけ |
「ウェブサイト制作は難しそう」というイメージを持っている方も多いですが、その基本構造はとてもシンプルです。
ReactやNext.jsといったフレームワークも、突き詰めればHTMLとCSSの延長線上にあります。
まずはこのシンプルな仕組みを手を動かして体験することが、フロントエンド学習の出発点になります。