レスポンシブにしたいのですが、PC幅のまま表示されてしまいます。①スマホ幅にしたい　②.site-titleなど一部レスポンシブ指示がきかない

前提・実現したいこと

何度か作っているテーマなのですが、レスポンシブの一部がうまくききません。
以下、ご教授よろしくお願いいたします。

①スマホ幅にしたい
②一部指示が聞かないところを直したい。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <link rel="stylesheet" href="css/reset.css">
7 <link rel="stylesheet" href="css/style.css">
8 <meta name="viewport" content="width=device-width,initial-scale=1">
9 <link rel="stylesheet" href="css/responsive.css">
10 <title>はじめてのコーディング　テイク4</title>
11</head>
12
13<body>
14 <header>
15  <div class="site-title">
16   <h1>はじめてのコーディング</h1>
17  </div>
18 </header>
19 <main>
20  <div class="main-visial">
21   <div class="kv-copy">
22    <p>コーディングを学習して、<br>
23     オリジナルサイトを作成しよう</p>
24   </div>
25  </div>
26
27  <!--  はじめに-->
28  <section>
29   <h2 class="section-title">はじめに</h2>
30   <p class="section-text">
31    このサイトは、コーディング練習用のサイトです。HTMLやCSS、JavaScriptなどの言語を使って、Webサイトを「使える状態」にすることです。
32   </p>
33  </section>
34
35  <!-- 学習の心構え-->
36  <section>
37   <div class="bg-gray">
38    <div class="manabi wrapper">
39
40     <h2 class="section-title">学習の心構え</h2>
41     <ul class="manabi-list">
42      <li class="manabi-list-item">
43       <p>暗記しようとしない</p>
44      </li>
45      <li class="manabi-list-item">
46       <p>反覆練習する</p>
47      </li>
48      <li class="manabi-list-item">
49       <p>習得するまでコピペ禁止</p>
50      </li>
51      <li class="manabi-list-item">
52       <p>1回で理解できなくても気にしない</p>
53      </li>
54     </ul>
55    </div>
56   </div>
57  </section>
58
59  <!--学習すること -->
60  <section>
61   <div class="content wrapper">
62    <h2 class="section-title">学習すること</h2>
63    <ul class="content-wrapper">
64
65     <li class="content-item HTML5">
66      <img src="images/icon_html.jpg">
67      <p>HTML5</p>
68     </li>
69     <li class="content-item CSS3">
70      <img src="images/icon_css.jpg">
71      <p>CSS3</p>
72     </li>
73     <li class="content-item JavaScript">
74      <img src="images/icon_js.jpg">
75      <p>JavaScript</p>
76     </li>
77    </ul>
78   </div>
79
80
81
82  </section>
83  <a class="btn" href="#">Webサイトを見る
84  </a>
85 </main>
86 <footer>
87  <p>&copy;2020 cresta_design</p>
88 </footer>
89</body>
90
91</html>
92

該当のソースコード（style.css）

css
1@charset "UTF-8";
2@meta charset="utf-8";
3@chareset "utf-8";
4/*
5全体の共通レイアウト
6*/
7* {
8  box-sizing: border-box;
9}
10
11html {
12  text-align: center;
13  font-family: "Helvetica", "YuGothic";
14  font-size: 16px;
15  line-height: 1.5;
16}
17
18img {
19  width: 100%;
20  vertical-align: bottom;
21}
22
23section {
24  padding: 80px 0;
25}
26section h2 {
27  color: #E47B12;
28  font-size: 30px;
29  margin-bottom: 50px;
30  font-weight: bold;
31}
32
33/*
34ヘッダー
35*/
36header {
37  background-color: #E47B12;
38  text-align: center;
39  padding: 20px 0;
40}
41header h1 {
42  color: #fff;
43  font-size: 40px;
44  font-weight: bold;
45}
46
47/*
48
49トップ
50*/
51.top-image {
52  background-image: url(../images/kv-img.jpg);
53  background-size: cover;
54  background-position: center;
55  text-align: center;
56  padding: 155px 0;
57}
58.top-image h2 {
59  color: #fff;
60  font-size: 30px;
61}
62
63/*
64
65トップ
66*/
67.top .p {
68  text-align: left;
69  margin: 0 auto;
70}
71
72/*
73サブ
74*/
75.sub .bg-gray {
76  background-color: #f0f0f0;
77  margin: 50px 0;
78}
79.sub .bg-gray .list {
80  line-height: 200%;
81}
82
83/*
84コンテンツ
85*/
86.content {
87  display: flex;
88  justify-content: space-between;
89  max-width: 800px;
90  margin: 0 auto 50px;
91  padding: 0 20px;
92}
93.content .content-item {
94  width: 240px;
95}
96.content p {
97  font-weight: bold;
98  text-align: left;
99}
100
101/*
102ボタン
103*/
104.btn {
105  background-color: #E47B12;
106  color: #fff;
107  text-decoration: none;
108  text-align: center;
109  display: block;
110  font-weight: bold;
111  margin: auto;
112  line-height: 48px;
113  width: 210px;
114  margin-bottom: 100px;
115}
116
117/*
118/*
119
120/*
121フッター
122*/
123footer {
124  background-color: #222222;
125  color: #fff;
126  line-height: 48px;
127  text-align: center;
128  font-size: 12px;
129}
130

該当のソースコード（responsive.css）

css
1/*レスポンシブデザイン*/
2
3/*タブレットサイズ*/
4
5
6@media screen and (max-width:768px) {
7 .site-title {
8  font-size: 26px;
9 }
10
11 .kv-copy {
12  font-size: 24px;
13 }
14
15 .study-list {
16  display: block;
17 }
18
19 .study-list-item {
20  margin: 0 auto 20px;
21 }
22
23 .study-list-item:last-of-type {
24  margin-bottom: 0;
25 }
26}
27

