回答準備 フォルダとindexの作成方法

[戻る]

最初に練習問題に回答するための場所を作り、必要なファイルを揃えましょう。

rensyuフォルダの作成

作業用のフォルダ内に rensyu フォルダを作ります。

  1. 作業用フォルダを開きます。OneDrive フォルダの中など、作業場所を決めましょう。
    もし Microapache などサーバーを使って課題に取り組む場合は、htdocs フォルダを使用してもＯＫです。Microapacheサーバーについて詳しくは第３回の資料を参考にしてください。

  2. 今回の課題のために新しいフォルダを作ります。

    新しいフォルダは、ウインドウ上部の [ホーム] → [新しいフォルダー] ボタンを押すか、ウインドウ内の白い部分で [右クリック] → [新規作成] → [フォルダ] などで作成できます。
    Macの場合はFinderでフォルダを作りたい場所を開き、Shift+Command+N キーを押すとフォルダを作れます。

  3. 新規作成したフォルダの名前を rensyu と名付けます。
    フォルダの名前は、フォルダ作成直後に名前を入力するか、フォルダを [右クリック] → [名前の変更] で設定できます。
    入力を終えたら、Enter キーを押して名前を確定します。

必要なファイルを作成する

これから作成する練習問題は、rensyu1.html rensyu2.html rensyu3.html……のようなファイル名で作成する予定ですが、これらのファイルにアクセスするためのメニューとなるページ index.html を rensyu フォルダ内に作成します。

そして index.html から、それぞれの練習問題へとアクセスできるようにします。


作成イメージ

HTMLファイルをゼロから作成するのは大変なので、基礎実習ページのサンプルを利用したり、既存のHTMLファイルをコピーして使いまわしたりするなど、工夫すると良いでしょう。

index.htmlを作成する

基礎実習ページ掲載の 新規HTMLページ作成用サンプル などから index.html を調達できます。

上記ページにアクセスしたら、赤丸の部分をクリックすれば、サンプルファイルをダウンロードできます。作業用フォルダ内の rensyu フォルダ内に index.html という名前で保存しましょう。


↑赤丸の部分をクリックしてダウンロード

別の方法として、既に存在するHTMLファイルを使いまわすこともできます。

その場合は、過去に作成した課題のHTMLファイルなどを「右クリック」→「コピー」（Ctrl + C）し、rensyu フォルダ内で「右クリック」→「貼り付け」（Ctrl + V）すれば、ファイルを複製できます。

Macの場合はFinderで元ファイルを選択し、Command+D キーを押すと、すぐに複製が作れます。

ファイル名が index.html でない場合は、「右クリック」→「名前の変更」などでファイル名を index.html に適宜 変更してください。

index.html の内容を修正する

  1. rensyu フォルダ内に作成した index.html を、テキストエディタで開き、今回の課題に合うように、ページの内容を修正します。

    注意：index.html という名前のファイルは、他の場所にもあるかと思います。現在のフォルダ位置に注意して、rensyu フォルダ以外にある、別の index.html を誤って書き換えないこと。現在のフォルダ位置は、ウインドウ上部のアドレスバーで確認できます。
    フォルダの階層構造が見えますが、簡単に言うと、末尾が現在のフォルダなので、末尾が「rensyu」になっていることを確認してください。


    ↑赤枠の部分がファイルの現在位置を示しています。

  2. ページタイトルを決めます。「CSS練習問題」などとしておきましょう。
    ： 省略
    <head>
    <title>CSS練習問題</title>
    </head>
    ： 省略

  3. 本文に相当する部分 ( <body>～</body> の内部 ) を一旦削除し、見出しや学生番号と氏名を記載しておいてください。

    ： 省略
    <body>
    <h1>CSS練習問題</h1>

    学生番号 ○○○○○○○<br>
    氏名　□□□□<br>
    <br>

    </body>
    ： 省略

  4. 本文中に、後に作成する練習問題 ( rensyu1.html ～ ) へのリンクを作成しておいてください。

    ： 省略
    <body>
    <h1>CSS練習問題</h1>

    学生番号 ○○○○○○○<br>
    氏名　□□□□<br>
    <br>
    <a href="rensyu1.html" target="_blank">練習１</a><br>
    <a href="rensyu2.html" target="_blank">練習２</a><br>
    <a href="rensyu3.html" target="_blank">練習３</a><br>
    <a href="rensyu4.html" target="_blank">練習４</a><br>
    <a href="rensyu5.html" target="_blank">練習５</a><br>


    </body>
    ： 省略
    各リンクは数字が異なる以外はよく似た内容なので、「コピー（Ctrl+C）」と「貼り付け（Ctrl+V）」を使って全く同じリンクを複製した後、数字の部分だけ修正すると効率が良いでしょう。
  5. 上書き保存すれば、index.html の作成は完了です。

動作確認する

作成した index.html が正しく表示できるか確認しましょう。

Microapache サーバーを使っている場合、htdocs フォルダ内に rensyu フォルダを作成したなら、アクセスするために http://localhost:8800/rensyu/ にアクセスすると表示できるはずです。

もし Microapache サーバーが無い場合は、rensyu フォルダ内の index.html をダブルクリックするなどして、ブラウザに表示させて確認しても良いでしょう。

どちらの場合も、以下のように表示されれば回答準備は完了です。前のページに戻って、各練習への回答を行ってください。

CSS練習

123456
山田太郎

練習１
練習２
練習３
練習４
練習５

ブラウザの「←戻る」ボタン、または下の「戻る」で戻って、次のページに進んでください。