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

トップページを少し編集

ホームページの構造を考えましょう

お弁当箱をイメージしてみて下さい。
お弁当箱をcontainer(荷物を運ぶ「コンテナ」と同じ言葉です)にします。このお弁当箱(container)の中に色んなパーツを配置します。
今回の場合は、一番上にheader(ヘッダー:サイト名を入れる箱)、その下にnav(ナビ:メニューを入れる箱)、その下にcontents(コンテンツ:内容を入れる箱)、一番下にfooter(フッター:著作表示を入れる箱)を配置する事にしました。

トップページファイルをTeraPadで開いてみましょう

デスクトップ上にある「HP」フォルダの「index.html」ファイルをダブルクリック又はシングルクリックして開いて下さい。

開いたら、TeraPadアイコンが見える所まで移動します。ウィンドウの上の何もないところにカーソルを合わせ、左クリックをしたままにした状態で移動ができます。

次にindex.htmlを左クリックしたままTeraPadの方へ移動します。



以下のように無事に開く事はできましたか?

もし開いたウィンドウが大きすぎたり小さすぎたりした場合、以下のようにサイズを調整する事が可能です。

お弁当箱をつめていく。

いよいよホームページ本体の作りこみに入ります。お弁当箱のイメージを改めて見てみましょう。一番外枠がお弁当箱の「container」でしたね。まずこのお弁当箱を設置します。

TeraPadに以下の2行のタグを書き込みます。

↓手打ちに自信がない人は以下のタグをコピペしちゃって下さい

※TeraPad上での改行はホームページ側には影響しません。見やすいようにパーツごとに適度に改行をあけておくといいでしょう。

さて、「container」の文字は分かりますけど、「div」って何?「id」って何?という感じですね。

<div>~~</div>

簡単に書けば「div」は汎用的に使える「」で、「id」が箱に名前を付ける前に挟む言葉…みたいに簡単に覚えておいてもらえればOKです。
つまり、この場合は「ここから始まるこの箱(div)の名前はcontainer(id="container")ですよ」といった宣言になります。

また、「この箱はここまでですよ」、という最後のしめくくり(終了タグ)が</div>の1行になります。この最後のdivには先頭にスラッシュ(/)が必要なので忘れずに。スラッシュがないと開始用のタグになってしまいます。

では、改めてindex.htmlをクリック又はダブルクリックして開いてみましょう。

…特に変化ありませんね。今設定した<div id="container">~の設定は一体何なのかといいますと、これからデザインを設定する部分に影響してきます。
今編集していたのは、htmlファイルですね。こちらにホームページ用のコードを書き込んでいくわけですが、見た目のデザイン部分は外部ファイル(cssファイル)に設定します。

次のステップは…

「cssファイルの土台を準備」です。頑張りましょう!