1. リンク先のHTMLファイルを用意する
「ページを開く」をクリックしたときに表示したいHTMLファイルを用意します。
例として、一覧ページと同じフォルダに次のファイルがあるとします。
Sample_Website2_layout_fixed.html
page1.html
page2.html
page3.html
page4.html※ page1.html ～ page4.html はサンプル用の仮名です。実際に使うファイル名に置き換えてください。
2. 一覧ページのHTMLを開く
Sample_Website2_layout_fixed.htmlをコピーして、バックアップを作ります。- メモ帳やVisual Studio Codeなどのテキストエディターで開きます。
- 「ページを開く」または
href="page1.html"を検索します。
<a class="card-link" href="page1.html">ページを開く</a>3. リンク先を書き換える
href="..." の引用符の中がリンク先です。ここだけを変更すれば、ボタンのデザインはそのまま使えます。
例A：同じフォルダのHTMLを開く
<a class="card-link" href="英語タイピング.html">ページを開く</a>例B：サブフォルダ内のHTMLを開く
一覧ページと同じ場所に typing-games フォルダがあり、その中の index.html を開く場合です。
<a class="card-link" href="typing-games/index.html">ページを開く</a>例C：インターネット上のページを開く
<a class="card-link" href="https://example.com/">ページを開く</a>上記URLは説明用です。実際に開きたいページのURLに置き換えてください。
4. 4つのカードにそれぞれ設定する
HTML内にある4つのリンクを、開きたいページに合わせて変更します。
<!-- ① 1つ目のカード -->
<a class="card-link" href="page1.html">ページを開く</a>
<!-- ② 2つ目のカード -->
<a class="card-link" href="page2.html">ページを開く</a>
<!-- ③ 3つ目のカード -->
<a class="card-link" href="page3.html">ページを開く</a>
<!-- ④ 4つ目のカード -->
<a class="card-link" href="page4.html">ページを開く</a>それぞれの href の中身を、実際のファイル名やパスに置き換えてください。
5. カードのタイトルや説明文も変更する
カードに表示するタイトル・説明文・リンク先は、次のように編集できます。
<article class="card">
<h2>① 英語タイピングゲーム</h2>
<p>英単語をタイピングして練習するページです。</p>
<a class="card-link" href="typing-games/index.html">ページを開く</a>
</article><h2>...</h2>：カードのタイトル<p>...</p>：カードの説明文href="..."：リンク先ページを開く：ボタンに表示する文字
6. 保存して動作を確認する
- 編集したファイルをHTML形式（拡張子
.html）で保存します。 - ブラウザで一覧ページを開き直します。
- 「ページを開く」をクリックします。
- 指定したページが表示されるか確認します。
7. リンクが開かないとき
- ファイル名を確認：大文字・小文字、スペース、記号、
.htmlなどの拡張子が一致しているか確認します。 - フォルダ名を確認：
typing-games/index.htmlのように、フォルダ名も正確に指定します。 - ファイルの場所を確認：リンク先は、一覧ページの場所を基準に指定します。
- 公開サイトの場合：リンク先のファイルも公開先にアップロードされているか確認します。
- 仮リンクに注意：
page1.htmlなどは実在するファイル名に変更してください。
覚えておくポイント：基本的には href="ここ" の引用符の中だけを変更します。ボタンの見た目はそのままで、リンク先を変更できます。