CSS のみを使用して折りたたまれたヘッダー効果を作成する方法の例コード

折りたたまれたヘッダーは、特別オファーや重要なお知らせなど、ユーザーにとって重要な情報を表示するのに最適なソリューションです。多くの開発者は、このタイプの効果を作成するときに JavaScript に依存していますが、純粋な CSS を使用して、よりシンプルな折りたたまれたヘッダー効果を作成することは完全に可能です。

折りたたまれたヘッダーは、視差効果と同様に機能します。折りたたまれたヘッダーの背景は固定されたままなので、ユーザーがページを下にスクロールすると、その下のコンテンツがその上に流れていきます。このチュートリアルでは、次の折りたたまれたタイトル効果を作成する方法を説明します。

このプレゼンテーションは 3 つの部分で構成されています。

1. メイン メニューを含むページの上部にある、黒い背景の固定ヘッダー。
2. 特別オファーに関する追加情報を含む、青い背景の折りたたまれたヘッダー。
3. ユーザーは、折りたたまれたヘッダーの背景が白の残りのコンテンツまでスクロールします。

ヘッダーを折りたたむと、ユーザー エクスペリエンスが向上します。ユーザーは特別な情報を見たいときにいつでもスクロールできますが、残りのコンテンツを読んでいるときに邪魔になることはありません。

それでは、折りたたみヘッダーを段階的に作成する方法を見てみましょう。

1. HTMLを作成する

HTML は 3 つの主要な部分で構成されています。

固定されたトップメニューバーに使用され、.banner は折りたたまれたヘッダー、.article は残りのコンテンツに使用されます。コードは次のようになります。

 <div class="コンテナ"> 
        <ヘッダー>
            <ナビ>
                <ul class="メニュー">
                    <li class="logo"><a href="#">開発とデザイン</a></li>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">ブログ</a></li>
                    <li><a href="#">概要</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
        </ヘッダー>
        <div class="banner">
            <div>
                <h2 class="banner-title">次回のウェビナーをお見逃しなく</h2>
                <p class="banner-desc">今すぐサインアップして電子書籍を無料でお選びください</p>
            </div>
            <button class="btn-signup" type="button" onclick="location.href='#'">
                   ウェビナーへ移動 »
            </ボタン>
        </div>
        <記事クラス="記事">
            <p>...</p>
        </記事>
    </div>

2. CSSを使用して基本的なスタイルを追加する

まず、リセット スタイルとベース スタイルを定義して CSS を開始します。次に例を示します。

* {
	ボックスのサイズ: 境界線ボックス;
	マージン: 0;
	パディング: 0;
	フォントファミリー: サンセリフ;
	色: #222;
}
{
	テキスト装飾: なし;
}
ul {
	リストスタイルタイプ: なし;
}

3.トップメニューバーを配置する

固定メニューバーをページ上部に配置するには、

要素の位置は固定に設定され、z-index は 0 より大きい値に設定されます。 z-index のデフォルトは auto なので、要素の親よりも高い z-index 値にする必要があります。次のCSSでは99を使用しています。

要素の親:

ヘッダー {
	高さ: 70px;
	背景: #222;
	位置: 固定;
	幅: 100%;
	zインデックス: 99;
}

z-index: 99; ルールにより、折りたたみ可能なヘッダーが完全に折りたたまれ、残りのコンテンツがページの上部に達した場合でも、上部のメニュー バーがすべての要素の上部に表示されたままになります。

4. メニュースタイルを設定する

折りたたまれたヘッダーを作成するために次の CSS ルールは必要ありませんが、トップ メニューを使用してスタイルを設定できます。

ナビゲーション{
	高さ: 継承;
}
.メニュー{
	ディスプレイ: フレックス;
	高さ: 継承;
	アイテムの位置を中央揃えにします。
	パディング: 0 20px;
}
.menu li {
	パディング: 0 10px;
}
.メニュー a {
	色: 白;
}
.ロゴ {
	フレックス: 1;
	フォントサイズ: 22px;
}

.nav とメニュー項目の継承

(100%) 幅にして、画面全体に広がるようにします。

さらに、.menu はフレックスボックスを使用してメニュー項目を水平に並べ、align-items プロパティで垂直方向に中央揃えします。

また、.logo 要素に flex: 1; CSS ルールを追加したこともわかります。 flext プロパティは、flex-grow、flex-shrink、flex-basis の省略形です。値が 1 つしかない場合は flex-grow を参照し、他の 2 つのプロパティはデフォルト値のままになります。

flex-grow が 1 に設定されている場合、指定された要素は flex コンテナー内のすべての余分なスペースを取得します。そのため、メニュー要素はコンテナーの左側に押し出され、メニュー項目は右側に残ります。

5. 折り畳んだタイトルを配置する

折りたたまれたヘッダーも、上部のメニュー バーと同様に位置が固定されています。ただし、z-index 値は取得されないため、ユーザーがページを下にスクロールして残りのコンテンツが徐々にバナーを覆うと、バナーが「折りたたまれる」可能性があります。

