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

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

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

HTMLで用いる<button>タグです。

HTML

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

CSS

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

Q&A

解決済

2回答

294閲覧

このHTMLで2番目と3番目がボタンで表示されません。

satoshi1111

総合スコア13

button

HTMLで用いる<button>タグです。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/09/08 06:29

1番目と4番目はきちんとボタンで表示されます。

ボタンのデザインはこのページの「ふわっと光るボタン」を使わさせてもらっています。
https://copypet.jp/417/

どこが間違えているのでしょうか?
どうかご教示お願い致します。

HTML CSS

1<!DOCTYPE html> 2<html lang="ja"> 3<html> 4<head> 5<meta charset="utf-8"> 6<title>駄菓子</title> 7 8<style type="text/css"> 9a.cp_btn { 10position: relative; 11display: block; 12width: 400px; 13margin: auto; 14max-width: 500px; 15padding: 0.5em; 16text-align: center; 17font-weight: bold; 18text-decoration: none; 19color: #FFF; 20text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 21background: #e6b422; 22transition: .4s; 23border-radius: 4px; 24font-size: 17pt 25} 26a.cp_btn:hover { 27text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 28transition: .4s; 29} 30 31 32 33 34 35 36a.ar_btn { 37position: relative; 38display: block; 39width: 400px; 40margin: auto; 41max-width: 500px; 42padding: 0.5em; 43text-align: center; 44font-weight: bold; 45text-decoration: none; 46color: #FFF; 47text-shadow: 0 0 5px rgba(255, 255, 255, 0.0); 48background: #e6b422; 49transition: .4s; 50border-radius: 4px; 51font-size: 17pt 52} 53a.cp_btn:hover { 54text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83); 55transition: .4s; 56 57 58 59 60 61 62 63</style> 64</head> 65<body> 66 67<a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> 68 69<img class="img-responsive maximage" src="http://www.amu.jpg" alt="" width="1000" height="704" /> 70 71<a href="http://www.url/#okashi" target="_blank" class="ar_btn">ボタンで表示されない</a> 72 73<img class="img-responsive maximage" src="http://www.nroke.jpg" alt="" width="1000" height="699" /> 74 75<a href="http://www.url/#okashi" target="_blank" class="ar_btn">ボタンで表示されない</a> 76 77<img class="img-responsive maximage" src="http://www.nde-ta.jpg" alt="" width="1000" height="828" /> 78 79<a href="http://www.url/#okashi" target="_blank" class="cp_btn">その他の商品はこっち</a> 80 81 82</body> 83</html>

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

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

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

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

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

guest

回答2

0

ベストアンサー

a.cp_btn:hover が2個ありますね。
片方は a.ar_btn:hover では。

投稿2018/09/08 07:32

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

satoshi1111

2018/09/10 03:55

無事解決しました。 本当にありがとうございました!
guest

0

a.cp_btn:hoverの}が無いんでは?(^^;)
(よく確認しましょう)

投稿2018/09/08 07:07

tonkun4os

総合スコア321

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問