Home-theater-designers
Web デザインでは、スティッキー ヘッダーはユーザー エクスペリエンスとナビゲーションを強化する強力なツールです。ユーザーが Web ページを下にスクロールしても、固定ヘッダーが表示されたままになり、重要なナビゲーション リンクに常にアクセスできるようになります。 CSS を使用してスティッキー ヘッダーを構築する複雑な作業を詳しく見てみましょう。
今日のMUOビデオ スクロールしてコンテンツを続けてください
スティッキーヘッダーとは何ですか?
スティッキー ヘッダーは、ユーザーがスクロールしても Web ページ上の 1 か所に留まります。特定の CSS プロパティ、主に 位置: スティッキー 、この動作を達成するのに役立ちます。その結果：
- ユーザーは、上部までスクロールしなくても、メインのナビゲーション リンクに簡単にアクセスできます。
- ロゴやブランド名は目に見えるままになり、ブランドのアイデンティティを強化します。
- スティッキー ヘッダーでは、サイドバー ナビゲーションを削除してスペースを節約し、コンテンツのためのスペースを増やすことができます。
スティッキーヘッダーを使用すると、ユーザー エクスペリエンスが向上し、Web サイトのナビゲーションが容易になるなどの利点があります。
ヘッダーのデザイン: HTML 構造
スティッキー ヘッダーの基礎は HTML 構造です。ここでは、スティッキー ヘッダーに必要な HTML 要素を作成する方法を説明します。
<body>
<header>
<span class="logo">Company Logo 🏠</span>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="home"><h1>Home page</h1></main>
<section id="about"><h1>About</h1></section>
<section id="services"><h1>Services</h1></section>
<section id="contact"><h1>Contact</h1></section>
</body>
この構造では、ロゴを含むヘッダーと、ナビゲーション リンクの順序なしリストを含む nav 要素が使用されます。次に、main タグといくつかのセクション タグを使用して、ページ上の各セクションを表します。現時点では、ページは次のようになります。
CSS で基礎を築く
以下の CSS コードでは、 ボックスモデルのプロパティ パディング、マージン、フレックスボックスなどを使用して、各プレースホルダー セクションの高さを指定して魅力的なデザインを作成します。
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
main,
section { height: 100vh; }
.logo { font-size: 3rem; }
main,
header,
section {
display: flex;
align-items: center;
}
main { justify-content: center; }
header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb;
}
nav ul {
display: flex;
column-gap: 2rem;
list-style: none;
}
a {
text-decoration: none;
font-size: 2rem;
color: #333;
}
section { justify-content: center; }
#home { background: #2c3e50; }
#about { background: #ccccff; }
#services { background: #f5b7b1; }
#contact { background: #40e0d0; }
h1 {
font-size: 4rem;
color: #fff;
}
ページは次のようになります。
Windowsでpngをpdfに変換する方法
スティッキー効果の実装: CSS
現在、ページを下にスクロールすると、ヘッダーが画面外に移動していることがわかります。これを修正するには、次を使用します CSS 位置プロパティ そしてヘッダーをスティッキーに設定します。
このプロパティは、ユーザーのスクロール位置に応じて、相対位置と固定位置の組み合わせのように動作します。
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
ヘッダーをスティッキーに設定すると、スクロールに関係なくヘッダーがページ上の位置に固定されます。 top プロパティは、ページ上のヘッダーを配置する場所を指定します。ページを下にスクロールすると、次の結果が表示されます。
潜在的なスタッキング問題への対処
場合によっては、ページ上の他の要素がスティッキー ヘッダーと重なることがあります。ヘッダーが常に最前面に表示されるようにするには、z-index プロパティを追加します。
PCでアマゾンプライム映画をダウンロードする方法
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
最後に、ユーザー エクスペリエンスを向上させるために、スムーズ スクロール プロパティを HTML 要素に追加します。
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
ページはセクション間をスムーズにスクロールするはずです。
CSS スティッキー ヘッダーを使用して Web ナビゲーションを向上させる
Web サイトのデザインにスティッキー ヘッダーを追加すると、ユーザー エクスペリエンスが大幅に向上します。この機能により、ユーザーがメイン メニューにアクセスし続け、一貫したブランドが維持され、Web サイトにモダンな外観が与えられます。
CSS の機能を利用すると、この効果を簡単かつ効果的に作成できます。 Web デザインのトレンドは時間の経過とともに変化しますが、スティッキー ヘッダーはさまざまな業界にとって常に役立ちます。