はじめてのウェブサイトを作ってみよう（無料オンライン公開方法まで解説）
2025.8.22
この記事は約4分で読めます
この記事の筆者：三好アキ
🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。
▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2
ウェブサイトは実は単純
本記事では、「完全ビギナー」を対象に、はじめてのウェブサイトの作り方から、オンライン上での公開方法までを紹介します。
本記事を最後まで読めば、「ウェブサイト」というものが実はとても単純で、自分でも作れてしまうのがわかるでしょう。
完全ビギナー対象なので、前提知識は不要です。
無料サービスを使うので、費用はゼロ円です。
本記事ではGoogleクロームをブラウザに使います。
下記リンクからダウンロードしてください。
なお本記事ではMacを使っています。Windowsの方は一部表示が異なることに注意してください。
ウェブサイトの構造
最初に、私たちが日常的に見ているウェブサイトとは、一体何から作られているのかを確認しましょう。
下記URLを開いてください。
• nextbook-fullstack-app-folder.vercel.app
これは私が作った仮のウェブサイトです。
メルカリのような物販のウェブサイトと考えてください。
画面上で右クリックをすると、下記画面のように表示が出ます（画像では英語表示になっていますが、「検証（Inspect）」という項目を選んでください。）
するとブラウザの右側に、次のような画面が表示されます。
表示されていない場合は、上部の「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」といったメガネの価格部分と同じものが表示されています。
以上のことから、今ブラウザの右側に表示されているものは、左側のウェブサイトの情報と同じであるのがわかります。
このような対応関係は、他のウェブサイトを開き、右クリックから「検証」を選択し、ブラウザ右側に「Elements」を表示させてみても、同様に成り立っているものです。
なぜでしょうか？
ウェブサイトとは、<div>、<h2>、<a>といった部品（＝Elements）から成り立っているからです
これらの部品を組み合わせ、その内部に「メガネ」や「5500」といった、ウェブサイトで表示させたい情報を書き込んであるのです。
とはいえ、ここまでの説明ではまだ納得できないかもしれません。
今度は逆から確認してみましょう。
ブラウザの機能
Macの方は、TextEditというアプリケーションを開いてください（Windowsユーザーは「メモ帳」を開いてください）。
TextEditは、「Launchpad」の「Other（その他）」内にあります。
見つからない場合は、Macの画面の右上、現在時刻が表示されている部分の並びにある虫眼鏡のマークを押し、「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>といった部品が使われています。
上で見た物販サイトとの違いは、こちらの方が構造がシンプルで、入り組んでおらず、また量も少ないということだけです。
さて先ほど、「ウェブサイトというのは、<div>、<h2>、<a>といった部品から成り立っている」と説明しました。
これが正しいならば、いま貼り付けたものも「ウェブサイト」ということになります。
確認してみましょう。
上部の「File（ファイル）」から「Save（保存）」を選びます。
ファイルの保存場所およびファイル名は好きなもので大丈夫です。
しかしファイルの拡張子は必ず.htmlとしてください。
本記事では、デスクトップに保存をし、ファイル名は「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」ファイルをブラウザにドラッグ＆ドロップしてください。
次のように表示されます。
デザインが変わり、最初の方では文字が動くというアニメーションも付いているのがわかります。
さて、ここまで見てきたものから確認できたのは次のことです。
【 ウェブサイトは<div>や<a>といったタグから構成されていること 】
ここで見たのは非常にシンプルな構造のものでしたが、大きなウェブサイトではタグの数はより多く、構造もより入り組んだ複雑なものになります。
そしてもう一つわかったことがあります。
【 GoogleクロームやSafariといったブラウザは、これらのタグで構成されたファイルを表示させる機能があること 】
例えば.docxや.docという拡張子のファイルを開くときは、Wordというアプリケーションを使います。
GoogleクロームやSafariも同じような機能のアプリケーションで、.htmlという拡張子のファイルを開くためのものなのです。
しかし大きな違いが一つあります。
通常私たちが.docxファイルを開くとき、このファイルは私たちのパソコンの中にあります。
しかしクロームやSafariは、.htmlファイルをインターネット上から入手して開きます。
つまりネット上には無数の.htmlファイルがあり、それを開くためのアプリケーションが「ブラウザ」と総称されるGoogleクロームやSafariなのです。
なので、次はいま私たちのパソコン内にある「first-website.html」をオンライン上にアップロードしてみましょう。
そうすれば、「first-website.html」に世界中の誰もがアクセスできるようになるはずです。
（*なお、先ほど出てきた<style>というものは、ウェブサイトに色やアニメーションを付けて整形するためのものです。CSSと呼ばれます。<div>や<a>などでウェブサイトの骨組みを作るためのものがHTML、そこに色やデザインを加えて魅力的にするためのものがCSSです。）
ウェブサイトをオンラインに公開する
最初に準備を2つします。
現在、「first-website.html」ファイルは剥き出しのままなので、フォルダに入れてあげましょう。
新規フォルダを作ってください。
名前は何でも構いませんが、ここでは「my-website」としてあります。
このフォルダ内に「first-website.html」を入れます。
次にフォルダを開き、「first-website.html」というファイル名を「index.html」に変更してください。
これで準備は完了です。
次は下記リンクを開いてください。
このサイトの中心部にフォルダ「my-website」をドラッグ＆ドロップしてください。
アップロードが完了すると表示が変わり、URLが表示されます。
これが、オンライン上にアップロードした「first-website.html」ファイルへアクセスするためのURLです。
クリックしましょう。
このNetlify Dropsでは、イタズラ防止のためのパスワードが設定されています。
「My-Drop-Site」というパスワードを入力しましょう（このパスワードは、前ページのURLの下部に書いてあります）。
ウェブサイトが表示されます。
これで、私たちがパソコン内で作った「first-website.html」というファイル、つまり「ウェブサイト」に、世界中の誰もがアクセスできるようになりました。
（*なおこのNetlify Dropsでは、1時間後にウェブサイトは自動で削除されます。永続化するにはNetlifyのアカウントを作ってください。メールアドレスだけで無料で作れます。）
まとめ
ここまでわかったことをまとめてみましょう。
• すべてのウェブサイトは<div>や<a>といったタグから作られている
• ファイルの拡張子は.html
• クロームやSafariといったブラウザは、それらのタグを使って書かれた.htmlファイルを表示するためのもの
• .htmlファイルをオンライン上にアップすると、世界中どこからでもアクセスできる
• <div>や<a>といったウェブサイトの骨組みをHTML、そこにデザインを付けるものをCSSと呼ぶ
以上がウェブサイト制作の基本になります。
かつての私自身を含め「ウェブサイト」は複雑で、自分で作るのは難しいと思っている人が多いですが、その実態はとてもシンプルなのです。
▼【無料フロントエンド・ガイド】は下記ページで受け取れます。
🟩 フロントエンド開発者入門ガイド【無料配布中】
最初にこれが知りたかった！
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
（*名前不要・メールアドレスだけで受け取り可能です）
関連記事
