質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

受付中

アコーディオンの周りの枠を消したい

Iori
Iori

総合スコア51

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

2回答

1リアクション

0クリップ

236閲覧

投稿2022/10/03 14:22

編集2022/10/03 15:31

前提

iSARAの模写をしており、アコーディオンを書いています。

実現したいこと

閉じたあとの青枠を消したいです。画面をクリックしないと消えません。
イメージ説明

加えて開いた際にも青いのが残っているので、それもなくしたいです。
イメージ説明

発生している問題・エラーメッセージ

エラーなどはありません。公式からそのままコピペしました。

<!-- これでaccordion閉じる -->の上の3つがあるとアコーディオンが閉じませんでした。公式のCDN

https://getbootstrap.jp/docs/5.0/getting-started/download/
のものなのですが、なぜこれが効かないのかがわかりません...

<!-- これでaccordion閉じる -->のソースはこちらの質問から引用しました。

https://teratail.com/questions/324870

該当のソースコード

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title> <!-- BOOTSTRAP --> <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVS TQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> --> <!-- これでaccordion閉じる --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <link rel="icon" href="./images/icon.png"> <!-- JQUERY --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> </head> --------中略---------- <div class="accordion" id="accordionExample"> <div class="accordion-item "> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button collapsed " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <img src="/images/images29.png" alt=""> Skypeで事前コンサル </button> </h2> <div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <p class="bold">現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</p> <p class="bold">簡単なテストあり</p> <p>iSaraでは受講費以上を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。(テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。) </p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <img src="/images/images29.png" alt=""> 事前課題の提出 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <p class="bold"> 出発前の1ヶ月前に事前課題を送ります。</p> <p> 0から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP / Mysqlの事前講座 </p> <p class="bold"> 課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。回数無制限のチャットサポート付きですので、最初は努力してください。また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。 </p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <img src="/images/images29.png" alt=""> 現地に渡航 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <p class="bold"> 到着日には空港でお出迎えし、初日のオリエンテーションを行います。 滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。 </p> <p class="bold"> iSaraは『ノマド』フリーランス養成講座です。 楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。</p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingFour"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <img src="/images/images29.png" alt=""> 実案件を通して学ぶ </button> </h2> <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample"> <div class="accordion-body"> <p class="bold"> 現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p> <p class="bold"> 案件獲得のためのメールの書き方や見積りの仕方など、他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p> <p>*現役フリーランスがサポートします。</p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingFive"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> <img src="/images/images29.png" alt=""> 帰国後の仕事獲得 サポート付き </button> </h2> <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample"> <div class="accordion-body"> <p class="bold"> 経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</p> <p class="bold"> iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。</p> <p class="bold"> もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</p> </div> </div> </div>

css

* { text-align: center; margin: 0 auto; } h2 { border: #1877F2; } /* LESSON FLOW */ .lesson-flow { padding: 30px auto; margin-bottom: 50px; } .lesson-flow img { width: 95%; margin: 30px ; display: none; } @media screen and (min-width: 768px) { .lesson-flow img { display: block; } } 🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋 /* faq */ .accordion-item { width: 90%; margin: 10px auto; } .accordion-button { padding: 0 20px 0 0; background-color: #FEF5E0; font-weight: bold; } .accordion-button:focus { box-shadow: none; } .accordion-body { background-color: #FEF5E0; } .accordion-body p { text-align: left; } .accordion-button img { width: 30px; } 🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋🙋

hatena19様のご指示の実行結果

アドバイスありがとうございます。該当コードを書き込むと青枠がきれいに消えました!

しかしながら画像のように背景が青いままになってしまいます...

イメージ説明

Cocode👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Cocode

2022/10/03 14:48 編集

質問失礼します!逆にいつなら青枠ついていてもいいですか? ①hoverとactiveのときだけ ②activeのときだけ ③いっさいいらない ④その他(具体的にお願いします〜)

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。