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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

1回答

824閲覧

HTML, CSSで作成した模写サイト PCでズームアウト表示すると左寄りになります

MsParrot

総合スコア4

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/01/16 01:00

編集2021/01/17 03:37

コーディング初心者です。
Progateを一通り終え、Airbnbサイトの模写に挑戦しています。

まだ完成にほど遠いのですが、現在できあがっている部分に関して、
PC上でブラウザ表示をズームアウトした時に子要素が左寄りになってしまい、解決できずにいます。

発生している問題・エラーメッセージ

下↓がオリジナルサイトをPCで67%表示にした際のスクリーンショットです。

イメージ説明

一方、自分が模写したコードを67%表示にすると、このように左寄りになります(自分の便宜上 左側要素の背景色を変えている点、右側要素の中身が完成していない点は無視していただければと思います)。

イメージ説明

該当のソースコード

HTML

1 2 <div class="top-container"> 3 <div class="msg-container"> 4 <p>予想ホスティング収入額をチェック</p> 5 <h1><span class="city">Mumbai</span>でホスティングして、ひと月あたり最大<span class="amount">¥ 47,608</span>の収入を得ましょう</h1> 6 <a href="#">予想ホスティング収入額の計算方法</a> 7 </div> 8 <div class="form-container"> 9 <p class="form-message"> 予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</p> 10 <input type="text" id="address-input" name="location" placeholder="所在地" role="combobox" value=""> 11 <div id="room-type-dropdown">まるまる貸切</div></label> 12 </div> 13 </div>

CSS

1.top-container { 2 background-color:#F2ECE2; 3 height: 520px; 4 width: 100%; 5 padding-left: 80px; 6} 7 8.msg-container { 9 display: inline-block; 10 background-color: lightskyblue; 11 float: center; 12 padding-top: 96px; 13 padding-left: 5px; 14 width: 42%; 15 min-width: 514px; 16 max-width: 700px; 17} 18 19.msg-container p { 20 font-weight: bold; 21 font-size: 18px; 22 margin-bottom: 40px; 23 line-height: 22px; 24 letter-spacing: 0.07em; 25 text-transform: uppercase; 26} 27 28.msg-container h1 { 29 font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; 30 font-weight: 700; 31 font-size: 42px; 32 margin-bottom: 28px; 33 letter-spacing: 0.01em; 34} 35 36 37.city { 38 font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 39 font-size: 44px; 40} 41 42.amount { 43 color: #e41e57; 44 font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 45 font-size: 38px; 46} 47 48.msg-container a { 49 color: black; 50 font-size: 14px; 51 cursor: pointer; 52 font-weight: 600; 53} 54 55 56.form-container { 57 display: inline-block; 58 float: center; 59 vertical-align: top; 60 box-shadow: 0 0 20px rgb(206, 206, 206); 61 width: 543px; 62 height: 434px; 63 background-color: #fff; 64 border-radius: 15px; 65 margin-top: 0; 66 margin-left: 122px; 67 margin-bottom: 95px; 68} 69 70.form-message { 71 color: #222222; 72 font-size: 18px; 73 line-height: 24px; 74 padding: 0px 8px 12px 8px; 75 margin: 30px 30px 23px 30px; 76} 77 78#address-input { 79 width: 480px; 80 height: 57px; 81 margin-left: 34px; 82 margin-right: 32px; 83 inset: 0px 0px -1px; 84 border-radius: 8px 8px 0px 0px; 85 border-color: rgb(176,176,176); 86 border-width: 1px; 87 z-index: 0; 88} 89 90#room-type-dropdown { 91 width: 480px; 92 height:57px; 93 margin-bottom: 0; 94 margin-left: 34px; 95 margin-right: 32px; 96 border-color: rgb(176,176,176); 97 border-width: 1px; 98}

試したこと

Flexbox, inline-blockをblockに変更するなど試みましたが、いずれも100%表示の際のレイアウトが大きく崩れてしまいます。

どなたか解決策をご存じでしたらアドバイスお願いいたします。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

hatena19

2021/01/16 01:31

HTMLコードも提示してください。
m.ts10806

2021/01/16 01:36

>コーディング初心者です。テラテイルで質問させていだくのも初めてで、内容に不備等ございましたら申し訳ありません。 この手の前提や挨拶はなくても良いと思います。 「初心者マーク」を質問につけられます。 先の2つの指摘とともに質問編集してご対応ください。
m.ts10806

2021/01/16 01:51

あらゆるズーム表示で対応したいというのはかなり困難かと思います。 100%表示だけで調整されては?
MsParrot

2021/01/17 03:37

ありがとうございます。そこまで気にしなくてもよかったのでしょうか。実際にウェブサイトを作る際、このような詳細にも修正依頼があるのかと思っていました。
guest

回答1

0

ベストアンサー

HTMLファイルの内容が提示されていないので構造が(クラス名などから)想像するしかありませんが、全体を囲んでいるコンテナ系クラス名のスタイルにmargin: 0 auto;を追加してください。

投稿2021/01/16 01:32

Daregada

総合スコア11990

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

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

MsParrot

2021/01/16 01:52

ありがとうございます。早速試してみます。
Daregada

2021/01/16 01:57

全体を囲むdiv要素がなければ、適宜追加してください。
MsParrot

2021/02/06 02:29

お久しぶりです。margin: 0 auto;のみでは解決せずいろいろ調べており、要素がインラインブロックだったことが原因とわかりました。ブロック要素に変えるとスタイリングが崩れてしまったため、ブロック要素に変えた上でフレックスボックスを適用し、そこにmargin: 0 auto; を指定することで解決いたしました。どうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問