準備：MAC

1.最初にディレクトリ（ホームページのデータを格納しておくフォルダー）を作る

  1. デスクトップ上の任意の位置にポインターを置き、キーボードで「command+shift+n」でデスクトップ上に「名称未設定フォルダ」が生成される
  2. フォルダー名の青色の部分に、全て英数半角で『学籍番号（8桁）_（アンダーバー）苗字をローマ字』を入力する（例：31410021_kaneko）
  3. 「学籍番号_苗字をローマ字」のフォルダーを開いてウインドウ上部の「アイコン表示」のマークを選ぶ
    （フォルダーは開いたままにしておく）
  4. 「img.zip」をダウンロードする
  5. ダウンロードフォルダ内の「img.zip」→ダブルクリックで解凍→フォルダ「img」を生成される
  6. 「img」を「学籍番号_苗字をローマ字」の中に移動し、画面右下のスライドバーでアイコンの大きさを自分の見やすいサイズに調整する
  7. 「img」を開いて以下の4つの画像ファイルが入っていることを確認し、確認したらフォルダ「img」を閉じる

2.使用するアプリをすぐに開けるように準備する

  1. 「Macintosh HD」→「アプリケーション」から「テキストエディット.app」と「プレビュー.app」をDockに入れておく
    「Macintosh HD」が見つからない場合
  2. アプリケーションから「Chrome」もDockに入れておく
    （インストールしてない場合はダウンロードしてインストールする）
  3. Dockの「テキストエディット.app」のアイコンをクリックで最後に開いたフォルダー（ファイル一覧）がデスクトップ上に表示されるので「キャンセル」をクリック
  4. メニューの「テキストエディット」から「環境設定を選ぶ」
    （2回目の授業で設定済みに場合も、もう一度確認しましょう）
  5. 「新規種類」を以下のように設定する
    ・標準テキストのフォント：「変更」は次（6.）の図を参照
    ・赤枠部分は設定を変更する部分、それ以外はデフォルト
    ・機種によってデフォルトが異なる可能性もあるが、いずれにしても下図同等に設定する
    ・スペルチェック系の項目がチェックされていると文字の下に赤の波線が表示される
  6. フォントのファミリーは「メイリオ」を選択
    ・「メイリオ」が無い場合は「Osaka」「MSゴシック」「小塚ゴシックPro R」「Helvetica」「ヒラギノ角ゴシック」の中から選ぶ
    ・サイズは「14」にするが、視力に応じて大きくしても良い
  7. 「開く／保存」を以下のように設定する
    ・赤枠部分は設定を変更する部分、それ以外はデフォルト
    ・機種によってデフォルトが異なる可能性もあるが、いずれにしても下図同等に設定する

3.テキストエディット.appを開き1行だけソースを書いて保存する

  1. Dockのテキストエディット.appのアイコンをクリックしてテキストエディット.appを起動
    この時、最後に開いたフォルダー（ファイル一覧）がデスクトップ上に同時に表示される
  2. メニューの「ファイル」から「新規」で「名称未設定」の白紙のウインドウが現れる
    この時、最後に開いたフォルダー（ファイル一覧）は消える

    白紙のウインドウの最初の1行に<!DOCTYPE html>と全て半角で打ち込み「保存」を選ぶ
  3. 名称に「index.html」と全て半角で打ち込み
    「標準テキストのエンコーディング」で「UTF-8」を選び
    「デスクトップ」の「学籍番号_苗字をローマ字」をダブルクリックして開き
  4. 「学籍番号_苗字をローマ字」の中で「保存」をクリック
  5. 「学籍番号_苗字をローマ字」を開き、中にフォルダ「img」とファイル「index.html」が入っていることを確認する
  6. ファイル「index.html」のアイコンにオンマウスで右クリック→「情報を見る」を選ぶ
  7. 情報ウインドウの中の「このアプリケーションで開く」→「テキストエディット.app」を選ぶ
    「テキストエディット.app」が見つからなかった場合→コチラ
  8. 「テキストエディット.app」の下の「すべてを変更」をクリックで、MacOSアイコンが表示されるので「続ける」をクリック
  9. 情報ウインドウを閉じる。これで拡張子が「.html」のファイルは、アイコンクリックで全て「テキストエディット.app」で開くようになる
  10. 「学籍番号_苗字をローマ字」のフォルダは閉じてデスクトップに置いておく
    ★次回はここからスタート

4.ディレクトリの最終形はこうなる（今はこうなっていない）

  1. 以下は完成形のディレクトリ
    これからファイルやフォルダを制作していって、完成したホームページのディレクトリ
    (決められたフォルダ内に決められたファイルが置かれていないと動作しない）
  2. 完成形のディレクトリでの新規制作と支給ファイルの種別（グリーン枠は支給ファイル）
　BACK