Q&A
CSSではないですよね。この書き方。
.manabi-list {
font-size: 16px;
.manabi-list-item {
p {
前提・実現したいこと
何度か作っているテーマなのですが、レスポンシブの一部がうまくききません。
以下、ご教授よろしくお願いいたします。
①スマホ幅にしたい
②一部指示が聞かないところを直したい。
該当のソースコード
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>©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様
失礼いたしました。ご指摘ありがとうございます。修正いたしました。
なるほど。
ただ、コンパイル後のcss提示されたほうが良いでしょうね。
>m.ts10806様
ご指摘ありがとうございます！コンパイル後の提示完了致しました。
「②一部指示が聞かないところを直したい」とのことですが、聞かない指示をご提示ください。
>Lhankor_Mhy様
ご指摘ありがとうございます。「site-title」「kv-copy」などです。
「など」ではわからないので、とりあえず、「site-title」「kv-copy」の二つににスタイルが効いていれば解決という理解で構いませんか？
>Lhankor_Mhy様
はい。現在確認できるところその二点でございます。
ご提示のコードを試してみましたが、
①について、幅がはみ出すような問題は起きませんでした。
②について、スタイルは効いているようでした。
つまり、問題が再現しませんでした。
ご提示いただいていない部分のコードが原因だと思われます。
>Lhankor_Mhy様
ご回答ありがとうございます！
①に関しては、追記コメントの通りです。
ほかに提示していないとなると、
・リセットcss（使いまわしで同じ模写コーディングをして今まで問題なかったはず）
・変数css（色しか指定していない）
となりますが、一応提示したほうがよろしいのでしょうか？????
いえ、他にもCSSモジュールを読み込んでいるはずです。
@import "va";
とあります。
ああそうか、va は variable の略ですか？
>Lhankor_Mhy様
おっしゃる通りです！スペルミスしそうだったので、とりあえず一時的に「va」にしています。
頂いたご回答試してみます！後ほどご報告致しますので、もうしばらくお待ちくださいませ。
HTML内でもCSS内でも「このウィンドウサイズの時に○○にする」といった記載が無いように見えるのですがどこかに書いてありますか。
`@media screen and (max-width: 480px) { }`とか`<link rel="stylesheet" media="(max-width: 480px)" href="sp.css">`とか
Bracketsを使ったことが無いので的外れだったり私の見落としだったらこの指摘は無視してください。
>dit.様
ご指摘ありがとうございます！
大変申し訳ありません????「resuponsive.css」に提示しているのはコンパイル前の「style.css」になっていますね。実際は別途メディアクエリを付与した「responsive.css」がございます。
（いまから提示したら以後質問を見る方ややこしくなってしまいますかね…）
提示の「responsive.css」を見てそんな感じはしていましたが、やはり中身そのものが違っていたのですね。
質問内容が変わるわけではないので正しい「responsive.css」を提示していただいても問題ないと思います。追記ではなく書き換える場合、気になるなら「間違っていたものを提示していたので本来のものに書き換えた」旨を一緒に記載されるといいかと。
>dit.様
ご指摘ありがとうございます！
かしこまりました。提示コードの訂正、完了致しました。
全然気づいてなかった????
回答1件
0
ベストアンサー
こんにちは。
「はじめてのコーディング」などが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
総合スコア36087
あなたの回答
tips
プレビュー
