編集履歴

質問編集履歴

内容の修正

2020/03/15 12:57

投稿

kotouharuto

スコア38

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,7 +4,7 @@
 ここに質問の内容を詳しく書い
-現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、画像のように、なぜかElementsパネルでIPHONEXで１００％にしても表示されるされるサイズがかなり小さくなってしまいます。
+現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、画像のように、なぜかElementsパネルでIPHONEXで１００％にしても表示されるされる位置がずれてしまいます。

文字の修正

2020/03/15 12:57

投稿

kotouharuto

スコア38

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -54,7 +54,7 @@
 コード
-```<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="ja">
@@ -188,143 +188,259 @@
 </html>
+```
 ```css3
 ソースコード
-```<!DOCTYPE html>
-<html lang="ja">
-    <head>
-        <meta charset="utf-8">
-        <title>サイト１</title>
-        <link rel="stylesheet" href="css/styles.css">
-    </head>
-    <body>
-        <header>
-            <h1 class="hh1">すごいアプリ</h1>
-            <p class="p1">ウルトラすごい最高なアプリです</p>
-            <a href="" id="btn">ダウンロード</a><br>
-            <img id="img1" src="MyAwesomeApp/img/top.png">
-        </header>
-        <main>
-            <section class="feature1">
-                <h1 class="hh2">すごい特徴</h1>
-                    <section>
-                    <div class="container">
-                    <img id="img2" src="MyAwesomeApp/img/feature1.png">
-                    <h2 class="hh3">すごい</h2>
-                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
-                    </section>
-                    <section>
-                    <img id="img2" src="MyAwesomeApp/img/feature2.png">
-                    <h2 class="hh3">すごい</h2>
-                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
-                    </section>
-                    <section>
-                    <img id="img2" src="MyAwesomeApp/img/feature3.png">
-                    <h2 class="hh3">すごい</h2>
-                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
-                    </section>
-                </div>
-            </section>
-            <section class="members">
-                <h1>メンバー紹介</h1>
-            <ul>
-                <li>
-                    <img id="img3" src="MyAwesomeApp/img/member1.png">
-                    <h2>山田太郎</h2>
-                    <p class="p3">がんばります。がんばります。がんばります</p>
-                </li>
-                <li>
-                    <img id="img3" src="MyAwesomeApp/img/member2.png">
-                    <h2>山田二郎</h2>
-                    <p class="p3">がんばります。がんばります。がんばります</p>
-                </li>
-                <li>
-                    <img id="img3" src="MyAwesomeApp/img/member3.png">
-                    <h2>山田花子</h2>
-                    <p class="p3">がんばります。がんばります。がんばります</p>
-                </li>
-            </ul>
-            </section>
-            <section class="info">
-                <h1>今すぐダウンロード</h1>
-                <div id="btn">ダウンロード</div>
-            </section>
-            <footer>
-                <p class="p4">&copy;&nbsp;dotinstall.com</p>
-            </footer>
-        </main>
-    </body>
-</html>
+body {
+    margin: 0;
+}
+header h1,
+.headre p {
+    margin: 0;
+}
+header {
+    background: orange;
+    color: white;
+    text-align: center;
+    padding-top: 40px;
+}
+header img {
+    width: 280px;
+    vertical-align: bottom;
+}
+#btn {
+    width: 140px;
+    line-height: 44px;
+    background: white;
+    text-decoration:  none;
+    color: orange;
+    font-weight: bold;
+    font-size: 14px;
+    margin: 40px auto 48px;
+    display: block;
+    border-radius: 4px;
+    text-align: center;
+}
+#btn:hover {
+    cursor: pointer;
+    opacity: 0.8;
+}
+.hh2 {
+    padding: 30px;
+    text-align: center;
+    font-weight: normal;
+}
+#img2 {
+    padding: 20px 75px;
+}
+.p2 {
+    padding-left: 72px;
+}
+.hh3 {
+    font-size: 20px;
+    padding: 10px 72px;
+    margin: 0px;
+}
+.members ul {
+    list-style: none;
+    margin: 0;
+}
+.members h1 {
+    font-weight: normal;
+    font-size: 23px;
+    text-align: center;
+    padding-top: 70px;
+}
+.members h2 {
+    font-size: 20px;
+}
+#img3 {
+    border-radius: 50%;
+    width: 155px;
+}
+.members {
+    background: rgb(238, 238, 238);
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+ul li {
+    margin: 0;
+}
+.members p {
+    padding-bottom: 70px;
+    margin: 0;
+}
+.info {
+    background: orange;
+    margin: 0;
+    padding: 64px 0;
+}
+.info h1 {
+    font-weight: normal;
+    color: white;
+    text-align: center;
+}
+footer {
+    background: rgb(57, 56, 56);
+    height: 150px;
+}
+.p4 {
+    color: rgb(199, 189, 189);
+    margin: 0;
+    text-align: center;
+    align-items: center;
+    line-height: 140px;
+}
+```

文字の修正

2020/03/15 02:56

投稿

kotouharuto

スコア38

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,12 +1,10 @@
-### 前提・実現したいこと
+![イメージ説明](8abd812c8c5c059150c50501f76309bf.png)### 前提・実現したいこと
 サイトのレスポンシブ対応をさせたいです
 ここに質問の内容を詳しく書い
-現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、
+現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、画像のように、なぜかElementsパネルでIPHONEXで１００％にしても表示されるされるサイズがかなり小さくなってしまいます。
-なぜかElementsパネルでIPHONEXで１００％にしても表示されるされるサイズがかなり小さくなってしまいます。

文法の修正

2020/03/15 02:51

投稿

kotouharuto

スコア38

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -20,6 +20,42 @@
 コード
+```
+■■な機能を実装中に以下のエラーメッセージが発生しました。
+### 発生している問題・エラーメッセージ
+```pc版サイトは平気だが、スマホ版で表示すると、サイズが小さくなってしまう。
+エラーメッセージ
+```無し
+### 該当のソースコード
+```html5
+コード
 ```<!DOCTYPE html>
 <html lang="ja">
@@ -154,283 +190,143 @@
 </html>
-body {
-    margin: 0;
-}
-header h1,
-.headre p {
-    margin: 0;
-}
-header {
-    background: orange;
-    color: white;
-    text-align: center;
-    padding-top: 40px;
-}
-header img {
-    width: 280px;
-    vertical-align: bottom;
-}
-#btn {
-    width: 140px;
-    line-height: 44px;
-    background: white;
-    text-decoration:  none;
-    color: orange;
-    font-weight: bold;
-    font-size: 14px;
-    margin: 40px auto 48px;
-    display: block;
-    border-radius: 4px;
-    text-align: center;
-}
-#btn:hover {
-    cursor: pointer;
-    opacity: 0.8;
-}
-.hh2 {
-    padding: 30px;
-    text-align: center;
-    font-weight: normal;
-}
-#img2 {
-    padding: 20px 75px;
-}
-.p2 {
-    padding-left: 72px;
-}
-.hh3 {
-    font-size: 20px;
-    padding: 10px 72px;
-    margin: 0px;
-}
-.members ul {
-    list-style: none;
-    margin: 0;
-}
-.members h1 {
-    font-weight: normal;
-    font-size: 23px;
-    text-align: center;
-    padding-top: 70px;
-}
-.members h2 {
-    font-size: 20px;
-}
-#img3 {
-    border-radius: 50%;
-    width: 155px;
-}
-.members {
-    background: rgb(238, 238, 238);
-    text-align: center;
-    margin: 0;
-    padding: 0;
-}
-ul li {
-    margin: 0;
-}
-.members p {
-    padding-bottom: 70px;
-    margin: 0;
-}
-.info {
-    background: orange;
-    margin: 0;
-    padding: 64px 0;
-}
-.info h1 {
-    font-weight: normal;
-    color: white;
-    text-align: center;
-}
-footer {
-    background: rgb(57, 56, 56);
-    height: 150px;
-}
-.p4 {
-    color: rgb(199, 189, 189);
-    margin: 0;
-    text-align: center;
-    align-items: center;
-    line-height: 140px;
-}
-■■な機能を実装中に以下のエラーメッセージが発生しました。
-### 発生している問題・エラーメッセージ
-```pc版サイトは平気だが、スマホ版で表示すると、サイズが小さくなってしまう。
-エラーメッセージ
-```無し
+```css3
-### 該当のソースコード
-```ここに言語名を入力
 ソースコード
