見出し画像

【 WEBデザイン 】 ３ステップで速攻実装！！　「カレント表示」 　FirE♯521

S.A.P.Studio

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を変えれば、いくらでも使いまわせるコードですから、是非コピペして保存してください。


ポートフォリオサイト
現在別バージョンも制作中です！


この記事が気に入ったらサポートをしてみませんか？