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

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

ただいまの
回答率

87.33%

レスポンシブ対応が上手くいかない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 746

score 9

イメージ説明

学習サイトを見てHTML CSSの勉強中ですが通常レイアウトは上手くできましたが上の画像のように479までの場合のレスポンシブ対応を配置したいのですが何回修正してもどうしても上手くいかなくて困ってます。 原因はなぜなのでしょうか?

コード<!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>o</title>
    <link rel="stylesheet" href="curriculum.css">



</head>
<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="top-1 boxs">
        </div>
        <div class="top-2 boxs"></div>
        <div class="top-3 boxs"> </div>
            <div class="main clearfix">
              <div class="main-left">  </div>
              <div class="main-right clearfix">
                <div class="box-a box">
                </div>
                <div class="box-b box"></div>
                <div class="box-c box"></div>
                </div>
            </div>
          <div class="footer"></div>
    </div>
     </body>
    </html>

ここに言語を入力css
コード

  margin: 0;
  display: block;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 450px;
  margin: auto;
}

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

}

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

.boxs {
  background-color:#a9004b;
  width: 40px;
  height: 40px;
  float: right;
  right:25px;
  position: relative;
  border: solid  8px #FFFFFF;


}

.top-1 {
  position: relative;
  top:20px;
  bottom:10px;

}


.top-2 {
  position: relative;
  top:20px;



}

.top-3 {
  position: relative;
  top:20px;
  bottom:30px;


}



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

.main-right {
  height: 250px;
  width: 250px;
  background-color: #8c2727;
  float: left;

}

.box{
  background-color: #ff863f;
  width: 140px;
  height: 40px;
  position: absolute;
  left: 40px;
  right: 60px;
  border:5px solid #FFFFFF ;
  display: inline-block;
}

.box-a{
  position: relative;
  top: 60px;
  bottom:5px;

}


}

.box-b{
  position: relative;
  top:65px;
  bottom:10px;
}

.box-c{
  position: relative;
  top: 70px;
  bottom: 20px;
}



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

レスポンシブ対応
コード
@media screen and (max-width: 479px) {

.wrapper {
width: 270px;
margin: auto;

}

.header {
width:270px;
height: 150px;
background-color: #141f40;
}

.main-left {
width: 270px;
height: 100px;
background-color:#80bfa8;

}

.main-right {
width:270px;
height:100px;
background-color:#8c2727;

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

}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2020/11/12 10:27

    「上手くいかなくて困ってます」とのことですが、具体的にはどのような問題が起きていますか?

    結果(実際に起きたこと)を書きましょう
    https://teratail.com/help/question-tips#questionTips3-4-1

    期待した処理結果を書きましょう
    https://teratail.com/help/question-tips#questionTips3-4-3

    表現するための言葉がわからない時は表現の仕方を工夫しましょう
    https://teratail.com/help/question-tips#questionTips3-3-1

    キャンセル

回答 2

checkベストアンサー

+1

学習サイトを見てHTML CSSの勉強中ですが・・・

どのような学習サイトを見ているのか分かりませんが、
今時、floatで横並びさせたり、レイアウトをposition: absolute;で決めたりとか、しているようなサイトは参考にしないほうがいいと思いますよ。

今なら、FlexboxかGridでレイアウトを決めるのが主流ですので、そのような解説サイトを探した方がいいでしょう。


Flexboxでレイアウトを決めた場合のサンプル

CodePenサンプル

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

<div class="header"></div>


この header で top-1,2,3 を囲まないといけないのでは?
これでHTMLのインデントを揃えれば見通しがよくなると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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