TOP > Expression > FAQ > 現在のページのナビゲーション部分をCSSでハイライトさせたい

現在のページのナビゲーション部分をCSSでハイライトさせたい

Google Bookmarks に追加 Check Yahoo!ブックマークに登録 このページをはてなブックマークに追加
最終更新日：2011/11/30 08:43:16

概要

現在見ているセクションに対応するナビゲーションエリアの項目をCSSでハイライトする方法について紹介します。 

今見ているセクションを視覚的にわかるようにするには

昨今のWebサイトにおいては、トップのナビゲーションやサイドバーのコンテンツメニューにおいて、今みているコンテンツはどこなのか、ハイライトする手法が使われています。こうすることによって、閲覧者は「今どこにいるのか？」ということが明確になるので、ユーザビリティの向上につながります。

私のサイトにおいても、上のタブの「web」、および、左側のサイドコンテンツメニューでは「Expression Web」がハイライトしています。

パンくずリストと併用することによって、より閲覧者にとって優しい、迷子になりにくいサイトとなるでしょう。

CSSでどうするの？

現在見ているページやコンテンツを強調させるには、CSSで実装できます。

スタイルを新規作成する

まず、ハイライトさせたいCSSをIDスタイル形式で記述します。ここでは例えば「#thispage」というCSSセレクタを作成します。

  1. ［スタイルの適用］または［スタイルの管理］作業ウィンドウから［新しいスタイル］をクリックします。
  2. ［新しいスタイル］ダイアログボックスにて、セレクタ名に「#thispage」と入力します。
  3. 定義先を指定します。リンクされた外部CSSファイルに作成する場合は、［既存のスタイルシート］を選択し、右側のボックスにてスタイルシートを選択します。
  4. 背景色を変更したい場合は、［背景］カテゴリを開き、［background-color］の値を指定します。
    新しいスタイル - #thispage
  5. 枠線をつける場合は、［枠線］カテゴリを開き、枠線スタイルおよび色、太さを指定します。
  6. 設定が終わったら［OK］ボタンをクリックします。

CSSスタイルの適用

ハイライトしたいリスト項目部分に、先ほど作成したCSSスタイルを適用します。

  1. ハイライトする部分を選択します。ここでは、クイックタグセレクタバーから<li>をクリックします。
  2. ［スタイルの適用］作業ウィンドウから、「#thispage」をクリックします。
    スタイルの適用作業ウィンドウから適用したいCSSスタイルを選択する画面

タグのプロパティを使ってスタイルを適用する方法

タグのプロパティ作業ウィンドウから、CSSスタイルを適用することもできます。
  1. リスト項目部分を選択しておきます。
  2. ［タグのプロパティ］作業ウィンドウから、［id］の右側▼ボタンをクリックして、一覧から「thispage」を選択します。
    タグのプロパティ - 属性 - idの設定

関連コンテンツ

INDEX

問題は解決しましたか？

操作方法、設定方法等で困ったら、Expression Web & FrontPage Users Forum に投稿してください！ 

▲このページのトップへ