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

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

質問する

ただいまの
回答率

88.37%

メディアクリエリの設定が効かない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 205
Yuta25

Yuta25

score 5

イメージ説明

HTML CSSの勉強中で
上記画像のようにレスポンシブ対応のメディアクリエリを設定したいのですが767pxの場合と479pxの設定が上手くいかなくて崩れてしまいます。

原因をご教授いただければ幸いです。

ソースコード
↓ 

.wrapper{
    width: 400px;
    margin: auto;
  }

  .header{
    width: 400px;
    height: 100px;
    background-color: #141f40;
  }

  .side{
    width: 150px;
    height: 250px;
    background-color: #80bfa8;
    float: left;
  }

  .content{
    width: 250px;
    height: 250px;
    float: right;
  }

  .top-left{
    width: 150px;
    height: 150px;
    float: left;
  }

  .top-left-top{
    width: 150px;
    height: 50px;
    background-color: #dbd400;
    float: left;
  }

  .top-left-bottom{
    width: 150px;
    height: 100px;
    background-color: #0093b7;
    float: left;
  }

  .content-top-right{
    width: 100px;
    height: 150px;
    background-color: #ff9e6b;
    float: right;
  }

  .content-top-right p {
    float: right;
  }

  .content-bottom{
    width: 250px;
    height: 100px;
    background-color: #8c2727;
  }

  .footer{
    width: 400px;
    height: 100px;
    background-color: #d98d30;
  }

  .clearfix:after {
    display: block;
    content: "";
    clear: both;
  }

  p {
      color:#fff;
      padding:3px;
      font-size:3px;

  }

 ```レスポンシブ対応  
@media screen and (max-width: 767px) {  
.header {  
width: 300px;  
}  

.side{  
width: 100px;  
}  

.content-top-right{  
width: 75px;  
}  
.top-left-top{    
width: 125px;  
}  

.top-left-bottom{  
width: 125px;  
}  

.content-bottom{  
float: left;  
width: 200px;  
}  

.footer{  
float: none;  
width: 300px;  
}  
}  

@media screen and (max-width: 479px) {  
.header {  
width: 150px;  
}  

.side{  
height: 100px;  
width: 150px;  
}  

.top-left-bottom{  
right: 50px;  
width: 150px;  
height:100px;  
}  

.content-top-right {  
right: 80px;  
height: 100px;  
width:150px;  
}  


.top-right{  
width: 150px;  
height: 100px;  
}  

.content-bottom{  
width: 150px;  
height: 100px;  
}  
.footer {  
float: none;  
width: 150px;  

}  
}  
```html
コード
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"  href="culuculum.css">
    <link rel="stylesheet"  href="culuculum2.css">
</head>
<body>
  <div class="wrapper">
        <div class="header">
      <p>#141f40</p>        
        </div>
        <div class="main clearfix">
            <div class="side">
           <p>#80bfa8</p>
             </div>
              <div class="content">
               <div class="contet-top clearfix">
            <div class="top-left">
            <div class="top-left-top">
            <p>dbd400</p>
            </div>
            <div class="top-left-bottom">
                <p>#0093b7</p>
            </div>
                </div>
            <div class="content-top-right">
            <p>#ff9e6b</p>
                </div>
                </div>
            <div class="content-bottom">
          <p>#8c2727</p>
                </div>
            </div>
        </div>    
        <div class="footer">
      <p>#d98d30</p>        
        </div>
    </div>
</body>
</html>

 

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

checkベストアンサー

0

現状のHTMLを変更しないなら、下記のCSSで。

横並びは float を使うと解除（ClearFix）が面倒なので、
FlexBoxを使ってます。 

* {
  margin: 0;
}
.wrapper{
  width: 400px;
  margin: auto;
}
.header{
  height: 100px;
  background-color: #141f40;
}
.main, .content-top {
  display: flex;
}
.side{
  width: 150px;
  background-color: #80bfa8;
}
.content{
  width: 250px;
}
.top-left{
  width: 150px;
}
.top-left-top{
  height: 50px;
  background-color: #dbd400;
}

.top-left-bottom{
  height: 100px;
  background-color: #0093b7;
}

.content-top-right{
  width: 100px;
  background-color: #ff9e6b;
}
.content-bottom{
  height: 100px;
  background-color: #8c2727;
}
.footer{
  height: 100px;
  background-color: #d98d30;
}
p {
  color:#fff;
  padding:3px;
  font-size:3px;
}

