【 WEBデザイン 】 ３ステップで簡単実装「カレント表示」

WEBデザイン

WEBサイトのグローバルナビゲーションのカレント表示を実装します。

カレント表示とは、例えばこのような感じです。  

   カレント表示   

 

画像
 
画像

 

今いるページのナビのリストだけに装飾をします。

 

これにより、ユーザーが現在どのページにいるかが分かりやすくなります。  

 
 
 

   HTML   

 

   準備 ①

各ページの<body>にクラスをつけましょう。

クラス名は任意です。

今回はこのようにクラスをつけました。

<!--トップページ index.html-->

<body class="top-page">
<!--事務所概要ページ about.html-->

<body class="about-page">
<!--業務案内ページ service.html-->

<body class="service-page">
<!--料金案内ページ price.html-->

<body class="price-page">
<!--解決事例ページ works.html-->

<body class="works-page">
<!--無料相談ページ contact.html-->

<body class="contact-page">
 

 

   準備 ② 

ナビの、<a>タグにもクラスをつけます。


       <nav class="global-nav">
         <ul>
            <li><a href="index.html" class="top">トップ</a></li>
            <li><a href="about.html" class="about">事務所概要</a></li>
            <li><a href="service.html" class="service">業務案内</a></li>
            <li><a href="price.html" class="price">料金案内</a></li>
            <li><a href="works.html" class="works">解決事例</a></li>
            <li><a href="contact.html" class="contact">無料相談</a></li>
         </ul>
       </nav>

これで準備完了です。

続いて、CSSで装飾をします。

 

   何をしたのか？？ 

各ページの<body>にクラスを付与することで、CSSで装飾する際に、ページを特定できます。

ナビの<a>タグにクラスを付与することで、<body>のクラスと、セットでCSSのセレクタに指定することで、
○○ページのナビの<a>タグだけをCSSで指定できます。  

 

 
 
 

   CSS   

例えば事務所概要ページ(<body class=”about-page”> )にいるときに、
ナビの「事務所概要」( <a class=”about”> )だけに
スタイルを適用する場合は、このように書きます。

.about-page .global-nav ul li a.about{
	border-bottom:2px solid #f46d19 ;
}

これで、.about-pageの中の、.aboutを指定できます。

そのほかのページもまとめて、CSSを書きます。

*======================================
カレント表示
========================================*/
.about-page .global-nav ul li a.about{
	border-bottom:2px solid #f46d19 ;
}

.service-page .global-nav ul li a.service{
	border-bottom:2px solid #f46d19 ;
}

.price-page .global-nav ul li a.price{
	border-bottom:2px solid #f46d19 ;
}

.works-page .global-nav ul li a.works{
	border-bottom:2px solid #f46d19 ;
}

.contact-page .global-nav ul li a.contact{
	border-bottom:2px solid #f46d19 ;
}

これだけで、移動したページのナビ部分だけ、スタイルが適用されます。 

 

 

 

   応用   

これを応用すれば、特定のページにだけ他のページと違うスタイルを適用することもできますね。

使い方は、あなた次第です！

 

 

 

 

   まとめ   

カレント表示について解説しました。

仕組みを理解すると、めちゃめちゃ簡単です。

クラス名を変えたり、CSSを変えれば、いくらでも使いまわせるコードですから、是非コピペして保存してください。

一覧へ戻る >