スティッキーなナビバーを作成することは、ウェブサイトのナビゲーション体験を向上させる素晴らしい方法です。しかし、どのようにCSSでスティッキーなナビゲーションを作成するのでしょうか？
以下は、あなたのWordPressウェブサイトに簡単にコピーできるコードスニペット付きのステップバイステップの手順です：
1.HTML構造を設定する
基本的なHTML構造を設定することから始めましょう。これにはナバー用の<header> 要素とコンテンツ用の<section> が含まれます。
htmlコピア・コード<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
2.基本的なスタイリングのためのCSS
以下のCSSを追加して、ナバーとコンテンツをスタイルする。これは、スティッキーにする前に外観を設定します。
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px; /* For demonstration purposes */
}
3.ナビバーをスティッキーにする
スクロールするとナビバーが上に張り付くようにするには、position: sticky プロパティを追加します。
cssKopier kode/* Make navbar sticky */
.navbar {
position: sticky;
top: 0;
z-index: 1000; /* Keeps the navbar above other content */
}
4.スティッキー・ポジションの仕組み
position: sticky:この CSS プロパティは、あるスクロール位置に達するまで要素を相対位置に保ち、それ以降は指定した位置に固定します（top: 0のようなもの）。top: 0:ナビバーを上端からどの程度離すかを指定します。z-index: 1000:ナビバーが他の要素の上に留まるようにします。
5.追加機能強化（オプション）
より美しく見せるために、シャドウ効果や背景色のトランジションを追加することもできる。
cssKopier kode/* Optional enhancements */
.navbar {
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar.sticky {
background-color: #222;
}
6.最終的なHTMLとCSSコード
以下は、スティッキーナンバーの完全なコードです。
HTML
htmlコピア・コード<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
CSS
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
.navbar.sticky {
background-color: #222;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px;
}
7.ワードプレスでの実装
このコードをWordPressのウェブサイトに追加する：
- HTMLコード
- WordPressエディターのカスタムHTMLブロックを使用します。
- ナビバーとコンテンツを表示したい場所に、このブロックの中にHTMLコードを貼り付けます。
- CSSコード
- WordPressのダッシュボードにアクセスする。
- Appearance > Customize > Additional CSS に移動します。
- そこにCSSコードを貼り付ける。
8.準備万端！
これであなたのウェブサイトに機能的なスティッキーナンバーができました。あなたのサイトのデザインに合わせて自由にスタイルをカスタマイズしてください。
