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

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

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

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

Q&A

解決済

1回答

2341閲覧

bootstrap使用時のスマホ閲覧時に、リンクのactive(?)が適用されない件

MRK

総合スコア16

Bootstrap

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

0グッド

0クリップ

投稿2016/10/26 18:27

編集2016/10/26 18:43

bootstrap.cssを適用して、スマホ閲覧時に
リンク(aタグ)のactive(?)が適用されない件で質問です。

PC閲覧時はリンクをクリックすると
リンクの色が変わってアンダーラインも表示されるので
正常に動作していると思われるのですが、
iPhone閲覧時にlinkをタップしても
リンクの色も変わらずアンダーラインも表示されず
そのままリンク先に遷移してしまいます。

動作環境は、iPhone6S、ブラウザはChromeとSafariの両方を試しましたが、
同じ挙動です。

下記にその挙動が確認されたURLを貼っておきます。
単純にbootstrapのCSSを適用しただけの状態です。

http://newgate.xsrv.jp/bootstrap-test/

タップした際にリンクの色が変わって
アンダーラインが表示される状態にしたいのですが、
どうか解決策をご教授頂けましたら幸いです。

宜しくお願い致します。

※追伸
bootstrapを全く適用しないと下記のように
タップすると背景色がグレーになってから遷移します。
このようにタップした際になんらかの効果が適用される状態にしたいです。

http://newgate.xsrv.jp/bootstrap-none/

bootstrapを使用して別ファイルで色々といじってみたのですが、
active属性が全く適用されません。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/10/26 21:56

active とは CSSselectorでいうところの [:active] でしょうか? [.active] でしょうか
MRK

2016/10/27 01:53

xa051さん、ご質問、ありがとうございます。一応[:active]のつもりでした。ただ、スマホの場合、[:active]が、どの時点での挙動になるか、イマイチ理解できていません・・・。私の望む結果は、リンクをクリックした際、リンクをクリックしたというのが見た目で分かる挙動を得たいと思っています。クリックした瞬間に、リンク先に遷移する前に、リンクの色や背景色が変わったりして、リンクがクリックしたと分かるようにしたいのです。[:active]でなく、[.active]を使うことでその結果が得られるのであれば、そちらでも構わないということになります。
guest

回答1

0

ベストアンサー

スマホは擬似クラスのactiveは機能しません。
jQueryのスマホイベントを使う等工夫してください。
https://blog.sus-happy.net/jquery-smart-phone/

コリスさんの昔の記事で、クリックやタップでインク波紋みたいな動きをさせるテクニックを紹介しています。ご参考まで。
http://coliss.com/articles/build-websites/operation/css/css-meterial-design-effect-by-timkendall.html

投稿2016/10/27 01:36

takepieee

総合スコア686

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

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

MRK

2016/10/27 02:14

takepieeeさん、ご回答、ありがとうございます。 スマホだと[:active]が機能しないんですね・・・。 また、タップした際の挙動に関する情報もありがとうございます。 頂いた情報を参考にもう一度試してみます。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問