試したこと

・レスポンシブ内のほかの箇所で色を変えるなど変化がわかりやすい指示を出してみる
→「site-title」などは相変わらず効かないが、「secion-text」などの一部では色変更の指示がきいた。このことから、読み込みなどメディアクエリそのものの指示は効いていると思われる。

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

コメントを受けての追記

①関しては、原因は不明ですがいつのまにか私の方でも解消できていたようです。
ご回答ありがとうございます。
②関しては、私の説明力不足でどんな状態が伝えられていないところもあるかと思いますので、スクショを添付致します。
コンソールに出ているエラー表示も気になるところです。関係あるかわかりませんが????

上記画像の状態で、「はじめてのコーディング」などがbackground-colorからはみ出したまま、フォントサイズを変更しようにも指示が聞かない状況です。

※解決後、提示コードのミスが発覚したため、訂正しております。ご了承くださいませ。

m.ts10806

2021/01/18 09:53

CSSではないですよね。この書き方。 .manabi-list { font-size: 16px; .manabi-list-item { p {

mitrasi

2021/01/18 10:04

>m.ts10806様失礼いたしました。ご指摘ありがとうございます。修正いたしました。

m.ts10806

2021/01/18 10:06

なるほど。ただ、コンパイル後のcss提示されたほうが良いでしょうね。

mitrasi

2021/01/18 10:14

>m.ts10806様ご指摘ありがとうございます！コンパイル後の提示完了致しました。

Lhankor_Mhy

2021/01/19 01:31

「②一部指示が聞かないところを直したい」とのことですが、聞かない指示をご提示ください。

mitrasi

2021/01/19 01:53

>Lhankor_Mhy様ご指摘ありがとうございます。「site-title」「kv-copy」などです。

Lhankor_Mhy

2021/01/19 02:07

「など」ではわからないので、とりあえず、「site-title」「kv-copy」の二つににスタイルが効いていれば解決という理解で構いませんか？

mitrasi

2021/01/19 02:08

>Lhankor_Mhy様はい。現在確認できるところその二点でございます。

Lhankor_Mhy

2021/01/19 04:32

ご提示のコードを試してみましたが、 ①について、幅がはみ出すような問題は起きませんでした。 ②について、スタイルは効いているようでした。つまり、問題が再現しませんでした。ご提示いただいていない部分のコードが原因だと思われます。

mitrasi

2021/01/19 05:22

>Lhankor_Mhy様ご回答ありがとうございます！ ①に関しては、追記コメントの通りです。ほかに提示していないとなると、・リセットcss（使いまわしで同じ模写コーディングをして今まで問題なかったはず）・変数css（色しか指定していない）となりますが、一応提示したほうがよろしいのでしょうか？????

Lhankor_Mhy

2021/01/19 05:42

いえ、他にもCSSモジュールを読み込んでいるはずです。 @import "va"; とあります。

Lhankor_Mhy

2021/01/19 05:42

ああそうか、va は variable の略ですか？

mitrasi

2021/01/19 06:13

>Lhankor_Mhy様おっしゃる通りです！スペルミスしそうだったので、とりあえず一時的に「va」にしています。頂いたご回答試してみます！後ほどご報告致しますので、もうしばらくお待ちくださいませ。

dit.

2021/01/19 06:24

HTML内でもCSS内でも「このウィンドウサイズの時に○○にする」といった記載が無いように見えるのですがどこかに書いてありますか。 `@media screen and (max-width: 480px) { }`とか`<link rel="stylesheet" media="(max-width: 480px)" href="sp.css">`とか Bracketsを使ったことが無いので的外れだったり私の見落としだったらこの指摘は無視してください。

mitrasi

2021/01/19 06:30

>dit.様ご指摘ありがとうございます！大変申し訳ありません????「resuponsive.css」に提示しているのはコンパイル前の「style.css」になっていますね。実際は別途メディアクエリを付与した「responsive.css」がございます。（いまから提示したら以後質問を見る方ややこしくなってしまいますかね…）

dit.

2021/01/19 06:36

提示の「responsive.css」を見てそんな感じはしていましたが、やはり中身そのものが違っていたのですね。質問内容が変わるわけではないので正しい「responsive.css」を提示していただいても問題ないと思います。追記ではなく書き換える場合、気になるなら「間違っていたものを提示していたので本来のものに書き換えた」旨を一緒に記載されるといいかと。

mitrasi

2021/01/19 06:55

>dit.様ご指摘ありがとうございます！かしこまりました。提示コードの訂正、完了致しました。

Lhankor_Mhy

2021/01/19 06:57

全然気づいてなかった????

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

回答1件

ベストアンサー

こんにちは。

「はじめてのコーディング」などがbackground-colorからはみ出したまま

scss
1header {
2    background-color: $orange;
3    height: 100px; // これが原因です。

フォントサイズを変更しようにも指示が聞かない

scss
1header h1 {
2    color: #fff;
3    font-size: 40px; // これが原因です。

投稿2021/01/19 05:48

Lhankor_Mhy

総合スコア36946

mitrasi

2021/01/19 06:22

>Lhankor_Mhy様ご教授頂きありがとうございます！おかげさまで無時解決致しました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

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

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

レスポンシブにしたいのですが、PC幅のまま表示されてしまいます。①スマホ幅にしたい　②.site-titleなど一部レスポンシブ指示がきかない

前提・実現したいこと

該当のソースコード

該当のソースコード（style.css）

該当のソースコード（responsive.css）

試したこと

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

コメントを受けての追記

関連した質問