私たちはすでにトップページ、会社情報ページ、商品ページ、
そしてお問い合わせページの4つのページを作成し、デザインしてきました。
しかし、ユーザーがこれらのページを自由に移動できなければ、全く意味がありません。
この問題を解決するために、
ヘッダーメニューにリンクを追加して各ページに移動できるようにしましょう。
ヘッダーメニューのHTMLを更新
最初に、ヘッダー内の各リンクのhref属性を更新します。
これにより、クリックすると各ページに移動します。
ヘッダーに関しては、こちらの記事をご覧下さい。
<header>
<div class="logo">
<h1>Company Name</h1>
</div>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">会社情報</a></li>
<li><a href="products.html">サービス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
CSSの調整
CSSについてはすでに完成しているので、そのまま使用します。
しかし、CSSの理解を深めるために、一部のコードを説明していきます。
header {
display: flex;
justify-content: space-between;
padding: 20px;
background-color: #333;
color: #fff;
}
このセクションでは、
ヘッダーのデザインを設定しています。
display: flex;とjustify-content: space-between;
はヘッダー内のロゴとナビゲーションメニューを横並びにし、両端に配置します。
padding: 20px;はヘッダーの内側の余白を設定します。
レスポンシブデザイン
レスポンシブデザインは、
ウェブサイトがどのデバイスからアクセスされても見やすくする重要な部分です。
このデザインはメディアクエリを使って実装します。
@media (max-width: 600px) {
header {
flex-direction: column;
}
nav ul {
flex-direction: column;
text-align: center;
}
}
このコードは、
デバイスのスクリーン幅が600px以下のときに適用されます。
ヘッダーとナビゲーションメニューは縦方向に並べられ、メニューは中央に配置されます。
これにより、
スマートフォンやタブレットなどの小さなデバイスからアクセスしたときでも
ユーザーにとって見やすいデザインになります。
ヘッダーメニューへのリンクの追加
以上のステップにより、
ユーザーはヘッダーメニューから各ページに簡単にアクセスできるようになります。
各<a>タグのhref属性に対応するHTMLファイル名を指定することで、リンクが有効になります。
今回の例では、ホーム、会社情報、サービス、お問い合わせの各ページにリンクを設定しました。
このようにして、ヘッダーメニューにリンクを追加することで、
ウェブサイトのユーザビリティが大幅に向上します。
ユーザーは必要な情報をすばやく見つけ、
各ページ間を自由に移動できます。
これはウェブサイト訪問者が目的の情報を見つけやすくするため、
また訪問者がウェブサイト全体を探索してもらうために重要です。
そして最後に、
このヘッダーメニューはレスポンシブデザインにも対応しています。
つまり、どのデバイスからアクセスされても、
メニューは適切に表示され、機能します。
このようにして、ユーザーはどのデバイスを使用していても最良の体験を得ることができます。
まとめ
以上がヘッダーメニューから各ページにリンクする方法についての説明です。
初心者の方でも簡単に理解できるように説明しましたが、何か質問があればお気軽にどうぞ。
次はフッターにリンクを追加し、ウェブサイトをさらに使いやすくしていきましょう！
レッツチャレンジ！
最近のコメント