【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法

【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法

2023.12.26 2026.7.10

この記事は約1 分で読めます

三好アキ プロフィール写真

筆者三好アキ(専門用語なしでプログラミング)

私について詳しくは → 自己紹介

HTML/CSSでつくったウェブサイトを公開

1分で作業は終わるので、1分で読み終わる記事にします。

手元にHTML/CSSで作ったウェブサイトを用意しましょう。JavaScriptが含まれていても大丈夫です。

ここでは「my-website」という名前のフォルダの中に、下図のように3つのファイルが入っているものとします。

image

image

次に下記URLを開いてください。

https://app.netlify.com/drop

image

この中心部に、index.htmlなどの入った先ほどのフォルダをドラッグ & ドロップします。

image

アップロードが完了すると次のように表示されます。

image

上図の赤枠のURLをクリックすると、ウェブサイトが公開されているのが確認できます。

これで1分、0円でウェブサイトの公開が完了です。

image

monotein.com/present

なおひとつ注意点は、URLの下に「Your site will be live for 1 hour(このウェブサイトの有効期限は1時間です)」とあるように、いま公開したウェブサイトが1時間後に削除されてしまうことです。

これを防ぐには、このNetlifyというサービスのアカウントを作る必要があるので本記事で一緒に紹介します。

必要なのはメールアドレスだけで、お金は一切かかりません。

またNetlify Dropsと同様のサービスとして、2026年7月にリリースされたCLOUDFLAREのCloudflare Dropがあります。

cloudflare.com/drop

cloudflare-drop.jpg

アカウント作成のステップ

URL下にある「Sign up for free」ボタンを押しましょう。

image

次のようなページが開きます。登録にはメールアドレスを使うので、「Sign up with email」をクリックしましょう。

netlify-sign-up

下の画面が開くので、自分の「Email」と好きな「Password」を入力し、アカウントを作成します。

pic3

「登録したメールアドレスに確認メールを送りました」という下記ページが開くので、登録したメールアドレスのフォルダを確認します。

pic3.5

確認メールを開き、「Verify email」ボタンを押します。

pic3.8

簡単なアンケートのページが開きます。

pic3.8

何を答えるのかは重要で無いので、好きな答えを選択してください。ここでは各設問の一つ目の選択肢、「Work」→「Web3.0」 → 「Freelancer」を選択していきます。

最後に「What is the name of your team?」と質問が出ますが、無視して構わないので、最後の「Continue to deploy」ボタンを押します。

pic3.8

ページが移動します。下記「Skip this step for now.」を押しましょう。

pic3.8

以上でアカウント作成までが完了です。

これでアップロードしたウェブサイトは1時間で消えず、いつでも好きな時にアクセスできるようになりました。

なお、このように有料サーバーなしでウェブサイトを公開できる理由や、Netlify以外の無料ホスティングサービスについては、「サーバー料金をゼロにする方法」で解説しています。

ウェブサイトを公開できたら、次のステップはアプリ開発です。

HTMLとCSSの知識だけで、最新のフロントエンド開発ツール「Next.js」を3分で体験できる無料ガイドを配布しています。

「作れる」の幅がぐっと広がります▼

image

⚫︎ monotein.com/present

HTML/CSSの次に何を学ぶかは、こちらのロードマップで確認できます▼


image

⚫︎ monotein.base.shop/p/00005