+```<!DOCTYPE html>
+<html lang="ja">
+    <head>
+        <meta charset="utf-8">
+        <title>サイト１</title>
+        <link rel="stylesheet" href="css/styles.css">
+    </head>
+    <body>
+        <header>
+            <h1 class="hh1">すごいアプリ</h1>
+            <p class="p1">ウルトラすごい最高なアプリです</p>
+            <a href="" id="btn">ダウンロード</a><br>
+            <img id="img1" src="MyAwesomeApp/img/top.png">
+        </header>
+        <main>
+            <section class="feature1">
+                <h1 class="hh2">すごい特徴</h1>
+                    <section>
+                    <div class="container">
+                    <img id="img2" src="MyAwesomeApp/img/feature1.png">
+                    <h2 class="hh3">すごい</h2>
+                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
+                    </section>
+                    <section>
+                    <img id="img2" src="MyAwesomeApp/img/feature2.png">
+                    <h2 class="hh3">すごい</h2>
+                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
+                    </section>
+                    <section>
+                    <img id="img2" src="MyAwesomeApp/img/feature3.png">
+                    <h2 class="hh3">すごい</h2>
+                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
+                    </section>
+                </div>
+            </section>
+            <section class="members">
+                <h1>メンバー紹介</h1>
-```
+            <ul>
+                <li>
+                    <img id="img3" src="MyAwesomeApp/img/member1.png">
+                    <h2>山田太郎</h2>
+                    <p class="p3">がんばります。がんばります。がんばります</p>
+                </li>
+                <li>
+                    <img id="img3" src="MyAwesomeApp/img/member2.png">
+                    <h2>山田二郎</h2>
+                    <p class="p3">がんばります。がんばります。がんばります</p>
+                </li>
+                <li>
+                    <img id="img3" src="MyAwesomeApp/img/member3.png">
+                    <h2>山田花子</h2>
+                    <p class="p3">がんばります。がんばります。がんばります</p>
+                </li>
+            </ul>
+            </section>
+            <section class="info">
+                <h1>今すぐダウンロード</h1>
+                <div id="btn">ダウンロード</div>
+            </section>
+            <footer>
+                <p class="p4">&copy;&nbsp;dotinstall.com</p>
+            </footer>
+        </main>
+    </body>
+</html>

