STEP 05

HTMLのページを追加・削除する

既存ページをコピーして使えば、白紙からHTMLを書く必要はありません。ページ名、本文、メニューリンクを順番に直して、新しいページを安全に追加します。

1. 新しいページは既存HTMLをコピーして作る

初心者が新規ページを作る場合、白紙から書くより、内容が近いページを複製するのが安全です。例えば「料金案内」を追加するなら service.html をコピーします。

COPYservice.html

元になる既存ページ。

NEWprice.html

コピー後にファイル名を変更。

ファイル名： 半角英数字とハイフンを基本にし、空白や全角文字は避けるとトラブルが少なくなります。

2. <title> とページの見出しを変更する

コピーしたままだと検索結果やブラウザのタブに元ページのタイトルが残ります。<head> 内の <title> と説明文を変更します。

ページタイトルprice.html
<title>料金案内｜NEXA</title>
<meta name="description"
 content="サービス料金とプランをご案内します。">

本文の <h1> も「料金案内」など新しいページ内容に合わせます。

3. 本文はセクション単位で編集する

コピー元の本文をそのまま残さず、不要なセクションを削除し、必要な見出し・文章へ置き換えます。削除するときは開始タグから終了タグまでをひとまとまりで扱います。

1つのまとまりHTML
<section class="content-section">
  <h2>料金プラン</h2>
  <p>ここに説明を書きます。</p>
</section>

5. 不要なページを削除する場合

例えば実績ページが不要なら works.html を削除できます。ただし、先に全ページのメニューや本文から works.html へのリンクを外します。

おすすめ手順： ①リンクを外す → ②ブラウザで確認 → ③不要ファイルを削除、の順ならリンク切れを防ぎやすくなります。

6. フォルダを増やす場合は相対パスに注意

最初のうちはHTMLを同じ階層に置くのがおすすめです。サブフォルダを作ると、CSSや画像へのパスに ../ が必要になる場合があります。

SIMPLEprice.html

css/style.css のまま使いやすい。

SUB FOLDERpages/price.html

../css/style.css など調整が必要。

7. 最後の確認

  • 新しいページのtitle・description・h1を変更した
  • サンプル文章が残っていない
  • メニューから新ページへ移動できる
  • 削除ページへのリンクが残っていない
  • CSSと画像が正常に読み込まれている
NEXT STEP

最後は、サーバーへ公開します。

ファイル構成を保ったままアップロードできれば、HTMLサイトはインターネット上で表示できます。

STEP 6へ →