レスポンシブ対応して画面を小さくすると見切れてしまいます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6  <link rel="stylesheet" href="responsive11.css" type="text/css" media="screen and (max-width:414px)">
7  <link rel="stylesheet" type="text/css" href="practice11.css">
8  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9  <title>practice11</title>
10</head>
11<body>
12  <header>
13    <div class="inner">
14      <div class="header-logo"><a href="https://xeory.jp/extension">XeoryExtension</a></div>
15      <div class="menu">
16        <div class="menu1"><a href="https://xeory.jp/extension/sample">記事ページサンプル</a></div>
17        <div class="menu2"><a href="https://xeory.jp/template/xeory-extension/">Extensionをダウンロード</a></div>
18      </div>
19      <div id="page_top"><a href="#"></a></div>
20    </div>
21  </header>
22  <div id="section1">
23    <div class="inner">
24      <h1>Xeory Extension</h1>
25      <p>Xeory Extensionはワンコラムのサイト型テーマです。ユーザーに対して重要なコンテン<br>ツを効率的に届けられるようにデザインされています。５種類のカラーバリエーションを
26        <br>用意しています。
27      </p>
28    </div>
29  </div>
30  <div id="section2">
31    <div class="inner">
32      <h2 class="section2-ttl"><i class="fas fa-flag"></i>人気のある記事</h2>
33      <div class="flex-box">
34        <ul>
35          <li><a href="https://xeory.jp/extension/demo-top"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/MacBook-and-clutter.png" alt=""><p class="num1">NO.1</p>
36            <p class="background-green">カテゴリー#1</p>
37            <p class="test">テスト投稿</p></a>
38          </li>
39          <li><a href="https://xeory.jp/extension/extension-cta"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-holding.png" alt=""><p class="num2">NO.2</p>
40            <p class="background-green">カテゴリー#1</p>
41            <p class="test">テスト投稿</p></a>
42          </li>
43          <li><a href="https://xeory.jp/extension/facebook-likebox"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/communication.png" alt=""><p class="num3">NO.3</p>
44            <p class="background-green">カテゴリー#1</p>
45            <p class="test">テスト投稿</p></a>
46          </li>
47          <li><a href="https://xeory.jp/extension/wp-gallery"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-at-the-coffee-shop.jpg" alt=""><p class="num4">NO.4</p>
48            <p class="background-green">カテゴリー#1</p>
49            <p class="test">テスト投稿</p></a>
50          </li>
51          <li><a href="https://xeory.jp/extension/xeorybase-social-media"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/rest-time-in-front-of-macbook.png" alt=""><p class="num5">NO.5</p>
52            <p class="background-green">カテゴリー#1</p>
53            <p class="test">テスト投稿</p></a>
54          </li>
55        </ul>
56      </div><!--flex-box-->
57    </div>
58  </div><!--section2-->
59  <div id="section3">
60    <div class="inner">
61      <h2 class="section3-ttl"><i class="far fa-clock"></i>最近の投稿</h2>
62      <div class="flex-box">
63        <ul>
64          <li><a href="https://xeory.jp/extension/demo-top"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/MacBook-and-clutter.png" alt=""><p class="date">2014<br>10/24</p>
65            <p class="background-green">カテゴリー#1</p>
66            <p class="test">テスト投稿</p></a>
67          </li>
68          <li><a href="https://xeory.jp/extension/extension-cta"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-holding.png" alt=""><p class="date">2014<br>10/24</p>
69            <p class="background-green">カテゴリー#1</p>
70            <p class="test">テスト投稿</p></a>
71          </li>
72          <li><a href="https://xeory.jp/extension/facebook-likebox"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/communication.png" alt=""><p class="date">2014<br>10/24</p>
73            <p class="background-green">カテゴリー#1</p>
74            <p class="test">テスト投稿</p></a>
75          </li>
76          <li><a href="https://xeory.jp/extension/wp-gallery"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/macbook-at-the-coffee-shop.jpg" alt=""><p class="date">2014<br>10/24</p>
77            <p class="background-green">カテゴリー#1</p>
78            <p class="test">テスト投稿</p></a>
79          </li>
80          <li><a href="https://xeory.jp/extension/xeorybase-social-media"><img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/rest-time-in-front-of-macbook.png" alt=""><p class="date">2014<br>10/24</p>
81            <p class="background-green">カテゴリー#1</p>
82            <p class="test">テスト投稿</p></a>
83          </li>
84        </ul>
85      </div><!--flex-box-->
86    </div>
87  </div><!--section3-->
88  
89</body>
90</html>

