テストファイルを作ろう

エディタも用意し、拡張子も表示され、いよいよファイル作りです。

「はじめに」のページにも書かれていますが、
今回は初めてのホームページ作成ということで、出来るだけあなたが効率的にホームページが作れるように必要なファイル(主に画像素材)をパックにしたものを用意しています。
このページから必要になるので、まだの人は、下のリンクからダウンロードしてくださいね^^

★必ずダウンロードしてください★「無料ホームページ作成講座『初めてWeb入門』」で必要なファイルをダウンロード(zipファイル)※講座の解説と合わせるために、デスクトップに保存しましょう。
それでは、今まで通り、いきましょう。

手順1:ダウンロードしたフォルダを開く

※画像ではフォルダ名が「初めてWeb入門」となっていますが、電子書籍版ではなくPC版(このページを見ているあなた)は「nyumon-kit」となっているはずです。

手順2:「first_web」というフォルダをデスクトップにドラッグ(移動)

※ドラッグは、フォルダの上でマウスの左を押して(クリック)、そのまま移動したい場所までマウスを動かして、移動したい場所まで来たら、押し続けていたマウスの左を離せばできます。

手順3:移動できたら、「first_web」フォルダをダブルクリック

手順4:何もないところで右クリックをして「新規作成」から「テキストファイル」をクリック

手順5:左の図のようになるので、文字をいったん消して、「index.html」と書き換え


※このindex.htmlを見て、気がつきましたか?
そうです!ウェブサイトの情報を表す拡張子は、”.html”なのです!

手順6:「拡張子を変更すると、ファイルが使えなくなる可能性があります。」と出てきますが、使えなくならないので「はい(Y)」をクリック

手順7:左のように表示されるので、「index.html」ファイルの上で右クリックをし、更に「Crescent Eveで開く(E)」をクリック

※多くの人はこの画像のようにInternetExplorerのアイコンが表示されると思いますが、人によってはGoogle ChromeやFirefoxといった別のアイコンになっているかも知れません。万が一、ここのアイコンが違っても大丈夫ですので安心してくださいね^^


【「Crescent Eveで開くをクリック」が無い?】
使っているパソコンの種類や設定によっては、「Crescent Eveで開くをクリック」が出ないことがあります。 そんなときは、ファイルを右クリックした時に出てくる「プログラムから開く」の「既定のプログラムの選択」を選択し、「Crescent Eve」を選択してOKを押しましょう。
これでCrescent Eveでindex.htmlファイルを開けるハズです。

手順8:Crescent Eveが開くので、何か好きな言葉を入力する

手順9:書いたら、フロッピーのアイコンをクリックして保存(上書き保存です)

手順10:Crescent Eveを閉じるため、右上の×ボタンをクリックして終了

手順11:先ほどの「first_web」フォルダに戻って、「index.html」ファイルをダブルクリックして開く

結果:完成! お疲れ様でした!

・・・というわけです。

ウェブサイトは、こんな感じで、作ります。
もちろん、文字だけではあまりにも味気ないので(笑)、いろいろとデザインする方法は、第三章から解説していきます。

それでは、あなたのやること、2つ目に入りましょう。

関連記事

  1. 2カラムデザインを実装する

  2. 【練習】このページを作りなさい

  3. 入門を終えたあなたがプロ並みのウェブデザインを構築できるあらゆる理由

  4. 新しいページを作る

  5. 横方向にセルを連結する

  6. 文字の色を指定する

お手本ナビの無料HPデザイン

ランダムピックアップ