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

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

ただいまの
回答率

88.92%

overflow:hiddenで画像の列を画面外に伸ばしたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 242

よろしくお願いします。

overflow:hiddenを使おうとしてますが、他の方法があれば全然それで構わないです。

画面のサイズを変えても画像が横並びでずっと続くようなデザインを作りたいです。
イメージ説明
画像のように左にタイトルがあってその横から画像が並びます。
画面幅を広げてもそのタイトルの画像が無くなるまではずらっと表示です。
もちろん、左右移動のスクロールバーは出したくないです。
その為overflow:hiddenを使ってdiv外は非表示みたいにしてみたかったのですがうまく出来ません。

下記のようにしてみたのですが、これではタイトルの下に画像が並んでしまいますし、画像がはみ出して表示してくれませんでした。画像全体を表示できるだけ画面を伸ばすとぱっと表示します。
(すみません。表現が上手くなくて…たとえ画像の半分でも端に表示したいです。)

この場合どのように設定したら出来るでしょうか?

    <section class="test">
      <div class="test_list_con">
      <!--rep-->
    <div class="test_list_box">
          <div class="test_list_box_l">タイトル</div>        
          <div class="works_list_box_r"><img src="01.jpg"><img src="02.jpg"><img src="03.jpg"><img src="04.jpg"></div>
        </div>
      <!--rep-->
      </div>
    </section>
.test{
    box-sizing:border-box;
        /*ここで右端いっぱいまで使ってるつもり…*/
    padding:80px 0 80px 80px;
}
.test_list_con{
}
.test_list_box{
        /*タイトルと画像を横並び*/
    overflow:hidden;
    margin-bottom:40px;
}
.test_list_box_l{
    float:left;
    width:266px;
    height:200px;
    box-sizing:border-box;
    padding:12px;
    margin-right:10px;
}
.test_list_box_l:hover{
    background-color:#ccc;
}

.test_list_box_r{
    width:100%;
    float:left;
    /*中身があればずっと伸びるんじゃないの?*/
    overflow:hidden;
    height:200px;
    text-align:left;
}
.test_list_box_r img{
    height:200px;
    width:auto;
    margin-right:10px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

float:left;で横並びにしてますが、これははみ出た要素は改行されて下に配置されます。
float:left;は本来は横並びの指定でなく回り込みの設定です。かつては他に手段がなかったのでしかたなく使われてました。
現在なら横並びは CSS FlexBox を使いましょう。規定では改行されません。

.test{
  box-sizing:border-box;
  /*ここで右端いっぱいまで使ってるつもり…*/
  padding:80px 0 80px 80px;
}
.test_list_con{
}
.test_list_box{
  /*タイトルと画像を横並び*/
  overflow:hidden;
  margin-bottom:40px;
  display: flex; /*追加*/
}
.test_list_box_l{
/*  float:left; 削除*/
  width:266px;
  height:200px;
  box-sizing:border-box;
  padding:12px;
  margin-right:10px;
}
.test_list_box_l:hover{
  background-color:#ccc;
}

.works_list_box_r{
  width:100%;
  /*    float:left; 削除*/
  display: flex; /*追加*/
  overflow:hidden;
  height:200px;
  text-align:left;
}
.test_list_box_r img{
  height:200px;
  width:auto;
  margin-right:10px;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/17 14:55

    回答ありがとうございます!!
    無事希望通りに表示できました。

    同じ横並びでも差があるのですね。勉強になりました。

    キャンセル

0

それで良いと思いますよ。
はみ出した要素も見える様にしたい場合はoverflow-hidden: auto; でも良いと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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