HTML＆CSSだけで、レスポンシブ化したい

#前提・実現したいこと
現在、私はドットインストールで勉強したことのアウトプットもかねて、自分のポートフォリオサイトを作っています。
パソコンで見たときのサイトは完成しました。
しかし、iPhoneSEの画面サイズに会わせると、サイズが崩れてしまいます。

実現したいこと
サイトを崩さないようにしたいです。どのようにすればいいでしょうか？

#試したこと
こちらのサイトを参考に、画面サイズが480px以下の時にwidthを100％にしてみましたが、表示は、変わりませんでした。

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

エラーメッセージ
こちらが完成しているサイト

こちらが、モバイル版にしたときのサイトです。

上記画像を見ていただきますと、**薄緑色の部分が、途切れていること**がわかると思います。
こちらを、左端から右端まで出来るようにしたいのです。

#該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width" ,initial-scale="1.0",minimum-scale="1.0">
7    <title>サイト</title>
8    <link rel="icon" href='img/Py.ico'>
9    <meta name="description" content="サイトです。">
10    <link rel="stylesheet" href="css/styles.css">
11</head>
12<body>
13<header>
14    <div class="container">
15        <div class="icon">
16            <img class="move_icon" src="img/human.png" width="120" height="120" alt="のアイコンです">
17            <a href="mailto:crowdkanri@gmail.com"></a>
18        </div>
19        <div class="profile">
20            <h1>Name</h1>
21            <p>Profile</p>
22        </div>
23
24    </div>
25</header>
26
27<div class="info">
28    <div class="list"><fieldset>
29
30        <legend><h1>制作物一覧</h1></legend>
31        <label><input type="checkbox">制作物1</label><br>
32
33    </fieldset>
34    </div>
35
36    <section class="works">
37
38
39        <section>
40            <a href="htmlを入れる"><img src="img/work3.png" width="400" height="260" alt="紹介画像"></a>
41            <h1> 制作物1</h1>
42
43
44            <p> 拝啓
45            </p>
46
47
48            <p class="recommend">
49                <span class="recommend">一番の自信作</span>です！
50            </p>
51            <p>工夫した点
52            </p>
53
54            <center>
55            <a href=URL" >
56                作品は、こちら！
57            </a>
58                </center>
59
60
61        </section>
62
63
64        <!--        #を忘れないように注意だ！！-->
65    </section>
66
67    <section class="contact_form">
68
69
70            <p>お問い合わせフォームは、こちら！</p>
71            <ul>
72                 <a href="mailto:メールアドレス"><img class="contact_form_picture" src="img/mail_icon.png"
73                                                           width="50"
74                                                           height="50"
75                                                           alt="写真サイトへのリンク画像です">
76                </a>
77
78
79            </ul>
80    </section>
81
82
83    <footer>
84        <p>メールアドレス</p>
85    </footer>
86</div>
87<script>function randomCharactor(c) {
88
89    //跳ねさせる要素をすべて取得
90    var randomChar = document.getElementsByClassName(c);
91
92    //for で総当たり
93    for (var i = 0; i < randomChar.length; i++) {
94
95        //クロージャー
96        (function (i) {
97
98            //i 番目の要素、テキスト内容、文字列の長さを取得
99            var randomCharI = randomChar[i];
100            var randomCharIText = randomCharI.textContent;
101            var randomCharLength = randomCharIText.length;
102
103            //何番目の文字を跳ねさせるかをランダムで決める
104            var Num = ~~(Math.random() * randomCharLength);
105
106            //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
107            var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
108            randomCharI.innerHTML = newRandomChar;
109
110            //アニメーションが終わったら再び関数を発火させる
111            document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function () {
112                randomCharactor(c)
113            }, false)
114        })(i)
115    }
116}
117
118//クラス名が recommend のクラスを跳ねさせる
119randomCharactor("recommend");</script>
120</body>
121</html>
122

