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

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

ただいまの
回答率

87.49%

レスポンシブデザインで左右に並んだ画像が縮小しない

解決済

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 552

score 5

前提・実現したいこと

・画像ボタン(画像A、画像B)を左右に並べ、画面のセンターに表示
・画面サイズ縮小に合わせてボタンも縮小

概要です

レスポンシブのスマホサイトを制作しております。

デザインカンプから2倍サイズで用意をした画像(ボタン)を2つを画面中央揃えで表示を行い、
画面の縮小に合わせて画像も縮小させていきたいと考えています。

liで組んでdisplay:inline-blockを指定しているのですが
画面サイズを縮小していくと、中央ぞろえで左右に配置した画像が
縮小されることなく、左側の画像の下に回り込んでしまいます。

(左画像:画像A、右画像:画像B→ 画像Aの下に画像Bが回り込んでセンター揃えになる)

この左右に並べた画像を画面サイズが縮小されたときに、画像Aが画像Bの下に回り込んでしまうことなく
左右に並んだ状態で連動して縮小されるようにするにはどのようにしたらよろしいでしょうか?

ご教授お願い致します。

該当のソースコード

<div class="header_inner">

<div class="header_logo_conatiner_sp">
 
<div class="header_com_container_sp">
<ul class="header_com_container_sp_inner">
<li class="header_com_list_sp">
<a href="tel:#">
<img src="/images/header/btn_tel_sp.png" width="128" height="41" alt="">
</a>
</li>
   
<li class="header_com_list_sp">
<a href="#">
<img src="/images/header/btn_mail_sp.png" width="128" height="41" alt="">
</a>
</li>
</ul>
</div>

</div>

</div>

【以下CSS】

.header_inner{
@include width_height(100%, auto);
@include clearfix;
}

.header_com_container_sp{
@include width_height(90%, auto);
margin-left: auto;
margin-right: auto;
}

ul.header_com_container_sp_inner{
position: relative;
}

li.header_com_list_sp{
display: inline-block;

img{
width: 100%;
height: auto;
vertical-align: bottom;
}
}

li.header_com_list_sp:first-child{
margin-right: 28px;
}

li.header_com_list_sp:last-child{
margin-right: 0;
}

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

・sassで記述しています。
・ボタン画像のオリジナルサイズは256x82で、表示する際にhtmlで半分の128x41に指定しています。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/11/15 12:56

    コードはマークダウンのcode機能にてご提示ください。

    キャンセル

回答 1

checkベストアンサー

+2

ある程度前後省略されたCSSであると思うので正確な回答になっているか不安ですが

このコードだけで判断するに、img のWidth:100% にli の幅が引っ張られて、ブラウザ幅に対して 100% 扱いになっているのが横に並ばない原因と考えられます。

li に対してWidth:50% などの横に並べる状態の幅に指定することで、

img の幅も、li の幅に対する 100% となり、相互に引っ張られる事無く横に並んで一緒に縮小してくれそうです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/11/15 14:58

    回答をありがとうございます。
    ご指摘のように、該当の箇所のみのhtmlとcssなので判断が難しかったことはお許しください。

    質問時に掲載のcssが画面横幅サイズ768pxで正しく表示されているソースになります。
    この時点でWidth:50%にしてしまうと、画面サイズの変更前からボタンサイズが50%表示になってしまい、
    レイアウトが崩れしまいます。

    画面横幅サイズ768pxから<425px>→<375px>と縮小していったときにその画面サイズに
    応じてボタンサイズが縮小されればと考えております。
    ちなみに2つのボタンの間隔は768サイズの時に28pxとしており、こちらの間隔も保って(画像Aと画像Bの間に空間ができる)の縮小が想定としております。

    画像が一つであれば難なく縮小している(このボタンの上に別divでメインビジュアルを配置しています)のですがこのボタンの横並びのところだけが上手くいかずに苦慮しております。

    改めてご教授いただければ幸いです。
    何卒よろしくお願いいたします。

    キャンセル

  • 2019/11/15 15:38

    補足ありがとうございます。

    どちらにしても、幅が縮まると並ばずに一段落ちる原因は前記のとおりです。

    現在ウィンドウ幅に余裕がある段階で横に2つ並んでいるのは、128px の「画像幅×2つ」と「他の余白の値」の合計が、 container 幅768px より小さいからになります。

    li の幅が img の幅に依存しているから起きている現象です。

    「Width:50% **など** の横に並べる状態の幅に指定」

    としたのは、50% にという値の話ではなく、コンテナ側の幅広に対して、2つの li がパーセンテージで横並びになるよう設定さえしておけば、ウィンドウ幅に左右されず横並びが維持される。という、スタイルの構造設計上の考え方です。

    キャンセル

  • 2019/11/15 15:41

    参考コードを書きたいのですが、今スマホからなもので、文章だけですいません(汗)

    キャンセル

  • 2019/11/15 15:52

    ご回答をありがとうございます。
    制作中のページがシームレスなレスポンシブを要求しているものではなく、
    指定された画面サイズ(ブレイクポイント)での表示が整っているかに主軸を置いたページということでしたので、
    該当の画面サイズでレイアウトが正しく表示できるように、ご回答を頂きましたWidthの値で画像サイズの調整を行ってみたいと思います。 → 何とか横並びの表示にはできました!<ありがとうございます。

    また、試行錯誤の中で表示領域にtableを置いてtdで画像と空白の横幅を指定して各要素を囲んで
    画面の可変を行ったところ、こちらはシームレスにサイズの変更ができましたので
    ご教授いただいた方法と合わせてPLに確認を取ってみたいと思います。

    初歩的で且つ言葉足らずな質問にお応えを頂きまして、本当にありがとうございました。

    キャンセル

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

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

関連した質問

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