.バナー{
	/* 位置決め用 */
	幅: 100%;
	高さ: 300px;
	位置: 固定;
	上: 70px;
	背景: 線形グラデーション(45度, #98cbff, #98ffcb);

	/* コンテンツの配置用 */
	ディスプレイ: フレックス;
	flex-direction: 列;
	コンテンツの均等配置: スペースを均等に;
	アイテムの位置を中央揃えにします。
}

ご覧のとおり、折りたたまれたヘッダー内のコンテンツを揃えるために、再び flexbox を使用しています。現在は列ベースのフレックス レイアウトになっており、justify-content プロパティと align-items プロパティを使用して要素を垂直方向と水平方向に簡単に配置できます。

6. 折り畳みタイトルのスタイルを設定する

これは折りたたまれたヘッダー効果の一部ではありませんが、上記のデモでは .banner 要素の子孫 (タイトル、説明、ボタン) がどのようにスタイル設定されているかを次に示します。

.バナータイトル{
	フォントサイズ: 32px;
	下マージン: 10px;
	テキスト配置: 中央;
}
.バナーの説明 {
	フォントサイズ: 22px;
	テキスト配置: 中央;
}
.btn-サインアップ{
	色: 白;
	背景色: #0056ab;
	境界線: 0;
	パディング: 15px 25px;
	フォントサイズ: 16px;
	カーソル: ポインタ;
}

下のスクリーンショットでは、現時点でのデモの様子がわかります。上部のメニュー バーとアコーディオン ヘッダーはどちらも位置が固定されているため、ページの上部に配置され、コンテンツの上半分を覆います。次のステップでは、残りのコンテンツのスタイルを設定して、ヘッダーを折りたたみ可能にします。

7. 残りのコンテンツのスタイルを設定する

スクロール時にヘッダーを折りたたむには、次の 4 つの操作を行う必要があります。

1. さらに、折りたたみ可能なヘッダーの上に残りのコンテンツが流れるように、残りのコンテンツの背景を設定する必要があります。この効果は視差効果に似ていることに注意してください。異なる背景を互いに重ね合わせる必要があります。
   1. デモでは、無地の白い背景を使用しました。この効果が機能するには、フロー コンテンツに常に背景を設定する必要があります (そうしないと、折りたたみヘッダーは折りたたまれません)。
2. 2 つの固定要素を基準にコンテンツを配置します。 top:370px; 以下のルールは、高さ(70px)と.banner(300px)の合計です。
3. コンテンツがヘッダー全体をカバーするように、幅を 100% に設定します。
4. 背景がページの高さ全体をカバーするように、高さを 100% に設定します (これはモバイル デバイスや長いページの場合に重要です)。

コードで表すと次のようになります:

。記事 {
	幅: 100%;
	位置: 相対的;
	上: 370ピクセル; 
	背景: 白;
	高さ: 100%; 
	パディング: 30px 10%;
}
.記事 p {
	下マージン: 20px;
}

コード全体を見る

そして、折りたたみヘッダーが完成しました。以下に、CSS 全体を表示します。この記事に示されている折りたたまれたヘッダー効果のライブデモも確認できます。

* {
	ボックスのサイズ: 境界線ボックス;
	マージン: 0;
	パディング: 0;
	フォントファミリー: サンセリフ;
	色: #222;
}
{
	テキスト装飾: なし;
}
ul {
	リストスタイルタイプ: なし;
}
ヘッダー {
	高さ: 70px;
	背景: #222;
	位置: 固定;
	幅: 100%;
	zインデックス: 99;
}
ナビゲーション{
	高さ: 継承;
}
.メニュー{
	ディスプレイ: フレックス;
	高さ: 継承;
	アイテムの位置を中央揃えにします。
	パディング: 0 20px;
}
.menu li {
	パディング: 0 10px;
}
.メニュー a {
	色: 白;
}
.ロゴ {
	フレックス: 1;
	フォントサイズ: 22px;
}
.バナー{
	/* 位置決め用 */
	幅: 100%;
	高さ: 300px;
	位置: 固定;
	上: 70px;
	背景: 線形グラデーション(45度, #98cbff, #98ffcb);

	/* コンテンツの配置用 */
	ディスプレイ: フレックス;
	flex-direction: 列;
	コンテンツの均等配置: スペースを均等に;
	アイテムの位置を中央揃えにします。
}
.バナータイトル{
	フォントサイズ: 32px;
	下マージン: 10px;
	テキスト配置: 中央;
}
.バナーの説明 {
	フォントサイズ: 22px;
	テキスト配置: 中央;
}
.btn-サインアップ{
	色: 白;
	背景色: #0056ab;
	境界線: 0;
	パディング: 15px 25px;
	フォントサイズ: 16px;
	カーソル: ポインタ;
}
。記事 {
	幅: 100%;
	位置: 相対的;
	上: 370ピクセル; 
	背景: 白;
	高さ: 100%; 
	パディング: 30px 10%;
}
.記事 p {
	下マージン: 20px;
}

結論は

ヘッダーを折りたたむと、ページの上部に追加のコンテンツを簡単に表示できます。これらは視差効果と同様に機能します。異なる背景を異なる速度で動かし、流れるコンテンツを固定要素に対して配置する必要があります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。