FAQ Accordion Web サイトを構築する-CSSチュートリアル-php.cn

FAQ Accordion Web サイトを構築する

WBOY

リリース： 2024-09-03 13:33:41

オリジナル

700 人が閲覧しました

Build a FAQ Accordion Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、FAQ Accordion Web アプリケーションを共有できることを嬉しく思います。このプロジェクトは、Web サイトにインタラクティブでユーザーフレンドリーな FAQ セクションを作成したいと考えている人に最適です。これは、さまざまなアプリケーションで使用できる実用的なコンポーネントを構築しながら、HTML、CSS、JavaScript を使用したフロントエンド開発スキルを向上させる優れた方法です。

プロジェクト概要

FAQ Accordion は、よくある質問を展開および折りたたみ可能な形式で表示するように設計された Web アプリケーションです。すっきりとしたモダンなデザインで、ユーザーは質問をクリックして対応する回答を表示できます。このプロジェクトでは、コンテンツに簡単にアクセスできるようにすることでユーザーエクスペリエンスを向上させる、インタラクティブな FAQ セクションを作成する方法を紹介します。

特徴

インタラクティブアコーディオン: ユーザーは質問をクリックして回答の表示を切り替え、コンテンツの読みやすさを高めることができます。
レスポンシブデザイン: アプリケーションは完全にレスポンシブで、デスクトップとモバイルデバイスの両方で最適な表示エクスペリエンスを保証します。
動的アイコン: アイコンは、回答が展開されているか折りたたまれているかを示します。

使用されている技術

HTML: FAQ Accordion アプリケーションの構造を提供します。
CSS: アプリケーションをスタイル設定して、クリーンで応答性の高いデザインを作成します。
JavaScript: 回答の展開と折りたたみ、アイコンの切り替えなどのインタラクティブな要素を管理します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

FAQ-Accordion/
├── index.html
├── style.css
└── script.js

ログイン後にコピー

index.html: FAQ Accordion アプリケーションの HTML 構造が含まれています。
style.css: 魅力的でレスポンシブなデザインを作成するための CSS スタイルが含まれています。
script.js: 回答の展開や折りたたみ、アイコンの更新などの対話型要素を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd FAQ-Accordion
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、FAQ Accordion アプリケーションを表示します。

使用法

Web ブラウザで アプリケーションを開きます。
質問をクリックして、回答の表示を切り替えます。
さまざまな質問を展開したり折りたたんだりすると、回答が表示されます。
必要に応じて、新しい質問を更新または追加します。

コードの説明

HTML

index.html ファイルは、質問と回答を含む FAQ Accordion アプリケーションの構造を定義します。スニペットは次のとおりです:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FAQ accordion</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="conatiner">
      <img src="./assets/images/background-pattern-desktop.svg" alt="" />
      <div class="box">
        <h1>
          FAQs
          <span class="imageStar">
            <img src="./assets/images/icon-star.svg" alt=""
          /></span>
        </h1>
        <section class="section">
          <div class="question">
            <h3>Is Frontend Mentor free?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Frontend Mentor offers realistic coding challenges to help
              developers improve their frontend coding skills with projects in
              HTML, CSS, and JavaScript. It's suitable for all levels and ideal
              for portfolio building.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Yes, Frontend Mentor offers both free and premium coding
              challenges, with the free option providing access to a range of
              projects suitable for all skill levels.
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>Can I use Frontend Mentor projects in my portfolio?</h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            </p>
          </div>
          <hr />
        </section>
        <section class="section">
          <div class="question">
            <h3>
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            </h3>
            <div class="icon-img">
              <img src="./assets/images/icon-plus.svg" alt="" />
            </div>
          </div>
          <div class="answer">
            <p>
              The best place to get help is inside Frontend Mentor's Discord
              community. There's a help channel where you can ask questions and
              seek support from other community members.
            </p>
          </div>
          <hr />
        </section>
      </div>
    </div>

  </body>
</html>

ログイン後にコピー

CSS

style.css ファイルは、FAQ Accordion アプリケーションのスタイルを設定し、視覚的に魅力的で応答性が高いことを保証します。以下にいくつかの主要なスタイルを示します:

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: hsl(275, 100%, 97%);

}

img {
  width: 100%;
  position: fixed;
}

.container {
  position: absolute;
}

.box {
  top: 100px;
  margin: 0 auto;
  background-color: hsl(0, 0%, 100%);
  max-width: 555px;
  position: relative;
  border-radius: 13px;
  padding: 20px;
}

.imageStar img {
  width: 36px;
  margin-left: 10px;
}

.section {
  padding: 5px;
}

.question {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.answer {
  display: none;
  overflow: hidden;
  padding: 10px;
}

.answer.active {
  display: block;
}

.icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img img {
  position: fixed;
  width: 19px;
}

@media (max-width: 700px) {
  .box {
    max-width: 500px;
  }
}

@media (max-width: 500px) {
  .box {
    max-width: 400px;
  }
}

ログイン後にコピー

JavaScript

script.js ファイルには、回答を展開したり折りたたんだりする機能が含まれています。デモンストレーション用のスニペットを次に示します:

const questions = document.querySelectorAll(".question");

questions.forEach(question => {
  question.addEventListener("click", () => {
    const answer = question.nextElementSibling;
    const icon = question.querySelector(".icon-img img");

    // Toggle answer visibility
    answer.classList.toggle("active");

    // Change icon
    if (answer.classList.contains("active")) {
      icon.src = "./assets/images/icon-minus.svg";
    } else {
      icon.src = "./assets/images/icon-plus.svg";
    }
  });
});

ログイン後にコピー

ライブデモ

ここで FAQ Accordion プロジェクトのライブデモをチェックできます。

結論

FAQ Accordion アプリケーションの構築は、インタラクティブでユーザーフレンドリーな FAQ セクションを作成する上でやりがいのある経験でした。このプロジェクトは、ユーザーエンゲージメントとコンテンツアクセシビリティの重要性を強調しています。 HTML、CSS、JavaScript を適用することで、よくある質問に簡単にアクセスできるようにして、ユーザーエクスペリエンスを向上させるコンポーネントを開発しました。このプロジェクトが、あなたが独自のインタラクティブなコンポーネントを構築するきっかけとなることを願っています。コーディングを楽しんでください!