css
1.inner {
2  overflow: hidden;
3  max-width: 100%;
4}
5body {
6  margin: 0;
7  padding: 0;
8  max-width: 100%;
9}
10body a {
11  text-decoration: none;
12}
13body ul {
14  list-style: none;
15}
16header {
17  background-color:rgb(70,179,157,0.9);
18  position: relative;
19  height: 80px;
20}
21header a {
22  color: white;
23}
24/*PAGE TOPボタン追加*/
25#page_top{
26width: 50px;
27height: 50px;
28position: fixed;
29right: 0;
30bottom: 50px;
31background: #003a75; /*ボタンの色*/
32opacity: 0.6;
33border-radius: 50%; /*角の丸み*/
34z-index: 1005;
35}
36#page_top a{
37position: relative;
38display: block;
39width: 50px;
40height: 50px;
41text-decoration: none;
42}
43#page_top a::before{
44font-family: "Font Awesome 5 Free";
45content: "\f102"; /*アイコン*/
46font-weight: 900;
47font-size: 25px;
48color: #fff; /*アイコンの色*/
49position: absolute;
50width: 25px;
51height: 25px;
52top: 0;
53bottom: 0;
54right: 0;
55left: 0;
56margin: auto;
57text-align: center;
58}
59.header-logo {
60  position: absolute;
61  font-size: 20px;
62  letter-spacing: 1px;
63  left: 110px;
64  top: 20px;
65}
66.header-logo a {
67  font-weight: 100;
68}
69.menu {
70  left: 950px;
71  position: relative;
72  font-size: 16px;
73  margin-top: 15px;
74  background-color:rgb(70,179,157,1);
75}
76.menu a {
77  float: left;
78  margin: 10px;
79}
80.menu1:hover, .menu2:hover {
81  opacity: 0.5;
82}
83#section1 {
84  background-color: #41B29D;
85  height: 800px;
86  position: relative;
87}
88#section1 .inner {
89  color: white;
90  position: relative;
91  text-align: center;
92}
93#section1 h1 {
94  font-weight: 200;
95  font-size: 45px;
96  margin-top: 250px;
97}
98#section2 {
99  position: relative;
100  height: 490px;
101  border-bottom: 1px solid #E5E5E5;
102  background-color: #FBFBFB;
103}
104.section2-ttl i {
105  font-size: 20px;
106  margin: 10px;
107}
108.section2-ttl, .section3-ttl {
109  font-weight: 400;
110  text-align: center;
111  border-top: 1px solid #E5E5E5;
112  border-bottom: 1px solid #E5E5E5;
113  margin-top: 60px;
114  padding-top: 20px;
115  padding-bottom: 20px;
116  background-color: white;
117}
118.flex-box {
119  display: flex;
120  justify-content: center;
121  background-color: white;
122}
123.flex-box ul {
124  display: flex;
125}
126.flex-box li {
127  margin: 10px;
128  margin-top: 5px;
129  padding: 0;
130}
131.flex-box img {
132  width: 212px;
133  height: 141px;
134}
135.num1, .num2, .num3, .num4, .num5 {
136  color: white;
137  font-weight: 200;
138  font-size: 14px;
139  width: 40px;
140  position: absolute;
141  padding: 10px 4px 10px 6px;
142  top: 169px;
143}
144.num1 {
145  background-color: #E3C779;
146  opacity: 0.9;
147}
148.num2 {
149  background-color: #A4ACB0;
150  opacity: 0.8;
151}
152.num3 {
153  background-color: #844E37;
154  opacity: 0.8;
155}
156.num4 {
157  background-color: #5C432A;
158  opacity: 0.8;
159}
160.num5 {
161  background-color: #5E5F4E;
162  opacity: 0.8;
163}
164.background-green {
165  background-color: #46B39D;
166  color: white;
167  font-size: 14px;
168  padding: 5px 10px;
169  width: 100px;
170}
171.test {
172  color: black;
173  margin: 0;
174}
175.test:hover {
176  border-bottom: 1px solid #46B39D;
177  width: 80px;
178  margin: 0;
179}
180#section3 {
181  position: relative;
182  margin-top: 0;
183  border-bottom: 1px solid #E5E5E5;
184  height: 480px;
185}
186.section3-ttl {
187  margin-top: 40px;
188}
189.date {
190  color: white;
191  background-color: #3A3E44;
192  opacity: 0.8;
193  width: 40px;
194  padding: 5px 4px 5px 6px;
195  font-size: 13px;
196  position: absolute;
197  top: 146px;
198}

前提・実現したいこと

スマホ用にレスポンシブ対応したいのですが、レスポンス用のコードを書く前に画面を小さくすると要素は見切れてしまうものなのでしょうか？
それとも構造に問題があるのでしょうか？
元サイトの模写をしているので元サイトと同じレスポンシブ対応にしたいです。

試したこと

width: 100%;をいろいろなところに試しましたがどうしても見切れてしまいます。
@mediaでwidth414pxでoverflow: hiddenを試したのですが上手くいきません。
あと、文字の大きさを変えるたいのですが効きません。
ここに問題に対して試したことを記載してください。

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

