初心者向け
ホームページの
作り方講座

トップページの土台を準備

まずは、ホームページってこんなのでできてるんだ~という事を把握する為に簡単なサイトを作ってみましょう。

今回作るデザインはコレです。

1カラムのシンプルな企業向けデザインです。
今回は初心者向けという事でシンプルなものから紹介を開始したいと思いますが、将来的にはホームページテンプレートを使ったより本格的なものへとグレードアップしたご案内をしたいと思っております。今回は色々な基礎を学んでみましょう。

HP用のファイルをまとめるフォルダを作っておきましょう

HP用に色々な「ファイル」類が増えていきますので、それをまとめて入れておく為の専用の「フォルダ」を作っておきましょう。
「フォルダ」というのは、書類ケースのようなもので、「ファイル」はその中に入れる書類1枚1枚のようなイメージです。

デスクトップ上の何もない所で「右」クリックします。

「デスクトップ」というのはパソコン起動時にいつも見ている画面の事です。TeraPadのアイコンなどもデスクトップにあると思います。

デスクトップ上に新しいフォルダーができますので、HPと入力して下さい。

名前の変更がうまくできなかった場合、一旦フォルダ上で「」クリックし、出てきたリストから「名前の変更」を選択すると名前が変更できます。又は、フォルダーを選択した状態でキーボードのF2キーを押しても同様に名前の変更ができます。

「HP」というフォルダができればOKです。

TeraPadを開いて土台用のタグを入力する

いよいよトップページの土台を準備します。
TeraPadを開いて以下のタグを貼り付けて下さい。(※タグのコピーと貼り付け方はこちら

↓貼り付けるタグ

貼り付けたら新規で保存します

ファイル」メニューをクリックし、出てきたリストから「文字/改行コード指定保存」を選択します。

ウィンドウが出てきますので、文字コードから「UTF-8」を選択し、「名前を付けて保存」にチェックを入れて「OK」ボタンを押して下さい。

すると、保存先を選ぶ為のウィンドウが出てきます。下の画像のように「デスクトップ」というボタンがあればそれをクリック。なければリストから「デスクトップ」を選択します。

デスクトップの情報が出てきますので、上のステップで作った「HP」フォルダをクリックし、ファイル名に半角文字で「index.html」と入力し、「保存」ボタンをクリックして下さい。

ファイル名は全て半角文字で入力し、日本語などの全角文字や記号などは使わないで下さい。

保存されました。

通常、ホームページのトップページは「index.html」になります。

本当にちゃんと保存できているか確認

実際のデスクトップ上にある「HP」アイコンをダブルクリック又はシングルクリックして開きます。

以下のように、「index.html」というファイルが1枚入っていれば成功です。

index.htmlを開いてみましょう

ダブルクリック又はシングルクリックでindex.htmlを開いてみます。
以下のように、1行だけ文字が入ったページを見る事ができましたか?
まだこれはあなただけにしか見る事はできません。前のステップで用意したサーバーにアップする事によって、初めてみんなに見てもらえるようになります。

次のステップは…

「トップページを少し編集」です。頑張りましょう!