書き途中で誤って投稿してしまったため。

2020/03/15 02:47

投稿

kotouharuto

スコア38

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,42 +4,434 @@
 ここに質問の内容を詳しく書い
+現在、html5,css3で模写コーディングをしているのですが、スマホ対応するためにレスポンシブ対応をしたいのですが、
+なぜかElementsパネルでIPHONEXで１００％にしても表示されるされるサイズがかなり小さくなってしまいます。
+ドットインストールのサイトにあった物を模写したのでソースコードを確認して直そうと思ったところ、自分のコードとソースコードが全然違ったので直しようがななく困っています。
+どうしたらいいか教えてください
 ここに言語を入力
+```html5,css3
+コード
+```<!DOCTYPE html>
+<html lang="ja">
+    <head>
+        <meta charset="utf-8">
+        <title>サイト１</title>
+        <link rel="stylesheet" href="css/styles.css">
+    </head>
+    <body>
+        <header>
+            <h1 class="hh1">すごいアプリ</h1>
+            <p class="p1">ウルトラすごい最高なアプリです</p>
+            <a href="" id="btn">ダウンロード</a><br>
+            <img id="img1" src="MyAwesomeApp/img/top.png">
+        </header>
+        <main>
+            <section class="feature1">
+                <h1 class="hh2">すごい特徴</h1>
+                    <section>
+                    <div class="container">
+                    <img id="img2" src="MyAwesomeApp/img/feature1.png">
+                    <h2 class="hh3">すごい</h2>
+                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
+                    </section>
+                    <section>
+                    <img id="img2" src="MyAwesomeApp/img/feature2.png">
+                    <h2 class="hh3">すごい</h2>
+                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
+                    </section>
+                    <section>
+                    <img id="img2" src="MyAwesomeApp/img/feature3.png">
+                    <h2 class="hh3">すごい</h2>
+                    <p class="p2">とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。とにかくすごい。</p>
+                    </section>
+                </div>
+            </section>
+            <section class="members">
+                <h1>メンバー紹介</h1>
+            <ul>
+                <li>
+                    <img id="img3" src="MyAwesomeApp/img/member1.png">
+                    <h2>山田太郎</h2>
+                    <p class="p3">がんばります。がんばります。がんばります</p>
+                </li>
+                <li>
+                    <img id="img3" src="MyAwesomeApp/img/member2.png">
+                    <h2>山田二郎</h2>
+                    <p class="p3">がんばります。がんばります。がんばります</p>
+                </li>
+                <li>
+                    <img id="img3" src="MyAwesomeApp/img/member3.png">
+                    <h2>山田花子</h2>
+                    <p class="p3">がんばります。がんばります。がんばります</p>
+                </li>
+            </ul>
+            </section>
+            <section class="info">
+                <h1>今すぐダウンロード</h1>
+                <div id="btn">ダウンロード</div>
+            </section>
+            <footer>
+                <p class="p4">&copy;&nbsp;dotinstall.com</p>
+            </footer>
+        </main>
+    </body>
+</html>
+body {
+    margin: 0;
+}
+header h1,
+.headre p {
+    margin: 0;
+}
+header {
+    background: orange;
+    color: white;
+    text-align: center;
+    padding-top: 40px;
+}
+header img {
+    width: 280px;
+    vertical-align: bottom;
+}
+#btn {
+    width: 140px;
+    line-height: 44px;
+    background: white;
+    text-decoration:  none;
+    color: orange;
+    font-weight: bold;
+    font-size: 14px;
+    margin: 40px auto 48px;
+    display: block;
+    border-radius: 4px;
+    text-align: center;
+}
+#btn:hover {
+    cursor: pointer;
+    opacity: 0.8;
+}
+.hh2 {
+    padding: 30px;
+    text-align: center;
+    font-weight: normal;
+}
+#img2 {
+    padding: 20px 75px;
+}
+.p2 {
+    padding-left: 72px;
+}
+.hh3 {
+    font-size: 20px;
+    padding: 10px 72px;
+    margin: 0px;
+}
+.members ul {
+    list-style: none;
+    margin: 0;
+}
+.members h1 {
+    font-weight: normal;
+    font-size: 23px;
+    text-align: center;
+    padding-top: 70px;
+}
+.members h2 {
+    font-size: 20px;
+}
+#img3 {
+    border-radius: 50%;
+    width: 155px;
+}
+.members {
+    background: rgb(238, 238, 238);
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+ul li {
+    margin: 0;
+}
+.members p {
+    padding-bottom: 70px;
+    margin: 0;
+}
+.info {
+    background: orange;
+    margin: 0;
+    padding: 64px 0;
+}
+.info h1 {
+    font-weight: normal;
+    color: white;
+    text-align: center;
+}
+footer {
+    background: rgb(57, 56, 56);
+    height: 150px;
+}
+.p4 {
+    color: rgb(199, 189, 189);
+    margin: 0;
+    text-align: center;
+    align-items: center;
+    line-height: 140px;
+}
+■■な機能を実装中に以下のエラーメッセージが発生しました。
+### 発生している問題・エラーメッセージ
+```pc版サイトは平気だが、スマホ版で表示すると、サイズが小さくなってしまう。
+エラーメッセージ
+```無し
+### 該当のソースコード
+```ここに言語名を入力
+ソースコード
 ```
-コード
-```
-■■な機能を実装中に以下のエラーメッセージが発生しました。
-### 発生している問題・エラーメッセージ
-```
-エラーメッセージ
-```
-### 該当のソースコード
-```ここに言語名を入力
-ソースコード
-```
 ### 試したこと
@@ -48,10 +440,18 @@
 ここに問題に対して試したことを記載してください。
+・各要素のwidthの変更
+・googleでレスポンシブ対応について調べる
+・googleで、「レスポンシブ対応　要素が小さくなる」と調べたが、いまいちわからない
 ### 補足情報（FW/ツールのバージョンなど）
+・pc -> macbook air 13インチ
+・ブラウザ -> 最新のchroomeブラウザ
+・テキストエディタ ->  最新のvscode
 ここにより詳細な情報を記載してください。