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

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

ただいまの
回答率

90.47%

  • HTML

    9270questions

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

  • CSS

    5997questions

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

CSSで作ったボタンが表示できない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 137

sue2700

score 2

 前提・実現したいこと

Intense ImageというJQueryで拡大機能をつけた画像の上に
CSSでつくったリンクボタンを設置したい。

 発生している問題・エラーメッセージ

リンクボタン①は問題なく表示されるが、リンクボタン②が表示させられない。
※リンクボタン②だけを単独で設置すると問題なく表示されるのでhtmlの表記に問題があるとは
思うのですが、見当がつきません。

 該当のソースコード

html(CSSボタン①をつかうとき)

<div class="page kakudai" data-image="./拡大後の画像" >
<img src="拡大前の画像" alt="">
<a href="リンク先URL" class="btn01 btn" target="_blank"> </a>
</div>


html(CSSボタン②をつかうとき)

<div class="page kakudai" data-image="./拡大後の画像" >
<img src="拡大前の画像" alt="">
<a href="リンク先URL" class="btn01 btn_a" target="_blank"> </a>
</div>

CSSボタン①(btn)

.btn{
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background-image: -webkit-linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%);    
    background-image: linear-gradient(45deg, #ffb6c1 20%, #ffff00 80%);
    transition: .4s;
}


CSSボタン②(btn_a)

.btn_a{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    border-radius: 4px;
    color: #ffffff;
    background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
    background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 3px #c58668;
}

.btn_a:active{
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}


CSSボタンの位置情報として(btn01)

.btn01{
  position: absolute;  
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  }

 試したこと

class名:pageで画像にボタンをのせ、
Class名:kakudaiでIntense-Imageを適用しているというつもりです。

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Atsushi_Okumura

    2018/04/17 16:37

    CSSボタン②(btn_a)を使用する際のHTMLはどうなっているのでしょうか

    キャンセル

  • kei344

    2018/04/17 17:39

    まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

    キャンセル

回答 1

checkベストアンサー

+1

提示されたCSSだと高さと幅の指定が無かったのが原因でしょうか。

.btn_a {
省略
  height:60px;
  width:60px;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/17 16:47

    まさに仰る通りでした。昨日に続き、度々ありがとうございます。

    キャンセル

  • 2018/04/17 17:47

    Kei344様
    ご指摘ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 解決済

    CSSのみでborderの角を逆方向に丸くしたい。

    タイトルを囲うボーダーの角を逆方向に丸くしたいのですが、 うまくいきません。(下にイメージ画像) イメージ画像は角が綺麗な円状になっていませんが、円状で構いません。 条件として

  • 解決済

    SDN経由でJavascriptを用いて表示しているボタンのカスタマイズ

    いつもお世話になっております。 現在Railsでウェブサイトを作成しております。 PAY.JPの決済サービスを導入しようとしており、以下のコードでボタンを作成することはできたの

  • 解決済

    バーを円形に動かしつつ、背後にグラデーションカラーをつけたい。

    動画のように、青いグラデーションとともにバーを円形に回転させたいです。 https://www.youtube.com/watch?v=u-BWupHzTnU バーを回転させる

  • 解決済

    斜線をCSSで表現したい

     前提・実現したいこと オワタの両手をCSSで表現したいです 実際はオワタの手ではなく、見出しとして使いたいです  該当のソースコード ここに言語名を入力 <DOCTYPE h

  • 解決済

    CSSグラデーションのアニメーションについて

    cssのグラデーションでIEのことも考慮すると,backgroundにlinear-gradientなどを適用させると思うのですが、 hoverしたときに単色→グラデーションにアニ

  • 解決済

    CSSボタンを指定した位置に表示できない。

     前提・実現したいこと ・1つの画像の上に、CSSでつくったボタンを複数のせて、それぞれに異なるリンク先を設定したい。 ・ボタンは整列ではなく、すべてに任意の位置を設定したい。

  • 解決済

    borderについて

    画像のような、赤、白、水色と色が変わる破線をcssで作成したいのですが 可能でしょうか? どなたか分かる方いらっしゃいましたらお願い致します。

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

  • HTML

    9270questions

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

  • CSS

    5997questions

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