FAQ Accordion Web サイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、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: 回答の展開や折りたたみ、アイコンの更新などの対話型要素を管理します。

インストール

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

1. リポジトリのクローンを作成します:
   

   git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git
   

2. プロジェクト ディレクトリを開きます:
   

   cd FAQ-Accordion
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、FAQ Accordion アプリケーションを表示します。

使用法

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

コードの説明

HTML

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

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7FAQ accordion6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    7f673eaf394f0b5c3dca2aceb68a12d5
      ca5768eb787de1bcd21f5c4158b542b2
      8f9e4409b06fde1ff1d3a80f075ca0ed
        4a249f0d628e2318394fd9b75b4636b1
          FAQs
          a6d6d8732e7aab09e58fc20552ce9c66
            473be947d5c9cf409521472bde60f1a854bdf357c58b8a65c66d7c19c8e4d114
        473f0a7621bec819994bb5020d29372a
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Is Frontend Mentor free?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              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.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              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.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              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.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68

  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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 を適用することで、よくある質問に簡単にアクセスできるようにして、ユーザー エクスペリエンスを向上させるコンポーネントを開発しました。このプロジェクトが、あなたが独自のインタラクティブなコンポーネントを構築するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、Web 開発における私の継続的な学習の一環として開発されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上がFAQ Accordion Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。