質問編集履歴

1 <code>を囲っていないとのご指摘をいただきましたので修正しました。

sue2700

sue2700 score 6

2018/04/16 16:02  投稿

画像にCSSでつくったボタンを複数のせ、それぞれに異なるリンク先を設定したい。
CSSボタンを指定した位置に表示できない。
### 前提・実現したいこと
1つの画像の上に、CSSでつくったボタンを複数のせて、
・1つの画像の上に、CSSでつくったボタンを複数のせて、それぞれに異なるリンク先を設定したい。
(画像は複数あり、turn.jsを利用してページめくりの機能をつけています。)
### 発生している問題・エラーメッセージ
CSSのボタン1つであれば問題なく動作します。
ボタンを2つ以上だと、指定した位置にボタンを表示させることができません。
※勉強中の初心者です。基本的なところで間違っているかもしれません。
### 該当のソースコード
①ボタン1つのとき(問題なし)
html
```ここに言語を入力  
<div class="btn01">
<img src="examle01.jpg"alt="">
<a href="リンク先"class=btn target="_blank" ></a></div>
```  
CSS
```ここに言語を入力  
.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;
 }
```  
### 試したこと
②ボタン2つのとき
html
<div class="page01"><img src="example01.jpg" alt=""> 
```ここに言語を入力
<div class="page01"><img src="example01.jpg" alt=""> 
<a href="リンク先1" class="btn btn01" target="_blank"></a>
<a href="リンク先2" class="btn btn02" target="_blank"></a>
</div>
```  
CSS
```ここに言語を入力  
.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/ツールのバージョンなど)
  • HTML

    13410 questions

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

  • CSS

    8966 questions

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

  • button

    128 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る