css
1
2@charset "utf-8";
3
4body {
5    color: #333;
6    font-family: sans-serif;
7}
8
9header {
10    background-color: #efef;
11    /*padding-bottom: 30px;*/
12    /*padding-top: 30px;*/
13    margin: auto;
14
15
16}
17
18.move_icon {
19    display: block;
20    margin: auto;
21    position: relative;
22    animation: anime1 1s ease;
23}
24
25@keyframes anime1 {
26    0% {
27        opacity: 0;
28        top: 50px;
29    }
30    100% {
31        opacity: 1;
32        top: 0px;
33    }
34
35}
36
37
38.container {
39    margin: auto;
40    width: 400px;
41    display: flex;
42    align-items: center;
43}
44
45.profile {
46    background-color: #efef;
47    margin: auto;
48
49}
50
51.info {
52    margin: auto;
53
54}
55
56.info h1 {
57    font-weight: normal;
58    font-size: 30px;
59}
60
61.list {
62    width: 400px;
63    margin: auto;
64
65}
66
67
68.icon img {
69    border-radius: 50%;
70    /*半径になってくる*/
71    border-width: 4px;
72    border-style: solid;
73    /*線の種類*/
74    border-color: white;
75}
76
77.works {
78    width: 400px;
79    margin: auto;
80}
81
82.recommend {
83
84    font-weight: bold;
85    color: red;
86    font-size: 25px;
87    text-align: center;
88    /*animation-delay: 1s;*/
89    position: relative;
90
91}
92
93.recommend span {
94    animation: pyona 0.1s linear;
95    position: relative;
96}
97
98@keyframes pyona {
99    0% {
100        top: 0
101    }
102    50% {
103        top: -17px
104    }
105    100% {
106        top: 1px
107    }
108}
109
110.works > h1 {
111    text-align: center;
112    /*中央揃えになる*/
113    font-size: 30px;
114    font-weight: normal;
115    /*見出しから、小さくなる*/
116
117    margin-top: 20px;
118    margin-bottom: 20px;
119    /*margin: 20px;*/
120    /*!*せっかく中央揃えにしたのに、marginで指定してしまうと、*!*/
121    /*大きさが合わなくなるため、topやbottomで指定する*/
122}
123
124.works > section {
125    /*margin: 30px;*/
126    /*!*せっかく中央揃えにしたのに、marginで指定してしまうと、*!*/
127    /*大きさが合わなくなるため、topやbottomで指定する*/
128
129    margin-top: 20px;
130    margin-bottom: 30px;
131}
132
133.works > > section > h1 {
134    font-weight: normal;
135}
136
137.works p {
138    line-height: 1.8;
139    text-decoration: none;
140}
141
142.contact_form {
143    background-color: #efef;
144    /*width: 400px;*/
145    margin: auto;
146    text-align: center;
147
148}
149
150.contact_form_picture {
151    animation: pyon 0.5s ease-in-out infinite;
152    animation-delay: 0.5s;
153    position: relative;
154
155}
156
157@keyframes pyon {
158    0% {
159        -ms-transform: translateY(0px);
160        -webkit-transform: translateY(0px);
161        transform: translateY(0px);
162    }
163
164    25% {
165        -ms-transform: translateY(-25px);
166        -webkit-transform: translateY(-25px);
167        transform: translateY(-25px);
168    }
169
170    50% {
171        -ms-transform: translateY(0px);
172        -webkit-transform: translateY(0px);
173        transform: translateY(0px);
174    }
175}
176
177footer {
178    text-align: center;
179    font-size: 10px;
180    background-color: gray;
181    color: white;
182
183    /*width: 400px;*/
184    margin: auto;
185
186
187}
188@media screen and (max-width: 480px){
189  main, aside {
190    width: 400px;
191  }
192
193  main img {
194    float: none;
195  }
196
197  h1, h2 {
198    font-size: 16px;
199  }
200}
201

回答を受けて、直したCSS
最後の、@mediaを変更した。

CSS
1@media screen and (max-width: 319px) {
2    div {
3        width: 318px;
4    }
5    .info{
6        width: 318px;
7    }
8
9    section section a img {
10        width: 318px;
11        float: none;
12    }
13
14    h1, h2 {
15        font-size: 16px;
16        width: 318px;
17    }
18
19    fieldset {
20        width: 318px;
21
22    }
23
24}
25

#教えていただきたいこと
3点あります。

1、どのようにサンプルコードを変えればいのか？
2、回答するときにググったキーワード
3、解決方法の導き方

この三点を教えていただきたいです！
自力で解決できるようになりたいので！

行動規範の内容に同意します

回答1件

ベストアンサー

呈示のCSSで動作確認しましたが、質問の症状は再現できませんでした。

メディアクエリ内の下記のコードですが、main, aside というセクションはHTMLにないので、無意味だと思いますが、実際のCSSですか。

css
1  main, aside {
2    width: 400px;
3  }

症状の再現できるコードを提示してもらわないと回答は難しいです。

投稿2019/12/29 03:50

hatena19

総合スコア34073

YUMA-NAGAO

2019/12/29 05:00

実際に使っているコードです。先ほどの[参考サイト](https://pecopla.net/web-column/how-to-responsive) を元に、作成したコードです。反映されていないかもしれないので、確認してみます。

YUMA-NAGAO

2019/12/29 05:07

実際のCSSのコードを記述してあります。

YUMA-NAGAO

2019/12/29 05:45

理解しました。直しましたので、ご確認下さい。

hatena19

2019/12/29 06:20

解決済みになってますが、解決したということでしょうか? 修正したCSSですが、(max-width: 319px) となってますが、現在のスマホで画面幅が319px以下のものってほとんどないですので、これも無意味な設定だと思います。

YUMA-NAGAO

2019/12/29 06:37

該当部分を変化したら、うまくなったので、解決したという扱いにしました。スマホに対応する画面幅としては、何pxにするのが、最適でしょうか？色々調べたのですが、よくわかりませんでした。

hatena19

2019/12/29 06:41 編集

「レスポンシブブレイクポイント」で検索すればいろいろ解説サイトが見つかるのでそれを参考にしてください。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

HTML＆CSSだけで、レスポンシブ化したい

関連した質問