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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

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

HTML

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

CSS

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

Q&A

解決済

1回答

801閲覧

Airbnb模写 画像とformにおけるレスポンシブデザインの設定

退会済みユーザー

退会済みユーザー

総合スコア0

Bootstrap

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/08/08 08:53

現在、Airbnbページの模写を行っております。
レスポンシブデザインでイメージ画像の1枚目から2枚目のようにウィンドウ幅をPC幅からタブレット用の幅にした時に
写真(夫婦?二人)のheightを短くし、form枠を写真を外に出したような状態にしたいのですが、
自分が書いたコードではcssのメディアクエリでcontainerサイズをheight: 300px;に設定したものの写真のheightも縮小されず、formが写真外に出ません。
どのように改善したら、原本通りになるのかご指導頂けたら幸いです。何卒宜しくお願い致します。

イメージ説明
イメージ説明

以下自分が模写したスクリーンショットです
イメージ説明
イメージ説明

HTML

1 2<section class="top-wrapper "> 3 <div class="container imgc"> 4 5 6 <div class="row"> 7 <div class="col-xl-12 col-ex-12"></div> 8 <div class="col-xl-6 col-ex-12"></div> 9 <div class="col-xl-5 offset-1 col-ex-12"> 10 <h1 class="blankroom"><b>空き部屋で世界をつなごう</b></h1> 11 <p class="howincome"><b>どのくらいの収入が見込めるかチェック</b></p> 12 <p class="places"> 13 <label for="place"></label> 14 <input type="text" name="place" id="place" value="東京"> 15 </p> 16 <p class="places"> 17 <label for="place1"></label> 18 <select id="place1" value=""> 19 <option>まるまる貸切</option> 20 <option>個室</option> 21 <option>シェアルーム</option> 22 </select> 23 <label for="place"></label> 24 <select id="place" value="" class="gest"> 25 <option>ゲスト1人</option> 26 <option>ゲスト2人</option> 27 <option>ゲスト3人</option> 28 <option selected>ゲスト4人</option> 29 <option>ゲスト5人</option> 30 <option>ゲスト6人</option> 31 <option>ゲスト7人</option> 32 <option>ゲスト8人</option> 33 <option>ゲスト9人</option> 34 <option>ゲスト10人</option> 35 <option>ゲスト11人</option> 36 <option>ゲスト12人</option> 37 <option>ゲスト13人</option> 38 <option>ゲスト14人</option> 39 <option>ゲスト15人</option> 40 <option>ゲスト16人</option> 41 </select> 42 </p> 43 <span class="price3 "><b>&yen;195,255</b><span class="month">月あたり<i class="far fa-question-circle text-secondary"></i></span></span> 44 <p class="start mx-2"> 45 <button type="button" class="btn btn-danger price2"><b>はじめる</b></button> 46 </p> 47 </div> 48 49 </div> 50 51 </div> 52</section>

css

1@media (max-width:1200px ){ 2 .top-wrapper { 3 height: 700px; 4 } 5 .imgc { 6 height: 300px; 7 } 8 9} 10 11header { 12 height: 75px; 13 position: fixed; 14 top: 0; 15 z-index: 10; 16 width: 100%; 17 background-color: white; 18 19 20} 21.header-right { 22 float: right; 23 24} 25.header-right> .prices{ 26 27 font-size: 30px; 28} 29 30 31.top-wrapper { 32 background-image: url(old.png); 33 background-size: cover; 34 padding: 0; 35 margin: 0 auto; 36 height: 700px; 37} 38 39.col-xl-12 { 40 height: 100px; 41} 42.col-xl-5 { 43 background-color: white; 44 border-radius: 5px; 45} 46.blankroom { 47 margin: 15px; 48} 49.howincome { 50 display: inline-block; 51 margin-left: 12px; 52} 53.places { 54 margin-bottom: 5px; 55 margin-left: 12px; 56} 57input { 58 width: 410px; 59 height: 50px; 60 color: gray; 61 62} 63 64select { 65 color: gray; 66 width: 250px; 67 height: 50px; 68 69} 70.gest { 71 width: 150px; 72 height: 50px; 73} 74.price3 { 75 font-size: 40px; 76 display: inline-block; 77 margin-left: 12px; 78} 79.month { 80 font-size: 16px; 81 82} 83.start { 84 margin: 25px 25px; 85 height: 50px; 86 87} 88.btn-danger.price2 { 89 display: inline-block; 90 width:100%; 91 height:100%; 92}

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

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

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

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

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

yasutomi

2019/08/08 12:32

Airbnbの模写を行っている人をよく見かけますが Airbnbは模写には向かないですし Airbnbの模写が自力でできないのであれば レベルがその域に達していないということになるため もっと簡単なサイトで模写を行ったほうが良いです。 あと補足ですが質問のコード内容だと検証できないので 回答する人はあらわれないと思います。
退会済みユーザー

退会済みユーザー

2019/08/08 23:12

ご丁寧にありがとうございました。詳しく質問内容を書いた方が良いという考えから、このような回答が不可能な質問内容になってしましました。不快な思いをされた方もいらっしゃると思います。大変申し訳ありませんでした。
guest

回答1

0

ベストアンサー

自力で解決するために簡単なページの模写を行うことにしました。お時間いただきありがとうございました。詳しく質問内容を書いた方が良いという考えから、このような回答が不可能な質問内容になってしましました。不快な思いをされた方もいらっしゃると思います。大変申し訳ありませんでした。

投稿2019/08/08 23:14

編集2019/08/09 06:53
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問