元のサイトのURLは(https://xeory.jp/extension/)です。
よろしくお願いいたします！

s8_chu

2020/02/18 19:54

もし質問内容が解決された場合は、ベストアンサーを選択し、質問を解決済みにしていただけませんか？

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

回答1件

ベストアンサー

スマホ用にレスポンシブ対応したいのですが、レスポンス用のコードを書く前に画面を小さくすると要素は見切れてしまうものなのでしょうか？

.inner クラスへ overflow: hidden を指定しているので、ヘッダーやセクションはのはみ出した部分は切り取られます (参考)。そして、メニュー (.menu) は left プロパティに 950px が指定されているので画面幅が小さくなればはみ出し、それらは上記の動作により切り取られます。「人気のある記事」や「最近の投稿」の ul 要素に関しても flex-wrap プロパティが nowrap であり、リスト内の各要素に指定された幅の合計よりも画面幅が小さくなれば、それらははみ出し、切り取られます。

これらの動作は .inner クラスの overflow: hidden を外すことで確認出来ます (動作確認用リンク)。

CSS
1.inner {
2  /* overflow: hidden; */
3  max-width: 100%;
4}
5
6body {
7  margin: 0;
8  padding: 0;
9  max-width: 100%;
10}
11
12body a {
13  text-decoration: none;
14}
15
16body ul {
17  list-style: none;
18}
19
20header {
21  background-color: rgb(70, 179, 157, 0.9);
22  position: relative;
23  height: 80px;
24}
25
26header a {
27  color: white;
28}
29
30#page_top {
31  width: 50px;
32  height: 50px;
33  position: fixed;
34  right: 0;
35  bottom: 50px;
36  background: #003a75;
37  opacity: 0.6;
38  border-radius: 50%;
39  z-index: 1005;
40}
41
42#page_top a {
43  position: relative;
44  display: block;
45  width: 50px;
46  height: 50px;
47  text-decoration: none;
48}
49
50#page_top a::before {
51  font-family: "Font Awesome 5 Free";
52  content: "\f102";
53  font-weight: 900;
54  font-size: 25px;
55  color: #fff;
56  position: absolute;
57  width: 25px;
58  height: 25px;
59  top: 0;
60  bottom: 0;
61  right: 0;
62  left: 0;
63  margin: auto;
64  text-align: center;
65}
66
67.header-logo {
68  position: absolute;
69  font-size: 20px;
70  letter-spacing: 1px;
71  left: 110px;
72  top: 20px;
73}
74
75.header-logo a {
76  font-weight: 100;
77}
78
79.menu {
80  left: 950px;
81  position: relative;
82  font-size: 16px;
83  margin-top: 15px;
84  background-color: rgb(70, 179, 157, 1);
85}
86
87.menu a {
88  float: left;
89  margin: 10px;
90}
91
92.menu1:hover,
93.menu2:hover {
94  opacity: 0.5;
95}
96
97#section1 {
98  background-color: #41B29D;
99  height: 800px;
100  position: relative;
101}
102
103#section1 .inner {
104  color: white;
105  position: relative;
106  text-align: center;
107}
108
109#section1 h1 {
110  font-weight: 200;
111  font-size: 45px;
112  margin-top: 250px;
113}
114
115#section2 {
116  position: relative;
117  height: 490px;
118  border-bottom: 1px solid #E5E5E5;
119  background-color: #FBFBFB;
120}
121
122.section2-ttl i {
123  font-size: 20px;
124  margin: 10px;
125}
126
127.section2-ttl,
128.section3-ttl {
129  font-weight: 400;
130  text-align: center;
131  border-top: 1px solid #E5E5E5;
132  border-bottom: 1px solid #E5E5E5;
133  margin-top: 60px;
134  padding-top: 20px;
135  padding-bottom: 20px;
136  background-color: white;
137}
138
139.flex-box {
140  display: flex;
141  justify-content: center;
142  background-color: white;
143}
144
145.flex-box ul {
146  display: flex;
147}
148
149.flex-box li {
150  margin: 10px;
151  margin-top: 5px;
152  padding: 0;
153}
154
155.flex-box img {
156  width: 212px;
157  height: 141px;
158}
159
160.num1,
161.num2,
162.num3,
163.num4,
164.num5 {
165  color: white;
166  font-weight: 200;
167  font-size: 14px;
168  width: 40px;
169  position: absolute;
170  padding: 10px 4px 10px 6px;
171  top: 169px;
172}
173
174.num1 {
175  background-color: #E3C779;
176  opacity: 0.9;
177}
178
179.num2 {
180  background-color: #A4ACB0;
181  opacity: 0.8;
182}
183
184.num3 {
185  background-color: #844E37;
186  opacity: 0.8;
187}
188
189.num4 {
190  background-color: #5C432A;
191  opacity: 0.8;
192}
193
194.num5 {
195  background-color: #5E5F4E;
196  opacity: 0.8;
197}
198
199.background-green {
200  background-color: #46B39D;
201  color: white;
202  font-size: 14px;
203  padding: 5px 10px;
204  width: 100px;
205}
206
207.test {
208  color: black;
209  margin: 0;
210}
211
212.test:hover {
213  border-bottom: 1px solid #46B39D;
214  width: 80px;
215  margin: 0;
216}
217
218#section3 {
219  position: relative;
220  margin-top: 0;
221  border-bottom: 1px solid #E5E5E5;
222  height: 480px;
223}
224
225.section3-ttl {
226  margin-top: 40px;
227}
228
229.date {
230  color: white;
231  background-color: #3A3E44;
232  opacity: 0.8;
233  width: 40px;
234  padding: 5px 4px 5px 6px;
235  font-size: 13px;
236  position: absolute;
237  top: 146px;
238}