ホームページをHTMLで自分で作るには？

パソコンにbusiness-siteというフォルダーを作り、その中にindex.html、さらにimagesフォルダーを作ります。公開に使う写真1枚をimages/photo.jpgとして置きましょう。自分で撮影した写真など、掲載できる素材を使います。

index.html

屋号、説明、料金、受付先をまとめるファイル。テキストエディタで編集します。

images/photo.jpg

案内に使う写真。名前と拡張子の大文字・小文字まで、HTMLの参照先とそろえます。

公開する範囲

business-siteの中身だけ。顧客名簿、下書き、個人的なメモは別の場所で管理します。

この例の見た目はHTML内のstyleで指定するため、別のCSSファイルは不要です。配布型を使う場合は構成が異なります。ネイル用テンプレートの編集ガイドのように、付属のcss・images・jsの参照関係を保ったまま編集します。

下のコードをすべてコピーし、テキストエディタへ貼り付けて、UTF-8のindex.htmlとして保存します。文書作成ソフトの装飾付き形式は使いません。拡張子がindex.html.txtになっていないかも確認してください。

架空例は「写真の整理相談」1回60分5,000円（税込）、追加料金・延長なしに限定しています。実際の事業がこの条件になるという意味ではありません。自分の料金と対象範囲が決まっていなければ、案内文の記入欄で確認待ち事項を分けてから置き換えます。

変更するのは、titleとdescription、屋号と紹介文、対象・料金・時間、写真のsrcとalt、受付の説明とhrefです。altは実際の写真の内容へ、widthとheightは使う画像の寸法へ合わせます。料金は本文だけでなくdescriptionにもあるため、両方を直します。

HTMLを少し直すたびに、ファイルを保存します。画面上の見出しだけを変更しても、ブラウザのタブに出るtitleやリンク先は自動では変わりません。

index.htmlをダブルクリックするか、ブラウザの「ファイルを開く」で選びます。アドレスがfile:で始まる表示は自分のパソコン内の確認です。そのURLをInstagramに貼っても、ほかの人向けの公開URLにはなりません。

1. タブの屋号、ページの説明、料金と対象範囲を元の材料と照合する。
2. 写真が出なければ、srcのimages/photo.jpgと実際の保存場所・拡張子を見比べる。
3. 受付先を差し替えた後、リンクを開き、正しい店舗・サービスの受付画面か確かめる。受付画面が開いたことと、実際に送信できたことは分けて記録する。
4. ブラウザの幅を狭め、文章が画面外へ出ないか、料金・受付リンクが読めるか確認する。

修正したら保存し、ブラウザを再読み込みします。古い内容が残るときは、編集しているファイルと開いているファイルが同じ場所か確かめましょう。手元で表示できても、公開先で写真の参照が合うかは改めて確認します。

「無料サーバー」を探すときも、今回は完成したHTMLと画像を置く用途にそろえて比較します。編集画面の付いた作成サービスや、WordPressの動作環境とは別です。下の2方式は公式に手動アップロードが案内されています。

無料枠があることと、自店の利用が追加費用なしで続くことは別です。契約前に、Cloudflareの制限やNetlifyのプラン条件で、ファイル・転送・公開や更新の利用枠、上限時の扱い、事業利用の条件を確認します。ここでは現行の料金額や自店への適用は確定していません。

独自ドメインを使うなら、取得費・更新費、接続条件、管理担当も別に確認します。受付サービスも、このHTMLの公開とは別の契約・設定です。費用の確認ページで同じ利用期間にそろえ、分からない条件を0円で埋めないようにしましょう。

手元で確認を終え、条件に納得したら、選んだ公開先の公式手順へ進みます。初回のアップロードでは、index.htmlが公開対象のいちばん上に来るようにします。Cloudflareも静的HTMLの説明で、ルートのindex.htmlを確認するよう案内しています。

1. CloudflareならWorkers & PagesからCreate application → Get started → Drag and drop your filesへ進み、対象フォルダーを指定する。Netlifyならログインした管理先のドラッグ＆ドロップ領域へフォルダーを指定する。
2. 公開先が示すURLと対象プロジェクト名を控える。フォルダー内のindex.htmlとimagesを一緒に反映する。
3. 管理画面のプレビューだけでなく、公開URLをPCとスマホで開く。閲覧制限の有無も含め、届けたい相手の状態で確認する。
4. 料金、写真、受付先を照合する。受付画面へ進めても、予約や受信が完了したとは記録しない。

公開先のファイルだけを唯一の原稿にせず、手元の編集用フォルダーと更新前の控えを保管します。次回も、そのフォルダーを直して同じプロジェクトへ反映してください。

まずは受付URLと公開担当を埋めましょう。どちらかが未定なら、配布できる案内の完成とはせず、確認待ちとして残します。下の欄はサーバーへ送信・保存しません。編集した内容を選択して、自分のメモへコピーしてください。再読み込みやページを閉じる前に控えます。

ファイルの編集とアップロードを自分で続ける方法が合うなら、このメモと原稿をセットで保管します。写真と情報から下書きを作り、画面で整える方法を選びたいならMiniLaunchも候補です。現行FAQの公開条件を確かめて検討してください。他社HTMLをそのまま取り込めるという案内ではありません。