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

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

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

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

解決済

BootStrap4のドロップダウンにアニメーションを追加したい

Fujiman
Fujiman

総合スコア0

Bootstrap

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

1回答

0評価

0クリップ

25閲覧

投稿2020/10/17 05:28

編集2022/01/12 10:58

以下のような構成のドロップダウンメニューの表示でアニメーションお動きを追加したいので、とりあえずbootstrap.css内のいろんな”.dropdown-*”系セレクタに「transition: all 1s;」を追加していったりしたのですが効きませんでした。.collapsingのようなtransitionの設定部分はドロップダウンにはないでしょうか?

HTML

<div class="dropdown"> <!-- 切替ボタン --> <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" > ドロップダウンボタン </button> <!-- ドロップメニュー --> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">メニュー1</a> <a class="dropdown-item" href="#">メニュー2</a> <a class="dropdown-item" href="#">メニュー3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">その他リンク</a> </div> </div>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2020/10/17 09:29

どのようなアニメーションでしょうか。
Fujiman
Fujiman

2020/10/17 10:59 編集

説明不足ですみません。たとえばフェードイン・アウトとかです
m.ts10806
m.ts10806

2020/10/17 11:05

でしたらJavaScriptになるのではと。
Fujiman
Fujiman

2020/10/17 12:32

ありがとうございます。もしできればサンプルなど教えてもらえますか? また、それとは別にCSSの範疇で可能なものもあるのでしょうか?例えばスライドイン・アウトなど。
m.ts10806
m.ts10806

2020/10/17 21:44

えーとできれば、キーワードにして調べて試してからにしてもらいたいですが・・(今回提示されたコードもHTMLだけなのでcssで試したものにはなってないようですし)
m.ts10806
m.ts10806

2020/10/17 21:52

ただ、いずれにしても「メニューの出現」を制御しようとしたらBootstrap本体のコードいじる必要があるかもしれません。 イベントはいくらか用意されているので、そこから挙動を確認してみるとかですね。 https://getbootstrap\.com/docs/4\.5/components/dropdowns/#dropdown-options
Fujiman
Fujiman

2020/10/17 23:39

ありがとうございます。Bootstrap自体をいじるのかとか、後付でいくのかとか、どういう方向で行くのが”普通”なのかが知りたい点でもありました。JavaScriptを使うのはアンチなのかな?とか思ったりしてたのでスッキリしました。
m.ts10806
m.ts10806

2020/10/17 23:43

>JavaScriptを使うのはアンチなのかな? そもそもBootstrapの各機能に大量にJavaScriptが使われていますし、 今回のドロップダウンにもクラスのつけ外しがJavaScriptで行われています。 ブラウザのデベロッパツールの「Elements」でdropdownクラスをあてているあたりをフォーカスするとどのようなつけ外しがされているか見えると思います。
m.ts10806
m.ts10806

2020/10/17 23:45

>Bootstrap自体をいじるのかとか、後付でいくのかとか、どういう方向で行くのが”普通”なのかが知りたい点でもありました。 Bootstrapが機能的に提供しているoptionで対応していないものは自作 しているものは機能で対応 ですね。 なので、変に組みすぎてしまわないためにもドキュメントを確認する必要があります。
m.ts10806
m.ts10806

2020/10/17 23:45

まぁただ、全部にBootstrapで対応する必要はないので 思ったようなアニメーションでドロップダウンしてくれるプラグインを探してくるのも手です。なければ一通り自分で組むしかありません。
Fujiman
Fujiman

2020/10/18 02:37

お考えの紹介ありがとうございます。一時的にBootStrapがゴリゴリに使われたページのメンテをしないといけなくなり、BootStrapが初めてなのでどういう方針で行くか(どういうのが普通なのか)を最初にわかってないと後任の人に迷惑だし困ったなぁと思っていました。「全部にBootstrapで対応する必要はない」ということを聞いてちょっと安心しました。ありがとうございます。 とりあえず社内ルールの範囲内で自由にやらせてもらおうかという気になれましたw
m.ts10806
m.ts10806

2020/10/18 05:02

社内ルールがどんなものか分かりませんが、要件満たせればあとは技術的な観点だけです。 CSSフレームワークにも色々あるので組み合わせて使うこともあるでしょうし、デフォルトの機能だけだとBootstrapっぽさだけが見えてそれが嫌だという人もいます。 レスポンシブのところだけ使ってあとは自走とか割とある話ですよ。
Fujiman
Fujiman

2020/10/18 13:35 編集

なるほど!すごく参考になる示唆です。ありがとうございます。確かにレスポンシブのためのグリッドを確定させるためだけにこの枠組みを使って、あとは個別にということにしたら気が楽です。正直、フレームワーク全体を抑えるのがめんどくさいーーと思ってました

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Bootstrap

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

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。