ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


ホームページにメニュー作成 わかりやすくし訪問者様を誘導しよう

前回は、追加したhtmlファイルの編集を終え、4つのhtmlファイルを作成しました。

今回は、4つのページが行き来できるようにメニューを作成していきます。

1、メニューとは

メニューとは、その名の通りですがホームページでは訪問者さんが迷わないよう、どういったページがあるのかをメニューを設置しわかりやすくします。
このような部分は、ナビゲーションやカテゴリエリアなど人によってはさまざまな呼び方がありますが、ここではメニューとします。

 

また、メニューを設置することで他のページにも移動し閲覧してもらいやすくするといった効果もあります。訪問者さんのことを考えるとメニュー設置も自然なこと、当たり前のことなので、訪問者様にやさしいホームページ作成を心掛けましょう。

 

■今回メニューとして以下のものが挙げられます。

※参考例として今まで作成したhtmlファイルを元に挙げています。

・トップページ(index.html)
・プロフィール(profile.html)
・お知らせ(news.html)
・当ホームページについて(info.html)

※当サイトの説明通りでなく、ご自身でページ内容や本文などを作成した場合は、その内容に合わせて下さい

 

2、メニューを記述してみよう

設置したほうがイメージがつきやすいかと思いますので、さっそくhtmlを記述していきます。
以下のような形で、まずindex.htmlに書いてみましょう。
(わかりやすくご説明する為、簡易的な形でおこなっていきます)

※ファイルの開き方・保存方法、ブラウザでの確認方法などは省略しています。以前のページをご参考にして下さい。

 

■index.html編集

<body>
<h1>ホームページ作成 初心者 テストウェブサイト</h1>

<p>
トップページ、プロフィール、お知らせ、当ホームページについて
</p>

<h2>参考サイトとして</h2>
<p>
当サイトへようこそ!こちらのウェブサイトでは、ホームページを初めて作ろうとチャレンジする方の為に<br>
参考サイトとして用意しています。ブラウザからソースを表示などで確認することで、<br>
どのような形で作られているかも把握できますので、少しづつ自分のものにしていきましょう。<br>
</p>
<img src="01.jpg">
<h2>今後ページ数なども増やしていく予定です</h2>
↓===以下省略===↓
</body>

 

■index.html編集、参考イメージ
トップページにメニューを追加

 

■ブラウザで確認
トップページにメニューをブラウザ確認

しっかり表示(反映)されていることを確認。
このままだとメニューの区切りがわかりずらいので変更します。

 

■index.html再編集

<body>
<h1>ホームページ作成 初心者 テストウェブサイト</h1>

<p>
トップページ | プロフィール | お知らせ | 当ホームページについて
</p>

<h2>参考サイトとして</h2>
↓===以下省略===↓
</body>

 

■index.html再編集、参考イメージ
トップページ メニューをみやすく編集

 

■ブラウザで再確認
トップページ メニューをブラウザで確認作業

ちょっと変化を加えることで見やすくなります。

 

3、事項について

次回は作成したメニューにリンクを貼る作業をおこなっていきます。