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

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

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

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

CSS

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

Q&A

解決済

1回答

1351閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

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

UI Design

UI Design(UIデザイン)は、ユーザインターフェースをデザインすることです。ユーザーとシステムがスムーズにコミュニケーションを取るために、OSやアプリ画面などを使いやすくデザインすることを指します。

CSS

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

0グッド

0クリップ

投稿2020/09/21 03:15

編集2020/09/21 03:17

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

どちらともレスポンシブのことは書いていません
イメージ説明
イメージ説明

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

<!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; }

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

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

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

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

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

kuma_kuma_

2020/09/21 12:40

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

退会済みユーザー

2020/09/23 03:04

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

2020/09/23 03:10

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

回答1

0

ベストアンサー

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

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

総合スコア35865

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

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

Lhankor_Mhy

2020/09/23 03:02

すみません、誤投稿しました。
退会済みユーザー

退会済みユーザー

2020/09/23 03:05

大丈夫です〜
退会済みユーザー

退会済みユーザー

2020/09/23 03:22

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問