前提・実現したいこと
・１つの画像の上に、ＣＳＳでつくったボタンを複数のせて、それぞれに異なるリンク先を設定したい。
・ボタンは整列ではなく、すべてに任意の位置を設定したい。
（画像は複数あり、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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+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/
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.76%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
mts10806
2018/04/16 15:42
プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
mts10806
2018/04/16 15:43
質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わります。
mts10806
2018/04/16 15:43
また「指定した位置にボタンを表示させることができません」であれば、タイトルと要件が合いません。どちらでしょうか？
sue2700
2018/04/16 15:52
ご回答ありがとうございます。初心者アイコン活用します！ 解決したいことは「指定した位置にボタンを表示できない」です。ただ、最終的につくりたい形がタイトルの内容なのでそのように書きました。紛らわしいようでしたら申し訳ありません。
mts10806
2018/04/16 15:56
タイトルと内容で要件が違うと回答者がどこをゴールに回答して良いか迷います。きちんと明示しておくことで解決が早まります。
mts10806
2018/04/16 15:57
質問は質問者のみ編集できるので、ゆっくり編集してみてください。リアルタイムでプレビューも表示されるので、きちんと整形できているか確認しながら編集を行ってください。
sue2700
2018/04/16 16:05
ご丁寧にありがとうございます。大変参考になります。