画面の縮小によるUIの変化について

プロゲートを終えて模写コーディングをしていて疑問に思ったのですが
模写コーディングでは画面のサイズを意識してコーディングしなくても画面の縮小拡大をすれば綺麗にコーディングされるのですが、プロゲートでは下の画像ようになってしまいます。
この違いはなんなのか分かりません

どちらともレスポンシブのことは書いていません

プロゲートサイトのコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>progate</title>
    <link rel="stylesheet" href="progate-css.css">
  </head>
    <body>

        <div class="top-wrapper">
         <div class="container">
               <h1>LEARN TO CODE</h1>
               <h1>LEARN TO BE CREATIVE</h1>
               <p>Progateはオンラインプログラミング学習サービスです。</p>
               <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 
            <div class="btn-wrapper">
             <a  href="#" class="btn sign-up">新規登録はこちら</a>
             <p>or</p>
             <a href="#" class="btn twitter">twitterでログイン</a>
             <a href="#" class="btn facebook">facebookでログイン</a>
            </div>
          </div>
        </div>

        <div class="lesson-wrapper">
            <div class="container">
             <div class="heading">
                 <h2>Learn Where to Get Started!</h2>
             </div>
             
             <div class="lessons">
                 <div class="lesson">
                     <div class="lesson-icon">
                         <img src="https://prog-8.com/images/html/advanced/html.png">
                         <p>HTML & CSS</p>
                     </div>
                     <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
                 </div>

                  <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
                        <p>jQuery</p>
                     </div>
                     <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
                 </div>

                 <div class="lesson">
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/ruby.png">
                        <p>Ruby</p>
                     </div>
                     <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
                 </div>

                 <div class="lesson">  
                     <div class="lesson-icon">
                        <img src="https://prog-8.com/images/html/advanced/php.png">
                        <p>PHP</p>
                   </div>
                     <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
              </div>
                
             
            </div>
            </div>
        </div>

        <div class="message-wrapper">
            <div class="container">
               <div class="heading">
                   <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
                   <h3>Let's learn to code, learn to be creative</h3>
               </div> 
               <a class="btn message" href="#">さっそく開発する</a>
            </div>
        </div>
        

        
    </body>
</html>

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

body {
  margin: 0;
  font-family:"Hiragino Kaku Gothic ProN ";
}

a {
  text-decoration: none;
}

.top-wrapper {
    background-image: url("https://prog-8.com/images/html/advanced/top.png");
    padding:180px 0px 100px 0px;
    color:white;
    text-align: center;
    background-size:cover;
}

.top-wrapper h1 {
  opacity:0.7;
  font-size:45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
}

.container{
 width:1170px;
 margin:auto;
 padding:0 15px;
 letter-spacing:5px;

}

.btn-wrapper {
  margin:20px 0px;
}

.btn {
    display:inline-block;
    color:white;
    border-radius:4px;
    padding:8px 24px;
    
}

.twitter {
    background-color:#55acee;
    margin-left:10px;
}

.facebook{
    background-color:#3b5998;
}

.sign-up{
    background-color: #239b76;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  text-align: center;
}

.lesson {
  float:left;
  width:25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: white;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.txt-contents {
  width: 80%;
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: #b3aeb5;
}



.message-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  /* box-shadowをつけてください */
  box-shadow: 0 7px #1a7940;
  cursor: pointer;

}

.message :active {
  box-shadow: none;
  position: relative;
  top:7px;
}

模写しているコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mosh1.css">
    <title>mosha1-flower</title>
</head>
<body>
    <header>
        <div class="logo"></div>
        <div class="tagline">
            かわいいが届くお花便
        </div>
        <div class="download-wrapper">
          <div class="download-item">
            <div class="container">
            <a class="download for-ios" href="https://flowr.page.link/88Lt">App Store</a>
            <a class="download for-andoroid" href="https://flowr.page.link/19mT">Google Play</a>
            <p>* 北海道、沖縄、離島エリアは現在対象外です</p>
            </div>
          
          </div>
        </div>
    </header>
    

    <section class="sevice">
      <div class="container sevice">
        
        <div class="item item1">
          <h2>届くのは<br>あなたの好みのお花だけ</h2>
          <p>
            FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。
          </p>
        </div>

        <div class="item item2">
         <h2>お花はポストに投函<br>忙しくても大丈夫</h2>
         <p>
          お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。
         </p>  
        </div>
        
        <div class="item item3">
          <h2>FLOWERなら<br>いつもかわいく飾れる</h2>
          <p>
            専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。
          </p>
        </div>

      </div>
    </section>

    
