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

Question

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

解決済

回答 1

投稿 2018/04/16 15:39 ・編集 2018/04/16 16:02

評価
クリップ 0
VIEW 4,733

sue2700

score 8

前提・実現したいこと

・１つの画像の上に、ＣＳＳでつくったボタンを複数のせて、それぞれに異なるリンク先を設定したい。
・ボタンは整列ではなく、すべてに任意の位置を設定したい。

（画像は複数あり、turn.jsを利用してページめくりの機能をつけています。）

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

CSSのボタン１つであれば問題なく動作します。
ボタンを２つ以上だと、指定した位置にボタンを表示させることができません。

※勉強中の初心者です。基本的なところで間違っているかもしれません。

該当のソースコード

①ボタン１つのとき（問題なし）

ｈｔｍｌ

<div class="btn01">
<img src="examle01.jpg"alt="">
<a href="リンク先"class=btn target="_blank" ></a></div>

ＣＳＳ

.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;

}

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

試したこと

②ボタン２つのとき

ｈｔｍｌ

<div class="page01"><img src="example01.jpg" alt="">  
 <a href="リンク先1" class="btn btn01" target="_blank"></a>
 <a href="リンク先２" class="btn btn02" target="_blank"></a>
 </div>

ＣＳＳ

.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;

}

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

 .btn02 a{
  position: absolute;
  top:400px;
  left:50px;
  padding:0;
  }

ボタンのデザインは全ボタン共通なので.btnとして書き、位置はそれぞれ変えたいので.btn01,
.btn02とわけて位置情報を記述している、というつもりです。

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

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

7 件の質問への追記・修正依頼

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

m.ts10806

2018/04/16 15:42

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。

キャンセル
m.ts10806

2018/04/16 15:43

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わります。

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わります。

キャンセル
m.ts10806

2018/04/16 15:43

また「指定した位置にボタンを表示させることができません」であれば、タイトルと要件が合いません。どちらでしょうか？

また「指定した位置にボタンを表示させることができません」であれば、タイトルと要件が合いません。どちらでしょうか？

キャンセル
sue2700

2018/04/16 15:52

ご回答ありがとうございます。初心者アイコン活用します！　解決したいことは「指定した位置にボタンを表示できない」です。ただ、最終的につくりたい形がタイトルの内容なのでそのように書きました。紛らわしいようでしたら申し訳ありません。

ご回答ありがとうございます。初心者アイコン活用します！　解決したいことは「指定した位置にボタンを表示できない」です。ただ、最終的につくりたい形がタイトルの内容なのでそのように書きました。紛らわしいようでしたら申し訳ありません。

キャンセル
m.ts10806

2018/04/16 15:56

タイトルと内容で要件が違うと回答者がどこをゴールに回答して良いか迷います。きちんと明示しておくことで解決が早まります。

タイトルと内容で要件が違うと回答者がどこをゴールに回答して良いか迷います。きちんと明示しておくことで解決が早まります。

キャンセル
m.ts10806

2018/04/16 15:57

質問は質問者のみ編集できるので、ゆっくり編集してみてください。リアルタイムでプレビューも表示されるので、きちんと整形できているか確認しながら編集を行ってください。

質問は質問者のみ編集できるので、ゆっくり編集してみてください。リアルタイムでプレビューも表示されるので、きちんと整形できているか確認しながら編集を行ってください。

キャンセル
sue2700

2018/04/16 16:05

ご丁寧にありがとうございます。大変参考になります。

ご丁寧にありがとうございます。大変参考になります。

キャンセル

回答 1 件

評価が高い順
新着順
古い順

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

score 1 · Accepted Answer · 2018-04-16T16:50

ベストアンサー

+1

.btnの親要素である.page01に
position: relative;
.btn01 a で指定すると.btn01の子要素のaが対象になるのでaは不要です。

.page01 {
  position: relative;
}
.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;

}

.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;
  }

 .btn02{
  position: absolute;
  top:400px;
  left:50px;
  padding:0;
  }

codepenで確認する↓
https://codepen.io/RaRukAnA/pen/VXoaJj/

投稿 2018/04/16 16:50

編集 2018/04/16 16:52

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2018/04/16 17:04

教えて頂いた方法で完璧に解決しました！！ありがとうございます！とても勉強になりました。

教えて頂いた方法で完璧に解決しました！！ありがとうございます！とても勉強になりました。

キャンセル

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

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

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

前提・実現したいこと

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

該当のソースコード

試したこと

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

関連した質問

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

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

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

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

前提・実現したいこと

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

該当のソースコード

試したこと

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン