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

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

ただいまの
回答率

89.62%

【Bootstrap css】imgで作ったリンクボタンを、レスポンシブ対応にしたい・カルーセルのスライド域に干渉しないようにしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,881

nekomura

score 130

追記:9月23日 14:37
(本内容一番下に追記を記述しています。どうぞよろしくお願いいたします)

よろしくお願いいたします。

レスポンシブデザイン対応のwebページを作っています。  
開発環境はEclipseの動的webプロジェクトです。

topデザイン部分(カルーセル形式)の部分について表題の質問です。
topの部分に、リンクするボタンを二つ並べて、表示したいのですが、

  •  1つ目のリンクはbootstrapのbtnクラスを使用(無料アカウント作成としてあります)
  •  二つ目のリンクは、「GooglePlay」のアイコンを使用

すると、下記画面のようになり、GooglePlayのアイコンをクリックすると、カルーセルのスライド区域「>」に反映してしまい、本来のリンクボタンとして機能してくれません。
イメージ説明

また、もう一点の問題として
スマホ画面にした際、下記画面のようにbootstrapのボタン「無料アカウント作成」はレスポンシブ対応するのですが、「GooglePlay」アイコンの方はレスポンシブ対応しません。
イメージ説明

ためしに、両方のリンクボタンにbootstrapのbtnクラスを使用すると、
下記画像のようにカルーセルのスライドにも影響せず、レスポンシブも問題なく出来ました。
※「GooglePlay」アイコンを利用した上で、実現したい画面上のUIは下記の画像です。
緑のボタン部分を、本来はGoogleアイコンにしたいと考えています。

イメージ説明(PC画面)

イメージ説明(スマホ画面)

右側のボタンを、「GooglePlay」アイコンを使用した上でこのような画面を実現させるには、どのような方法がありますでしょうか。

html及びcssのソースは以下です。
ご確認頂き、アドバイスやご教示を頂ければ幸いです。

/* カルーセル  html*/
<!-- top image(carousel) -->
<div id="main-carousel" class="carousel slide" data-ride="carousel" data-interval=false>

    <!-- indicator -->
    <ol class="carousel-indicators">
        <li data-target="#main-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#main-carousel" data-slide-to="1"></li>
        <li data-target="#main-carousel" data-slide-to="2"></li>
    </ol>


    <div class="carousel-inner">
        <div class="item active">
            <img src="images/bc8a277b6c68306f74dace8e428094da.jpg">
            <div class="carousel-caption">
                 <!--一枚目のカルーセルの記述-->
            </div>
        </div>

        <!-- 問題箇所 -->
        <div class="item">
            <img src="images/12079103_894560040629439_1047991272266572471_n.jpg">
            <div class="carousel-caption">
                <h3>この文字組サンプルは、解説原稿の表現案と</h3>
                <p>この文字組サンプルは、解説原稿の表現案として作成したものです。可読性やグラフィック表現の大切な要素として、選択しました。文字組サンプル案を含ん</p>
                <a class="btn btn-danger" href="">無料アカウント作成</a>
                 <!-- googleplayアイコン部分(問題箇所) -->
                 <a href=""><img class="google-icon" src="images/google-play-badge.png" alt="storeへ"></a>
                 <!-- bootstrapのボタンにしてみた場合の記述↓ -->
                 <!-- <a class="btn btn-success" href="">google-sample</a> -->
            </div>
        </div><!-- 問題箇所end -->

        <div class="item">
            <img src="images/user.jpg">
            <div class="carousel-caption">
                <!--三枚目のカルーセルの記述-->
            </div>
        </div>
    </div>

    <!-- side control -->
    <a class="left carousel-control" href="#main-carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#main-carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>
<!-- end carousel -->
/* カルーセル  css*/
.navbar{
     margin-bottom: 0;
}

.carousel-inner img{
    width: 100%;
}
.img-carousel{
    height: 200px;
}

.carousel{
  height: 200px;
  margin:auto;
}
.carousel .item {
  height: 100%;
}

.carousel img {
  position: absolute;
  width: 100%;
}


@media (min-width: 320px) {
  .carousel,
  .carousel .item,
  .carousel .item-mask,
  .carousel-inner .item .item-mask img {
    height:200px;
  }
}

@media (min-width: 768px) {
  .carousel,
  .carousel .item,
  .carousel .item-mask,
  .carousel-inner .item .item-mask img {
    height:400px;
  }
}
.carousel-caption{
    text-align: right;
    text-shadow: none;
}

.google-icon{
   max-width: 180px;
   height: auto;
}

有職者の皆様のご教示をお待ちしております。

追記:9月23日 14:37
回答者様より、

class="google-icon"の親要素のaにstyle="display: inline-block;"をあてる
②実験で行った<a class="btn btn-success" href="">google-sample</a>を復活させて三つボタン並べてみる
③「google-icon」の親a要素に「class="btn"」をあてる


とのアドバイスを頂き、実行した結果の画面が以下です。
Googeplayのアイコンは、やはりカルーセルのスライド領域に干渉し、ボタンとも横並びになりません。
イメージ説明

また、アドバイスに基づいて記載したコードは以下なのですが

<a style="display: inline-block;" class="btn btn-danger" href="">無料アカウント作成</a>
 <a style="display: inline-block;" class="btn btn-success" href="">google-sample</a>
  <a style="display: inline-block;" class="btn btn-success" href="">google-sample</a>
   <a style="display: inline-block;" href=""><img class="google-icon btn" src="images/google-play-badge.png" alt="storeへ"></a>


うまく実現できない理由がまだわかりません。
どうか皆様のお知恵をお借しください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • gin

    2016/09/21 17:58

    class="google-icon"は何かCSSあたってないのでしょうか?

    キャンセル

  • nekomura

    2016/09/21 18:04

    gin様
    お世話になっております。
    失礼いたしました。記載漏れです。
    .google-icon{
    max-width: 180px;
    height: auto;
    }
    としております。
    本文にも追記しておきます。
    ご指摘ありがとうございました。

    キャンセル

回答 1

checkベストアンサー

+1

ひとまずclass="google-icon"の親要素のastyle="display: inline-block;"をあててみてください。
また実験で行った<a class="btn btn-success" href="">google-sample</a>を復活させて3つボタン並べてみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/09/23 15:08

    あ、これでやってみてください。
    <a class="btn btn-danger" href="">無料アカウント作成</a>
    <a class="btn" href=""><img class="google-icon" src="images/google-play-badge.png" alt="storeへ"></a>
    <a class="btn btn-success" href="">google-sample</a>

    キャンセル

  • 2016/09/23 15:23

    これimgに「absolute」がかかってますよね?
    下記追加してみてください。
    .carousel .google-icon {
    position: static;
    }

    キャンセル

  • 2016/09/23 15:30

    gin様
    下記追加により、ボタンとアイコンは横並びになり、うまく実現する事ができました(涙)
    .carousel .google-icon {
    position: static;
    }
    長らくお付き合い頂き、アドバイスを下さってありがとうございました!

    キャンセル

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

  • ただいまの回答率 89.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • 【Bootstrap css】imgで作ったリンクボタンを、レスポンシブ対応にしたい・カルーセルのスライド域に干渉しないようにしたい