レスポンシブなアコーディオン効果を実現するための CSS3 の詳細な説明

最近、外国人が CSS3 を使用してアコーディオン効果を実現しているビデオを見たので、自分で学習した後で書き留め、将来の復習のためにブログの形式で記録しました。コード構造は次のとおりです (使用されているフォントは Genericons です)。

最終的な効果は次のようになります。

全画面表示:

画面幅が960px未満の場合:

ページ (index.html) の基本構造を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <link rel="スタイルシート" href="style.css">
</head>
<本文>
  <div class="コンテナ">
      <!--タイトル-->
    <ヘッダー>
      <h1>ソーシャルメディアでフォローしてください</h1>
    </ヘッダー>
      
      <!--アコーディオンセクション-->
    <ul class="accordion">
      <li class="tab">
        <div class="ソーシャルYouTube">
          ユーチューブ
        </div>
        <div class="content">
          <h1>ユーチューブ</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="ソーシャル フェイスブック">
          <a href="#">フェイスブック</a>
        </div>
        <div class="content">
          <h1>フェイスブック</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="ソーシャルツイッター">
          ツイッター
        </div>
        <div class="content">
          <h1>ツイッター</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="ソーシャルインスタグラム">
          インスタグラム
        </div>
        <div class="content">
          <h1>インスタグラム</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
      <li class="tab">
        <div class="ソーシャルリンクトイン">
          <a href="#">LinkedIn</a>
        </div>
        <div class="content">
          <h1>リンクトイン</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
       <li class="tab">
        <div class="social github">
          ギットハブ
        </div>
        <div class="content">
          <h1>GitHub</h1>
          <p>Lorem ipsum dolor sit amet consectetur 
            adipisicing elit.Culpa, consectetur.</p>
        </div>
      </li>
    </ul>
  </div>
</本文>
</html>

スタイル (style.css):

*{
  マージン: 0;
  パディング: 0;
  境界線: なし;
}

体{
  フォントファミリー: Arial、Helvetica、sans-serif;
  背景色: #222;
  色: #fff;
}

/*次のアイコンで使用するフォントを設定する*/
@フォントフェイス {
  フォントファミリ: 'Genericons';
  src: url('font/genericons-regular-webfont.woff') フォーマット('woff'),
  url('font/genericons-regular-webfont.eot') フォーマット('truetype');
}

/*外側のコンテナの幅を設定する*/
。容器{
  幅: 80%;
  マージン: 20px 自動;
}

ヘッダー h1{
  フォントサイズ: 2rem;
  パディング: 1rem;
  テキスト配置: 中央;
}

/*ここでフォントサイズが 0 に設定されていることに注意してください。そうしないと、非常に悪い画像が表示されます。リンクではコンテンツを表示したくないので、後で表示する必要があるテキストのフォントサイズを設定します。*/
。アコーディオン{
  幅: 100%;
  最小幅: 800px;
  高さ: 200px;
  背景色: #333;
  リストスタイル: なし;
  表示: ブロック;
  オーバーフロー: 非表示;
  フォントサイズ: 0;
}

/*.tab の下の .content の幅は 360px で、.tab の幅は .content が表示されている状態ではホバーしたときにのみ 450px になるため、各 li を inline-block に設定して一列に並べ、オーバーフローを非表示にします。また、幅が滑らかに増加するように transition を設定します。*/
。タブ{
  幅: 80ピクセル;
  高さ: 100%;
  表示: インラインブロック;
  位置: 相対的;
  マージン: 0;
  背景色: #444;
  境界線: 1px 実線 #333;
  オーバーフロー: 非表示;
  トランジション: すべて .5 秒の緩和 .1 秒。
}

.タブ:ホバー{
  幅: 450ピクセル;
}
.tab:hover .social a:after{
  変換: translateX(-80px);
}
.tab:hover .social a:before{
  変換: translateX(-100px);
}

/* 相対配置に設定します。そうしないと、.content の一部が隠れてしまいます */
.タブ .コンテンツ{
  位置: 相対的;
  幅: 360ピクセル;
  高さ: 100%;
  背景色: #fff;
  色: #333;
  左マージン: 80px;
  パディング: 50px 0 0 15px;
}

.タブ .コンテンツ h1{
  フォントサイズ: 2.5rem;
  上マージン: 20px;
}
.タブ .コンテンツ p{
  フォントサイズ: .85rem;
  行の高さ: 1.6;
}

/要素の幅と高さ、フォントをGenericonsに設定します。そうしないとアイコンは表示されず、白い空のフレームのみが表示されます。/
.social a:前、
.social a:after{
  位置: 絶対;
  幅: 80ピクセル;
  高さ: 200px;
  表示: ブロック;
  テキストインデント: 0;
  パディング上部: 90px;
  左パディング: 25px;
  font:normal 30px ジェネリコン;
  色: #fff;
  遷移: すべて 0.5 秒の緩和;
}

/*アイコンはマウスオーバーすると大きくなるため、after 疑似クラスのフォントとパディングをリセットし、margin-left を 80px に設定する必要があります。これにより、before 疑似クラスの小さいアイコンがデフォルトで表示されます */
.social a:after{
  フォントサイズ: 48px;
  パディング上部: 80px;
  左パディング: 20px;
  左マージン: 80px;
}

/*アイコンを追加*/
.youtube a:前、
.youtube a:after{
  コンテンツ: '\f213';
}

.youtube a:after{
  背景色: #fc0000;
}

.twitter a:以前、
.twitter a:after{
  コンテンツ: '\f202';
}

.twitter a:after{
  背景色: #6dc5dd;
}

.facebook a:前、
.facebook a:after{
  コンテンツ: '\f204';
}

.facebook a:after{
  背景色: #3b5998;
}

.linkedin a:before、
.linkedin a:after{
  コンテンツ: '\f208';
}

.linkedin a:after{
  背景色: #00a9cd;
}

.instagram a:前、
.instagram a:after{
  コンテンツ: '\f215';
}

.instagram a:after{
  背景色: #6dc993;
}

.github a:before、
.github a:after{
  コンテンツ: '\f200';
}

.github a:after{
  背景色: #6e5494;
}

/*最大画面幅が960pxの場合*/
@media(最大幅:960px){
  。容器{
    幅: 70%;
  }
    /*高さを自動に設定する*/
  。アコーディオン{
    最小幅: 450px;
    高さ: 自動;
  }

    /*li をブロックとして表示し、順番に並べます*/
  。タブ{
    幅: 100%;
    表示: ブロック;
    下部境界線: 1px 実線 #333;
  }
    /* 元の .tab:hover の幅は 450px なので、これを設定する必要があります。.tab の幅が 600px の場合、ホバー時に 150px の空白スペースができてしまい、望んでいる効果が得られません */
  .タブ:ホバー{
    幅: 100%;
  }
  .タブ .コンテンツ{
    幅: 85%;
  }
    /*対応する疑似クラスのパディング値を、ほぼ中央に表示されるように設定します*/
  .social a:before{
    パディング上部: 60px;
    左パディング: 25px;
  }
  .social a:after{
    パディング上部: 50px;
    左パディング: 20px;
  }
}

CSS3 でレスポンシブアコーディオン効果を実現する方法についての記事はこれで終わりです。CSS3 レスポンシブアコーディオンに関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後も 123WORDPRESS.COM をよろしくお願いいたします。

<<: LeetCode の SQL 実装 (197. 気温上昇)

>>: 画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析（図）