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

トップページの編集の続き

前のステップでホームページの枠が見えるようになったので、今度はhtmlに戻って中身を詰め込んでいってしまいます。

お弁当箱を思い出してみましょう

お弁当箱の図を思い出してみて下さい。一番外側のお弁当箱がcontainerで、その中に上からheader、nav、contents、footerと続いていましたね。これをindex.htmlに入力していきます。

index.htmlをTeraPadで開きます

containerの中に上の各パーツを詰め込んでいきます。

お弁当箱の枠組みは前のステップで見えるようになったので、
●ここがホームページで表示される部分です●
の文字はもう削除してもらってOKです。

削除した箇所にまずheaderから詰め込んでいきます。

↓手打ちに自信がない人は以下のタグをコピペ。

続いて、nav、contents、footerも続けて入力します。

↓手打ちに自信がない人は以下のタグをコピペ。

では、ここまでで使ったhtmlタグを記載してみます。

<header>~</header>

文字通りページの冒頭部分を表す際に使います。section内で使ったりもしますが、当サイトでは主にサイト名が入った部分をheaderで表しています。

<nav>~</nav>

主要なメニューに使います。<ul>タグや<li>タグと合わせて使う場合が多いのですが、下のステップで改めて解説します。

<footer>~</footer>

文字通りページの最後に使います。section内で使ったりもしますが、当サイトでは主に著作表示(copyright)がある部分をfooterで表しています。

ちょっと補足

<div>というのは汎用的に使えるボックスで、それらに意味を持たせたものが<header><nav><footer>にまります。ちょっと難しいのでここでは割愛させて頂きます。

また、お気づきかと思いますが、<div>にはそれぞれidの設定が入っています。<div>は今後も沢山出てくるので、cssの指定をする際にどこの<div>に対して使うのかという区別をする為に名前をふっておく必要がある為です。
例えば、<nav>も他に出てくるなら、どこのnavか分かるようにidをふっておく場合もあるでしょう。

headerにサイト名を入れる

お弁当箱の設計図にはheaderサイト名を入れる事になっています。
あなたのホームページ名を考えて入れてみましょう。

今回使うタグは、 <h1>~</h1> です。これは大見出しを意味します。

↓以下タグをコピペして使って下さい。

次にメニューを入れる

メニュー本体は、 <ul>
<li>(ここにメニュー1行分)</li>
</ul>
を使って表記すればOKなのですが、その中で主要なメニュー<nav>で囲みます。
<nav>
<ul>
<li>(ここにメニュー1行分)</li>
</ul>
</nav>

コピペ用のタグは1つ下のステップでまとめて置いています。

メニューにリンクを設定する

index.htmlをプレビューで見てみると分かりますが、まだクリックして別ページに移動する事ができません。

クリックして別ページに移動する設定(リンク設定)をしましょう。
リンク設定は、
<a href="#">~~</a> というhtmlタグを使います。「#」には移動先のhtmlファイル名を、「~~」にはクリックさせたい文字や画像タグなどを入力します。今回のメニューにそれぞれリンクタグを追加してみると以下のようになります。

メニュー名とリンク先となるhtmlファイル名はあなた自身の環境に合わせて変更して下さい。htmlファイル名は半角文字で入力しますが、メニュー名の方は日本語で構いません。メニュー名はホームページ上に出てくる文字になります。
↓念の為、ここで使ったタグを記載しておきます。

footerに著作表示を入れます

footerにあなたのホームページであるという意味を示すタグを入れます。

↓「サンプルカンパニー」だけ変更して以下のタグを使って下さい。

&copy;」という文字は、ホームページ画面側から見ると以下のように©マークになります。

<small>タグで囲っていますが、copyrightにこのタグを使われる場合が多いようなのでこれを使いました。

ここで一旦index.htmlをブラウザで開いてプレビューしてみましょう

下線が入っていてマウスをのせるとクリックできる手のマークになりますね。まだ他のページは作っていないので、トップページ以外はクリックしてもエラーが出るだけです。

ここである程度のデザインを決めちゃいましょう

重要なパーツはある程度入れたので、cssファイルでホームページ全体のデザインを作りこんでみましょう。

次のステップは…

「cssでデザインを固める」です。頑張りましょう!