質問編集履歴

1 ※追記 スクショを追加

退会済みユーザー

退会済みユーザー

2019/03/05 11:13  投稿

ブラウザを縮小しても変に崩れないで反映されるようにしたい。
質問の要件が曖昧なのは承知ですが、
要は、ブラウザを縮小しても『変に崩れないで欲しい』という事です。
縦型に縮小すれば、横並びになった要素が縦に綺麗にそのまま表示されたりと。
[例えばこのようなサイトのように](https://www.mochicom.jp/)
現在、Progateの道場コース初級をやり終えクリアはしたものの、
実際ブラウザで見ると、画面縮小した時に変に崩れます。
その私のソースコードがこちら↓
【HTML】
```
<!DOCTYPE html>
<html lang="jp" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>テスト用</title>
   <link rel="stylesheet" href="css/test.css">
 </head>
 <body>
   <header>
          <div class="logo">Progate</div>
          <div class="list">
           <ul>
            <li>プログラミングとは</li>
            <li>学べるレッスン</li>
            <li>お問い合わせ</li>
           </ul>
          </div>
      </header>
      <div class="main">
        <div class="top">
          <h1>HELLO WORLD<span>.</span></h1>
          <h2>プログラミングの世界へようこそ</h2>
       </div>
       <div class="contents">
         <div class="contents-title">
           <h3>学べるレッスン</h3>
         </div>
         <div class="contents-item">
           <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
           <p>HTML & CSS</p>
         </div>
         <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
         <p>PHP</p>
         </div>
         <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
         <p>Ruby</p>
         </div>
         <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
         <p>Swift</p>
         </div>
       </div>
       <div class=form>
         <h3 class="form-title">お問い合わせ</h3>
         <div class="form-contents">
             <div class="mail">
               <p>メールアドレス(必須)</p>
                <input type="text">
             </div>
             <div class="contact">
               <p>お問い合わせ内容(必須)</p>
               <textarea></textarea>
             </div>
             <div class="btn">
               <p>※必須項目は必ずご記入ください</p>
               <button>送信</button>
             </div>
         </div>
       </div>
      </div>
      <footer>
         <div class="left">
          <p>Progate</p>
         </div>
        <div class="right">
          <ul>
            <li>会社概要</li>
            <li>採用</li>
            <li>お問い合わせ</li>
          </ul>
        </div>
      </footer>
</body>
</html>
```
【CSS】
```
/* CSSのリセット(消さないでください) */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
 margin: 0;
 padding: 0;
}
li {
 list-style: none;
}
/* ここからCSSを記述してください */
body {
   font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
header{
 background-color:#26d0c9;
 color:white;
 height:90px;
}
.logo{
 float:left;
 font-size:36px;
 padding:20px 40px;
}
header li{
 float:left;
 padding:33px 20px;
}
/*header li{*/
/* display: inline-block;*/
/* float: left;*/
/* padding:33px 20px;*/
/*}*/
span{
 color:red;
}
.main{
 /*margin-top:100px;*/
 /*margin-left:80px;*/
 margin:100px 0px 100px 80px;
}
.top h1{
 font-size:140px;
}
.top h2{
 font-size:60px;
}
.contents{
 margin-top:100px;
 height:500px;
}
.contents-title{
 border-bottom: 2px solid #dee7ec;
 padding-bottom:15px;
 font-size:28px;
}
.contents-item{
 display:inline-block;
 margin:50px 40px 0 0;
}
.contents-item p{
 font-size:24px;
 padding-top:30px;
}
.form h3{
 font-size:28px;
}
.form-title{
 padding:100px 0 15px;
 border-bottom:2px solid #dee7ec;
 margin-bottom:50px;
}
.form-contents{
 width:400px;
}
input,textarea{
   width:400px;
   margin-top: 10px;
   margin-bottom: 30px;
   padding: 20px;
}
button{
 width:400px;
 padding:20px;
 font-size:18px;
 margin-top: 10px;
 background-color:#dee7ec;
 color:#889eab;
}
footer{
 background-color:#2f5167;
 height:120px;
 color:white;
  padding:40px ;
}
.left{
 float:left;
 font-size:32px;
}
.right{
 float:right;
}
.right li{
 padding-bottom:20px;
}
```
Progateでの正解と言われる模範回答のソースコードはこちら↓
【HTML】
```
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Progate</title>
   <link rel="stylesheet" href="css/syokyu_dojo.css">
 </head>
 <body>
   <!-- ここからHTMLを書き始めてください -->
   <div class="header">
     <div class="header-logo">Progate</div>
     <div class="header-list">
       <ul>
         <li>プログラミングとは</li>
         <li>学べるレッスン</li>
         <li>お問い合わせ</li>
       </ul>
     </div>
   </div>
   <div class="main">
     <div class="copy-container">
       <h1>HELLO WORLD<span>.</span></h1>
       <h2>プログラミングの世界へようこそ</h2>
     </div>
     <div class="contents">
       <h3 class="section-title">学べるレッスン</h3>
       <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
         <p>HTML & CSS</p>
       </div>
       <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
         <p>PHP</p>
       </div>
       <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
         <p>Ruby</p>
       </div>
       <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
         <p>Swift</p>
       </div>
     </div>
     <div class="contact-form">
       <h3 class="section-title">お問い合わせ</h3>
       <p>メールアドレス(必須)</p>
       <input>
       <p>お問い合わせ内容(必須)</p>
       <textarea></textarea>
       <p>※必須項目は必ずご入力ください</p>
       <input class="contact-submit" type="submit" value="送信">
     </div>
   </div>
   <div class="footer">
     <div class="footer-logo">Progate</div>
     <div class="footer-list">
       <ul>
         <li>会社概要</li>
         <li>採用</li>
         <li>お問い合わせ</li>
       </ul>
     </div>
   </div>
 </body>
</html>
```
【CSS】
```
/* CSSのリセット(消さないでください) */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
 margin: 0;
 padding: 0;
}
li {
 list-style: none;
}
/* ここからCSSを記述してください */
body {
 font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
.header {
 background-color: #26d0c9;
 color: #fff;
 height: 90px;
}
.header-logo {
 float: left;
 font-size: 36px;
 padding: 20px 40px;
}
.header-list {
 float: left;
}
.header-list li {
 float: left;
 padding: 33px 20px;
}
.main {
 padding: 100px 80px;
}
.copy-container h1 {
 font-size: 140px;
}
.copy-container h2 {
 font-size: 60px;
}
.copy-container span {
 color: #ff4a4a;
}
.contents {
 height: 500px;
 margin-top: 100px;
}
.section-title {
 border-bottom: 2px solid #dee7ec;
 font-size: 28px;
 padding-bottom: 15px;
 margin-bottom: 50px;
}
.contents-item {
 float: left;
 margin-right: 40px;
}
.contents-item p {
 font-size: 24px;
 margin-top: 30px;
}
.contact-form {
 padding-top: 100px;
}
input, textarea {
 width: 400px;
 margin-top: 10px;
 margin-bottom: 30px;
 padding: 20px;
 font-size: 18px;
 border: 1px solid #dee7ec;
}
.contact-submit {
 background-color: #dee7ec;
 color: #889eab;
}
.footer {
 background-color: #2f5167;
 color: #fff;
 height: 120px;
 padding: 40px;
}
.footer-logo {
 float: left;
 font-size: 32px;
}
.footer-list {
 float: right;
}
.footer-list li {
 padding-bottom: 20px;
}
```
Progateの道場コースは独自でやる為、完璧なコピペが正解では無く、
見た目がだいたい合っていればクリアになります。
ですのでクラス名など他表記が違うので検証しづらいと思いますが、ご了承ください。
【質問】
私のコードで「ココをこうすればこうなる」など教えて頂きたいのです。
根本から全て、模範回答のように書き換えてしまえば同じになりますが、それでは学べ無く、反省できません。
・何故縮小したら崩れるのか(模範回答は崩れないのに)
・どこをどうすれば良いのか
以上、よろしくお願いします。
以上、よろしくお願いします。
※追記 スクショ
私のコードだと、以下のように画面を縮小した際、
要素が重なります。
これを模範回答のように縮小しても見辛くならないようにする為に、
私のコードで修正する場合、どのようにすれば良いのかを教えて頂きたいだけです。
![イメージ説明](dbb334f5149fe46734c37cd5402618ef.png)
  • CSS3

    4022 questions

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

  • HTML5

    7726 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る