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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

Q&A

解決済

1回答

558閲覧

画像縮小した時のレスポンシブについて

fuyukixxx

総合スコア26

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/13 20:58

airbnbの模写してる初心者です。本家のHPみたいに https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1578660995_OTk4MWQ4ZTc5MWVl 縮小した時、画像の左右の余白が徐々になくなる感じにしたいのですが設定がわからないです。回答よろしくお願いします。```HTMLここに言語を入力
コード

<div class="top-img mb-2"> <div class="intro"> <h1 class="font-weight-bold mb-3">Airbnbホストになって、暮らしをレベルアップ</h1> <p class="font-weight-bold">どれくらいの収入が見込めるかチェック</p> <div class="cp_iptxt"> <input type="text" placeholder="ロケーション"> </div> <div class="d-flex"> <div class="cp_ipselect cp_sl01"> <select required> <option value="" hidden>まるまる貸切</option> <option value="1">まるまる貸切</option> <option value="2">個室</option> <option value="3">シェアルーム</option> </select> </div> <div class="cp_ipselect cp_sl01 guest"> <select required> <option value="" hidden>ゲスト4人</option> <option value="1">ゲスト1人</option> <option value="2">ゲスト2人</option> <option value="3">ゲスト3人</option> <option value="4">ゲスト4人</option> <option value="5">ゲスト5人</option> <option value="6">ゲスト6人</option> <option value="7">ゲスト7人</option> <option value="8">ゲスト8人</option> <option value="9">ゲスト9人</option> <option value="10">ゲスト10人</option> <option value="11">ゲスト11人</option> <option value="12">ゲスト12人</option> <option value="13">ゲスト13人</option> <option value="14">ゲスト14人</option> <option value="15">ゲスト15人</option> <option value="16">ゲスト16人</option> </select> </div> </div> <h1 class="font-weight-bold mt-4">¥76,857</h1> <p>月あたり</p> <button type="button" class="btn btn-danger intro-btn py-2 font-weight-bold">はじめる</button> </div> </div> </div> ```CSSここに言語を入力 コード ```img { max-width: 100%; } .top-img { background: no-repeat center/cover url("https://osaka.j-hoppers.com/img/jh/osaka/main.jpg"); padding: 90px 0; width: 84%; margin: 0 auto; } .intro { background-color: white; width: 470px; padding: 2em; border-radius: 6px; margin: 0 0 0 auto; margin-right: 80px; } .intro h1{ line-height: 1; display: inline-block; } .intro p { font-size: 13.5px; display: inline-block; } .intro-btn { width: 100%; height: 50px; } .cp_iptxt { position: relative; width: 100%; margin-bottom: 8px; } .cp_iptxt input[type=text] { font: 15px/24px sans-serif; box-sizing: border-box; width: 100%; padding: 0.7em; border: 1px solid rgb(212, 223, 223); border-radius: 4px; outline: none; } .cp_iptxt input[type=text]:focus { border-color: #da3c41; } .cp_ipselect { overflow: hidden; width: 58%; /* margin: 2em auto; */ } .cp_ipselect select { width: 100%; padding-right: 1em; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: none; outline: none; background: transparent; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .cp_ipselect select::-ms-expand { display: none; } .cp_ipselect.cp_sl01 { position: relative; border: 1px solid rgb(212, 223, 223); border-radius: 4px; background: #ffffff; } .cp_ipselect.cp_sl01::before { position: absolute; top: 0.8em; right: 0.9em; width: 0; height: 0; padding: 0; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #666666; pointer-events: none; } .cp_ipselect.cp_sl01 select { padding: 0.7em 38px 0.7em 8px; color: #666666; } .cp_ipselect:visited { border-color: #da3c41; } .guest { width: 38.5%; margin-left: 3.5%; } ```ここに言語を入力 コード

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

縮小した時、画像の左右の余白が徐々になくなる感じにしたいのですが設定がわからないです。

最大幅(max-width)をお好みに数値に設定すればいいでしょう。

css

1.top-img { 2 background: no-repeat center/cover url("https://osaka.j-hoppers.com/img/jh/osaka/main.jpg"); 3 padding: 90px 0; 4 max-width: 1140px; /*追加*/ 5 width: 100%; /*変更*/ 6 margin: 0 auto; 7}

Bootstrapの機能を活かすなら、全体をcontinerクラスのブロックで囲むといいでしょう。

Bootstrap でのコンテナの利用 (continer と container-fluid の違い) (Bootstrapの使い方)

投稿2020/02/14 00:53

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fuyukixxx

2020/02/15 09:38

解決しました。毎度ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問