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

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

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

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

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

Q&A

0回答

998閲覧

リロードした後と、ライブプレビューを開きなおした後で表示が異なるのですがどちらを信用したらよいですか? 解決法は?

mitrasi

総合スコア49

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

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

0グッド

0クリップ

投稿2021/01/15 06:55

編集2022/01/12 10:55

前提・実現したいこと

以下にある通り、プレビューの見方によってレイアウトが異なるので、どちらを頼りに修正したらよいかわかりません????
言語の質問になるかどうかは際どいところですが、大変困っています。
どうぞご教授お願い致します。

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

CSSなどを編集した後に「すべて保存」→開いてあったプレビューリロード →きれいに見える CSSなどを編集した後に「すべて保存」→新しくプレビュー再起動 →崩れている

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>サンプルページ</title> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 <link rel="stylesheet" href="CSS/responsive.css"> 11 12 13 14</head> 15 16<body> 17 <header> 18 <div class="header-wrapper title wrapper"> 19 <div class="header-top "> 20 <h1>はじめてのコーディング</h1> 21 </div> 22 <div class="top-message title"> 23 <img class="top-image" src="images/kv-img.jpg"> 24 <p class="top">コーディングを学習して、<br>オリジナルサイトを作成しよう</p> 25 </div> 26 <h2>はじめに</h2> 27 <div class="header-text"> 28 <p>このサイトはコーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイトを「使える状態」にすることです。</p> 29 </div> 30 </div> 31 </header> 32 33 <div class="content-wrapper title wrapper"> 34 <div class="kokorogamae "> 35 <h2>学習の心構え</h2> 36 <div class="content-text"> 37 <p>暗記しようとしない</p><br> 38 <p>反復練習する</p><br> 39 <p>習得するまでコピペ禁止</p><br> 40 <p>1回で理解できなくても気にしない</p><br> 41 </div> 42 </div> 43 44 45 <div class-="content wrapper"> 46 <h2>学習すること</h2> 47 48 <div class="container"> 49 <div class="items HTML5"> 50 <img src="images/icon_html.jpg"> 51 <p class="contents">HTML5</p> 52 </div> 53 54 <div class="items CSS3"> 55 <img src="images/icon_css.jpg"> 56 <p class="contents">CSS3</p> 57 </div> 58 59 <div class="items js"> 60 <img src="images/icon_js.jpg"> 61 <p class="contents">JavaScript/Jquery</p> 62 </div> 63 </div> 64 65 </div> 66 </div> 67 68 69 70 <a href="#" class="button">Webサイトを見る</a> 71 72 <footer> 73 <p>@2020cresta.design</p> 74 </footer> 75 76 77 78</body></html> 79 80

該当のソースコード

CSS

1@charset "utf-8"; 2 3@import "variables"; 4 5 6/*全体のレイアウト*/ 7html { 8 width: 100%; 9 text-align: center; 10 font-family: $font; 11 box-sizing: border-box; 12} 13 14/*共通レイアウト 表題*/ 15.title h2 { 16 color: $orange; 17 font-size: 2.5vw; 18 font-weight: 500px; 19 margin-top: 100px; 20 margin-bottom: 50px; 21} 22 23/*共通レイアウト 各項目余白*/ 24.wrapper { 25 margin-bottom: 100px; 26 width: auto; 27} 28 29 30 31/*メインタイトル*/ 32.header-top { 33 background-color: $orange; 34 height: 3vw; 35 color: $white; 36 margin: auto; 37 font-size: 33px; 38 font-weight: bold; 39} 40 41/*親:トップ 背景画像*/ 42.top-image { 43 height: 20vw; 44 position: relative; 45 width: 100%; 46 47} 48 49/*子:画像上テキスト 配置*/ 50.top-message p { 51 position: absolute; 52 color: white; 53 top: 32%; 54 left: 15%; 55 text-align: center; 56 font-size: 33px; 57 display: block; 58} 59 60/*中央ぞろえ かつ 左寄せ*/ 61.header-text { 62 text-align: left; 63 display: inline-block; 64 line-height: 30px; 65} 66 67 68 69/*コンテンツ部 背景色*/ 70.kokorogamae { 71 background-color: #f0f0f0; 72 padding-bottom: 100px; 73 padding-top: 30px; 74 box-sizing: border-box; 75} 76 77 78/*コンテンツ部 横ならべ*/ 79.container { 80 display: flex; 81 justify-content: center; 82 align-items: center; 83 84 img { 85 width: 40%; 86 height: auto; 87 } 88 89 p { 90 text-align: start; 91 margin-left: 30%; 92 } 93} 94 95/*コンテンツ部 各三つの要素のレイアウト*/ 96 97/*コンテンツ部 コンテンツ間余白調整*/ 98.CSS3 { 99 margin-right: -170px; 100 margin-left: -170px; 101} 102 103/*コンテンツ部 各三つの要素のテキスト部 レイアウト*/ 104.items { 105 margin: 0 auto; 106 font-weight: bold; 107} 108 109/*コンテンツ部 背景*/ 110.content-wrapper { 111 width: 100%; 112} 113 114 115/*コンテンツ部 ボタンレイアウト*/ 116.button { 117 width: 150px; 118 font-size: 15px; 119 text-decoration: none; 120 display: block; 121 text-align: center; 122 padding: 12px 0 12px; 123 background-color: $orange; 124 color: $white; 125 outline: 0; 126 text-align: center; 127 display: inline-block; 128 margin-top: 50px; 129 margin-bottom: 200px; 130} 131 132/*コンテンツ部 ボタン テキスト*/ 133.content p .button { 134 font-weight: bold; 135} 136 137 138 139 140/*フッター部 レイアウト設定*/ 141footer { 142 background-color: darkslategray; 143 height: 5px; 144 padding-top: 15px; 145 padding-bottom: 15px; 146 color: $white; 147 font-size: 8px; 148} 149

該当のソースコード(レスポンシブ)

CSS

1/*モバイル向けデザイン*/ 2 3/*----------以下、レスポンシブデザイン------------------*/ 4 5 6@media screen and (max-width: 768px) { 7 8 9 .header-top { 10 height: 3vw; 11 font-size: 150%; 12 } 13 14 .top { 15 font-size: 200%; 16 } 17 18 .title h2 { 19 font-size: 100%; 20 } 21 22 .top-image { 23 height: 200px; 24 } 25 26 .top-message p { 27 top: 20%; 28 left: 18%; 29 font-size: 120%; 30 line-height: 120%; 31 } 32 33 .header-text { 34 text-align: center; 35 } 36 37 .container { 38 display: block; 39 } 40 41 .CSS3 { 42 margin: 10% 0; 43 } 44 45 46} 47

試したこと

リロードを頼りに修正したり、開きなおした状態を頼りに修正したりしていますが、どちらもごちゃごちゃになっていて、どちらを頼りにしていいか結局わかりませんでした。

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

OS:Windows
ブラウザ:クローム
エディタ:Bracket

参考画像

リロード後

イメージ説明
新規プレビュー後
イメージ説明

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

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

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

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

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

mitrasi

2021/01/15 07:04

失礼しました????修正完了致しました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問