CSSによるwebサイトのナビゲーション

コンテンツが複数ページにわたるWebサイトには ほとんどの場合ナビゲーションメニューが必要です CSS、リスト、nav要素を使用して ユーザーが簡単にWebサイトをナビゲートできる 軽量なナビゲーションメニューを作成しましょう プロジェクトファイルをダウンロード、展開して 手順に従って作業してみてください ここに、ほとんど完成したページがあります この番号なしリストのスタイルを整えて ページのメインメニューナビゲーションにしていきます 分割ビューに切り替えると、番号なしリストが ページのnav要素内に含まれているのが確認できます navセクションにメインナビゲーションリンクが表示され これらのリスト項目をハイパーリンクに変える アンカーリンクが既に追加してあります このファイルをWebブラウザーでプレビューしましょう こちらのファイルメニューから 「ブラウザーでプレビュー」を選択します リンクをテストすると、うまく機能していますね ただし、まだWebページのメインメニューらしいスタイルではありません Dreamweaverに戻って、その問題を解決しましょう ここでは、時間の節約のためにnavセレクターのCSSルールを 既に定義してあります CSSデザイナーのパネル内で検索して それを表示します こうすると、ページの右側の好きな場所に 配置が可能になります では、スタイルの整ったメニューにするために追加できる いくつかのプロパティをご紹介しましょう まず、表示からブレットを削除します これはリスト全体を設定するプロパティです CSSデザイナーでstyle.cssを選択して、変更の適用が リアルタイムで確認できるように CSSファイルを選択します CSSデザイナーに戻って 「ul」セレクターを追加します プロパティ内のテキストカテゴリから list-style-typeを「なし」に設定すると ブレットが表示から削除されました ですが、リスト項目はまだ縦に並んでいます リスト項目のような一部のHTML要素は CSSで指示をしない限り デフォルトで、新たな一列の行で表示されてしまいますので 現在フォントと間隔のプロパティのスタイル設定をしている 既存のliセレクターを更新します displayプロパティを追加して 「inline-block」に設定します リスト項目が同じ行に並んで表示されましたね 最後の仕上げに、CSSを追加して エンドユーザーがメニュー選択部分に マウスを合わせると、テキストカラーが変わるようにしてみます 疑似セレクターを使えば、マウスをリンクへ移動するなど ある要素の状態が変化したときの その要素のスタイルを設定できます a（アンカー）セレクターの疑似セレクターを追加してみましょう CSSデザイナーで 新規のセレクターを追加して アンカータグ名の「a」と「コロン（：）」を使用して 次にアクションを選択します この場合は「hover」です そして、テキストカテゴリでカラーを赤に変更します これで、ライブビューでリスト項目にマウスを合わせると かすかに変化するのがわかり 結果的に、見栄えとユーザー体験が向上します Webページのメニューナビゲーションには、メニュー項目、カラー ページ上の配置など、様々なプロパティがあるでしょうが このビデオで説明した一般的なテクニックを適用すれば 他のWebページでも、メニューのスタイルを整えることが可能です さらには、訪問者がページのコンテンツを操作する際に 様々な効果をメニューに適用する CSSトランジションを試してみるのもいいでしょう