</body>
</html>

header 
{
 background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg);
 height:100vh;
 background-size: cover;
 padding-top: 48px;
 background-position: center;
 position: relative;
}



.body {
   font-size:14px;
}

.logo {
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/header_logo-0dbc9cb7c037472d3bf71fde0c1d3efd708c2c2547e9ed3e420051ca826cdad8.png);
  margin: 0 auto 16px;
  width: 131px;
  height: 116px;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center;
  margin-top:5vh;

}

.tagline {
    color:white;
    text-align: center;
    

}

.download-wrapper {
   padding-top:24px;
   margin: 0 auto;
   text-align: center;
   position: absolute;
   bottom:24px;
   left:0px;
   right: 0px;
}

.download-item {
   padding:24px 16px;

}



.download {
   display: inline;
   background-color: black;
   border-radius: 3px;
   padding: 20px 29px;
   color:white

}

.download.for-ios {
   margin-right: 10px;
}

.download-wrapper p {
   color:white;
   padding-top:100px;
}


body, h2, h3, h4, p {
   font-family: "Noto Sans JP", sans-serif;
   line-height: 1.6;
   letter-spacing: 0.05rem;
}

.service {
   width: 10px;
   height: 10px;
   
}

.item {
   color: white;
}

.item1 {
   background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service01-01ee576583ddad054106d9f2dc78caf78be6c829383351a4fbc99ac5a566020a.jpg);
   background-size:cover;
   padding: 8vmin 6vmin;
   background-position:center bottom;
   flex-grow: 1;
   flex-basis: 100vw;
   min-height: 540px;
   line-height: 1.6;
}

kuma_kuma_

2020/09/21 12:40

> 模写コーディングでは画面のサイズを意識してコーディングしなくても画面 > の縮小拡大をすれば綺麗にコーディングされるのですが、 > プロゲートでは下の画像ようになってしまいます。質問者様が作られたほうが優秀だったとして回答すればよろしいのですか？あと「下の画像ように」のどこが悪い(良い？)のかが判りません文面からどこがどうなるのが良いか悪いかが判断つきません。その辺りを追記お願いします。

退会済みユーザー

2020/09/23 03:04

説明不足で申し訳ありませんプロゲートのサイトは画像のようにウィンドウを縮小したら全て表示されませんが、flowerの方では縮小してもしっかり、画面におさまるようになっていますレスポンシブは一切していないのに、そこの違いはなぜなのかということです

kuma_kuma_

2020/09/23 03:10

考え違いをされているようですので > プロゲートのサイトは画像のようにウィンドウを縮小したら全て表示されませんがこの様にわざわざ設定しているのです。画像を多用している場合レイアウトが変わると元のイメージと変わってしまうためあえて画面サイズに合わせて変更しない作りとなっています。

行動規範の内容に同意します

回答1件

ベストアンサー

模写したコードから、以下の要素を削除するとどうなりますか？

html
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

補足依頼欄拝読。

css
1.container {
2/*	width: 1170px; */
3	margin: auto;
4	padding: 0 15px;
5	letter-spacing: 5px;
6}

この部分を消してみるとどうでしょうか？

投稿2020/09/23 03:01

編集2020/09/23 03:17

Lhankor_Mhy

総合スコア36960

Lhankor_Mhy

2020/09/23 03:02

すみません、誤投稿しました。

Lhankor_Mhy

2020/09/23 03:04

訂正しました。

退会済みユーザー

2020/09/23 03:05

大丈夫です〜

退会済みユーザー

2020/09/23 03:22

回答ありがとうございます。追記で書かれた部分を消すとできました

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

画面の縮小によるUIの変化について

プロゲートサイトのコード

模写しているコード

関連した質問