@media screen and (max-width: 767px) {  
  .wrapper{
    width: 300px;
  }
  .side{  
    width: 100px;  
  }  
  .content {
    width: 200px;
  }
  .content-top-right{  
    width: 75px;  
  }  
  .top-left{    
    width: 125px;  
  }  
  .content-bottom{  
     width: 200px;  
  }  
}  

@media screen and (max-width: 479px) {  
  .wrapper, .wrapper * {
    width: 150px;
  }
  .main, .content {
    height: 100%;    
  }
  .main, .content-top {
    display: block;
  }
  .content-top {
    display: flex;
    flex-direction: column-reverse;
  }
  .side,
  .content-top-right {  
    height: 100px;  
  }  
}


CodePenサンプル

HTMLを変更してもいいのなら、CSS Grid を使うとシンプルに実現できます。 

<div class="wrapper">
  <div class="header">
    <p>#141f40</p>        
  </div>
  <div class="side">
    <p>#80bfa8</p>
  </div>
  <div class="content-left-top">
    <p>#dbd400</p>
  </div>
  <div class="content-left-bottom">
    <p>#0093b7</p>
  </div>
  <div class="content-right">
    <p>#ff9e6b</p>
  </div>
  <div class="content-bottom">
    <p>#8c2727</p>
  </div>
  <div class="footer">
    <p>#d98d30</p>        
  </div>
</div>
.wrapper {
  width: 400px;
  margin: auto;
  display: grid;
  grid-template-columns: 150px 150px 100px;
  grid-template-rows: 100px 50px repeat(3, 100px);
}
.header {
  grid-column: 1/4;
  background-color: #141f40;
}
.side {
  grid-row: span 3;
  background-color: #80bfa8;
}
.content-left-top {
  background-color: #dbd400;
}
.content-left-bottom {
  grid-column: 2;
  background-color: #0093b7;
}
.content-right {
  grid-column: 3;
  grid-row: 2/4;
  background-color: #ff9e6b;
}
.content-bottom {
  background-color: #8c2727;
  grid-column: 2/4;
}
.footer {
  grid-column: 1/4;
  background-color: #d98d30;  
}
p {
  color:#fff;
  padding:3px;
  font-size:3px;
}
@media screen and (max-width: 767px) {
  .wrapper {
    width: 300px;
    grid-template-columns: 100px 125px 75px;
  }
}
@media screen and (max-width: 479px) {
  .wrapper {
    width: 150px;
    grid-template-columns: 150px;
    grid-template-rows: repeat(3, 100px) 50px repeat(3, 100px);
  }  
  .wrapper > div {
    grid-column: 1;
    grid-row: span 1;
  }
  .wrapper > .content-right {
    grid-row: 3;
  }
}


CodePenサンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

0

一例です。 

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .allWrap {
            width: 150px;
            margin: 0 auto;
        }

        .allWrap * {
            width: 100%;
        }

        header {
            height: 100px;
            background-color: #141f40;
        }

        .boxA {
            height: 110px;
            background-color: #80bfa8;
        }

        .boxB {
            height: 110px;
            background-color: #ff9e6b;
        }

        .boxC {
            height: 110px;
            background-color: #dbd400;
        }

        .boxD {
            height: 110px;
            background-color: #0093b7;
        }

        .boxE {
            height: 110px;
            background-color: #8c2727;
        }

        footer {
            height: 110px;
            background-color: #d98d30;
        }

        @media screen and (min-width: 767px) {
            .allWrap {
                width: 300px;
                margin: 0 auto;
                position: relative;
            }

            header {
                width: 300px;
                height: 100px;
                background-color: #141f40;
            }

            .boxA {
                width: 100px;
                height: 250px;
                background-color: #80bfa8;
            }

            .boxB {
                width: 75px;
                height: 150px;
                background-color: #ff9e6b;
                position: absolute;
                top: 100px;
                left: 225px;
            }

            .boxC {
                width: 125px;
                height: 50px;
                background-color: #dbd400;
                position: absolute;
                top: 100px;
                left: 100px;
            }

            .boxD {
                width: 125px;
                height: 100px;
                background-color: #0093b7;
                position: absolute;
                top: 150px;
                left: 100px;
            }

            .boxE {
                width: 200px;
                height: 100px;
                background-color: #8c2727;
                position: absolute;
                top: 250px;
                left: 100px;
            }

            footer {
                width: 300px;
                height: 100px;
                background-color: #d98d30;
            }
        }
    </style>
</head>

<body>
    <div class="allWrap">
        <header></header>
        <div class="boxA"></div>
        <div class="boxB"></div>
        <div class="boxC"></div>
        <div class="boxD"></div>
        <div class="boxE"></div>
        <footer></footer>
    </div>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

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