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

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

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

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

HTML

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

CSS

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

Q&A

解決済

1回答

7233閲覧

スマホでリンクボタンが2回タップしないと飛ばない

tsotsi

総合スコア9

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

HTML

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

CSS

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

1グッド

0クリップ

投稿2017/06/10 12:40

レスポンシブサイトを作っており質問です。
スマホでボタンを1度タップするとhoverが効いて2回目のタップでリンクへ飛ぶのですがそれは
@media (max-width: 767px) {
a:hover img {
opacity:1.0;
}
これで対応できたのですが、下にある内容でどうすれば1度のタップでリンクへ飛ばすことができるのでしょうか?
html
<a class="btn btn-white" href="shopnews.html">新着情報をもっと見る</a>

css
.btn {
position: relative;
z-index: 2;
margin-bottom: 20px;
border-radius: 0;
text-transform: uppercase;
font-size: 12px;
line-height: 12px;
padding: 15px 20px;
overflow: hidden;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.btn:after {
position: absolute;
z-index: -1;
top: 0;
left: 50%;
width: 0;
height: 100%;
opacity: 0;
content: "";
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}

.btn:hover:after {
width: 101%;
opacity: 1;
}

.btn:hover {
background-color: transparent;
}

.btn:focus {
outline: 0;
}

.btn i {
display: inline-block;
line-height: 43px;
text-align: center;
border-left: 1px solid #fff;
padding-left: 20px;
margin: -15px 0 -15px 20px;
}
.btn-white {
border: 1px solid #777;
background-color: transparent;
}
.btn-white a {
color: #777 !important;
}

.btn-white i {
border-left-color: #777;
}

.btn-white:after {
background-color: #777;
}

.btn-white:hover {
border-color: #777;
background-color: transparent;
color: #fff;
}

.btn-white:hover i {
border-left-color: #fff;
}

ご教授お願いします。

退会済みユーザー👍を押しています

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

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

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

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

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

kei344

2017/06/10 15:56

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
tsotsi

2017/06/11 05:32

皆様がどうやってるか不思議だったので教えて下さりありがとうございました(^^)
kei344

2017/06/12 08:49

ここは「質問への追記・修正の依頼」です。質問本文は編集することが可能なので、その依頼をしています。
guest

回答1

0

ベストアンサー

投稿2017/06/10 13:11

yuki84web

総合スコア1857

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

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

tsotsi

2017/06/10 14:45

ありがとうございます! この方法だと全てのボタンにclassを指定しないとダメですよね? ページ数が多く1つ1つにclassを指定するのが手間なのですが他に方法はないでしょうか? お願いいたしますm(_ _)m
yuki84web

2017/06/11 02:22

a:hoverみたいにa要素に対して指定すれば全てのリンクに適用出来ます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問