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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2091閲覧

アコーディオンメニューの中で擬似要素を縦中央寄せにするには?

takawork

総合スコア95

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/15 15:08

編集2021/01/15 15:39

コンテンツの内容が増加しても、Aという擬似要素を縦方向の中央寄せにしたいと思っています。
イメージ説明
.acc-innnerにdisplay:flex;をつけると上記の内容通りになるのですが、
アコーディオンメニューが全部開きっぱなしになってしまいます。

アコーディオンメニューを最初から閉じておくには、
.acc-innnerにdisplay:none;とすると、閉じるのですが、今度はコンテンツの位置関係がズレてしまいます。
イメージ説明

どうすればうまく出来るでしょうか?
うまく共存できなくてパンクしてしまいました。
お手数ですがよろしくお願いします。

該当ページ

.faq1-content { padding: 40px; height: auto; background-color: #E2FAFF; } .faq1-content-wrap { max-width: 1080px; margin: 0 auto; } .faq1-content-wrap .acc { width: 90%; margin: 0 auto; font-weight: bold; } .faq1-content-wrap .acc-outer { color: white; padding: 0px 10px; margin-top: 2px; background-color: #02007F; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; color: #fff; } .faq1-content-wrap .acc-outer:hover { color: orange; } .faq1-content-wrap .acc-outer:before { content: "Q"; font-size: 48px; padding-right: 20px; } .faq1-content-wrap .acc-outer:after { content: "\f107"; font-family: "Font Awesome 5 Free"; margin-left: auto; font-weight: bold; -webkit-transition: 0.4s; transition: 0.4s; font-size: 32px; } .faq1-content-wrap .acc .open:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .faq1-content-wrap .acc-inner { color: black; padding: 10px; background-color: white; display: none; } .faq1-content-wrap .acc-inner:before { content: "A"; font-size: 48px; padding-right: 20px; } .acc-outer h2 { font-size: 23px; font-weight: bold; margin-bottom: 0px; -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; } .acc-outer:after { -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; } .acc-outer:before { -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out; }
<section class="faq1-content"> <div class="faq1-content-wrap"> <div class="acc"> <div class="acc-outer"> <h2>アコーディオン1</h2> </div> <div class="acc-inner"> <p>コンテンツ1<p> </div> <div class="acc-outer"> <h2>アコーディオン2</h2> </div> <div class="acc-inner"> <p>コンテンツ2<p> </div> <div class="acc-outer"> <h2>アコーディオン3</h2> </div> <div class="acc-inner"> <p>コンテンツ3/<p> </div> </div> </div> </section>
jQuery(document).ready(function(){ $('.acc-outer').click(function(){ $(this).next().slideToggle(); $(this).toggleClass("open"); }); });

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

以下のようにinnnerの中にもう一つ箱を作って、
そこに
display:flex;
align-items: center;
と擬似要素を入れることでうまくいきました。

<div class="acc-inner"> <div class="acc-inner-content"> <p>コンテンツ2<p> </div> </div>

投稿2021/01/15 15:48

takawork

総合スコア95

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問