Q&A
ありがとうございます。メディアクエリでうまく調整してみます。
isara の模写でレスポンシブ 対応をしています。
すると右側に謎の余白ができてしまい、埋めたいのですがうまくいきません。
試したこと overflow:wrapはググってやってみましたが、うまくいかず。
↑これを
↑こうしたい
まず、原因がわかりません。
よろしくお願いします。（コード長くてすみません。）
html
1コード<html lang="ja" dir="ltr"> 2 <head> 3 <meta charset="utf-8"> 4 <link rel="stylesheet" href="style.css"> 5 <link rel="stylesheet" href="responsive.css"> 6 <meta name="viewport" content="widht=device=device-width,initial-scale=1"> 7 <title>isara copy</title> 8 </head> 9 <body> 10 <header> 11 <div class="header-in"> 12 <img src="../img/isaralogo.png" alt="isara" height="45" width="128"> 13 <p>バンコクのノマドエンジニア育成講座</p> 14 <div class="btn"> 15 <a href="">お問い合わせ/資料請求はこちら</a> 16 </div> 17 <div class="btn4"> 18 <a href="">資料請求</a> 19 </div> 20 </div> 21 </header> 22 <div class="isaratop"> 23 <h1 class="txtl">プログラミングで<br>人生の安定を手にいれよう</h1> 24 <img src="../img/isaralogo.png" alt="isara" width="317" height="111"> 25 <p class="txtm">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p> 26 </div> 27 <div class="ask"> 28 <p class="txtm">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p> 29 <p class="ask-point">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p> 30 <div class="btn2"> 31 <a href="">お問い合わせ/資料請求はこちら</a> 32 </div> 33 <div class="kisei"> 34 <h2>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</h2> 35 <h2>第７期生：2020年2月17日 ~ 2019年3月7日＊締め切りました</h2> 36 <h2>第8期生：2020年4月〜5月ごろを予定＊資料請求受付中です</h2> 37 </div> 38 <div class="sns"> 39 <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">ツイート</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 40 <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=135&layout=button&action=like&size=small&share=true&height=65&appId" width="135" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> 41 42 </div> 43 44 </div> 45 <div class="freedom"> 46 <div class="txtbox"> 47 <p class="txtl">エンジニアとして本当の自由を手に入れるためには？</p> 48 </div> 49 <div class="freedam-text"> 50 <p class="txtm">エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</p> 51 <p class="txtm">しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p><br> 52 <p class="txtm">これで本当にいいのですか？</p> 53 <p class="txtm">日本人エンジニアはアメリカと較べて給料が格段に低い。</p> 54 <p class="txtm">その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p><br> 55 <p class="txtm">スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p> 56 <p class="txtm">そこで必要なのが <span class="underline">「稼ぐ力」</span>です。</p> 57 58 59 </div> 60 <div class="about-btn"> 61 <p>About</p> 62 </div> 63 </div> 64 <div class="about"> 65 <div class="txtbox"> 66 <p class="txtl">ノマドエンジニア育成講座<br>iSara[イサラ]とは</p> 67 </div> 68 <p class="txtm">「 稼ぐこと 」にフォーカスしたWebエンジニア育成講座です。</p> 69 <div class="about-box"> 70 <p class="txtm">稼げるエンジニアに必要な５つのスキルとは？</p> 71 <div class="flex"> 72 <div class="picturebox"> 73 <img src="../img/skill.jpg" widht="57" height="61"> 74 <p>基礎的な<br>プログラミングスキル</p> 75 </div> 76 <div class="picturebox"> 77 <img src="../img/sales.jpg" widht="57" height="61"> 78 <p>案件獲得に必要な<br>営業力</p> 79 </div> 80 <div class="picturebox"> 81 <img src="../img/document.jpg" widht="57" height="61"> 82 <p>見積もり作成から<br>納品までの知識</p> 83 </div> 84 <div class="picturebox"> 85 <img src="../img/plusone.jpg" widht="57" height="61"> 86 <p>自分の付加価値を<br>高めるスキル</p> 87 </div> 88 <div class="picturebox"> 89 <img src="../img/connection.jpg" widht="57" height="61"> 90 <p>フリーランス同士の<br>横のつながり</p> 91 </div> 92 </div> 93 94 </div> 95 96 </div> 97 <div class="aboutsecond"> 98 <h1>iSaraで「基本的なプログラミングスキル」は教えません</h1> 99 <h2>基礎的なプログラミングスキルは無料で学べる時代。</h2> 100 <h2>iSaraでは、基礎知識学習は<span class="about-second-txt">事前課題</span>と<span class="about-second-txt">チャットサポート</span>のみ。</h2> 101 102 </body> 103</html>
CSS
1コードコード@charset "utf-8"; 2 3body{ 4 margin:0; 5 color:#333; 6} 7header{ 8 height:70px; 9} 10p, h1, h2{ 11 text-align: center; 12 margin:0; 13} 14.txtl{ 15 font-size:24px; 16 font-weight: 600; 17 margin-bottom: 10px; 18} 19.txtm{ 20 font-size:20px; 21 margin-bottom: 10px; 22} 23.header-in p{ 24 margin:0; 25 display: inline-block; 26} 27header img{ 28 vertical-align: bottom; 29} 30.header-in{ 31 width:100%; 32 position: fixed; 33 top:0; 34 background-color: #ffffff; 35 padding:15px 50px; 36 z-index: 10; 37} 38 39.btn{ 40 width:318px; 41 height:44px; 42 border:1px solid #d86c67; 43 background-color: #d86c67; 44 border-radius: 25px; 45 text-align: center; 46 display: inline-block; 47 float:right; 48 margin-right: 70px; 49} 50.btn4{ 51 display: none; 52} 53.btn a{ 54 text-decoration: none; 55 color:#ffffff; 56 font-size:14px; 57 display: block; 58 height:100%; 59 padding-top:10px; 60} 61.btn:hover{ 62 background-color: #d84940; 63} 64.isaratop{ 65 background-image:url(../img/main.jpg); 66 background-size:cover; 67 height:500px; 68 text-align: center; 69} 70.isaratop h1{ 71 padding-top:80px; 72 line-height:50px; 73} 74.isaratop p{ 75 font-weight: 600; 76 margin-top:30px; 77} 78.ask{ 79 background-color: #ebb94c; 80 color:#ffffff; 81 height:600px; 82 /* text-align: center; */ 83 margin-bottom:60px; 84} 85.ask .txtm{ 86 padding-top:40px; 87} 88.ask-point{ 89 background-color: #f9f2f4; 90 border-radius:3px; 91 color:#c7254e; 92 width:420px; 93 margin:0 auto; 94 margin-top:20px; 95 margin-bottom: 50px; 96 font-weight:600; 97} 98.btn2{ 99 width:80%; 100 height:104px; 101 border:1px solid #d86c67; 102 background-color: #d86c67; 103 border-radius: 50px; 104 text-align: center; 105 margin: 0 auto; 106 margin-bottom:20px; 107} 108.btn2 a{ 109 text-decoration: none; 110 color:#ffffff; 111 font-size:28px; 112 display: block; 113 height:100%; 114 line-height:104px; 115 font-weight: 600; 116} 117.btn2:hover{ 118 background-color: #d84940; 119} 120.ask h2{ 121 font-size:21px; 122 margin-top:30px; 123} 124.sns{ 125 text-align: center; 126 margin-top:40px; 127 margin-bottom:40px; 128} 129 130/* /////////fleedam///////// / */ 131.freedom{ 132 background-image:url(../img/introbottom.jpg); 133 background-size:cover; 134 height:560px; 135 position: relative; 136} 137.txtbox{ 138 width:860px; 139 max-width:calc(100%-40%); 140 margin:0 auto; 141 position:relative; 142 z-index: 9; 143} 144.txtbox::before,.txtbox::after{ 145 content:''; 146 width:50px; 147 height:50px; 148 position: absolute; 149 display:inline-block; 150 box-sizing:border-box; 151} 152.txtbox::before{ 153 border-top:4px solid #eab857; 154 border-left:4px solid #eab857; 155 top:0; 156 left:0; 157} 158.txtbox::after{ 159 border-right:4px solid #eab857; 160 border-bottom:4px solid #eab857; 161 bottom:0; 162 right:0; 163} 164.txtbox .txtl{ 165 padding:30px 0 30px 0; 166} 167.underline{ 168 background:linear-gradient(transparent 70%,#eab857 50%); 169 font-weight:600; 170} 171.about-btn{ 172 color:#ffffff; 173 background-color:#EBB94D; 174 height: 80px; 175 width: 80px; 176 border-radius:50%; 177 position: absolute; 178 bottom:-40px; 179 left:0; 180 right:0; 181 margin:0 auto; 182} 183.about-btn p{ 184 line-height: 80px; 185} 186 187/* ///////////////about//////////////////////// */ 188.about{ 189 background-color:#FEF5E0; 190 padding-top:40px; 191 height:570px; 192} 193.about .txtm{ 194 font-weight:600; 195 margin-bottom:20px; 196} 197.flex{ 198 display: flex; 199 justify-content: center; 200} 201.about-box{ 202 margin:30px; 203 padding:20px; 204 padding-bottom:0; 205 border:2px solid #eab857; 206 border-radius:3px; 207 background-color:#fff; 208 height:230px; 209} 210.picturebox{ 211 text-align: center; 212 width:155px; 213 height:135px; 214} 215.picturebox p{ 216 font-size:12px; 217 margin-top:10px; 218} 219 220/* //////////aboutsecond////////// */ 221 222 223.aboutsecond{ 224 background-image: url(../img/aboutsecondbg.jpg); 225 background-size:cover; 226 height:460px; 227} 228.aboutsecond h1{ 229 color:#fff; 230 padding-top:50px; 231 font-weight: 100; 232} 233.aboutsecond h2{ 234 color:#fff; 235 font-weight:100; 236 font-size:20px; 237 line-height:60px; 238} 239.about-second-txt{ 240 color:#eabb57; 241} 242
CSS
1コード/* responsive */ 2@media screen and (max-width:760px){ 3 4.aboutsecond{ 5 height:850px; 6} 7}
回答2件
0
ベストアンサー
全体の幅より中身が大きいときにそういうはみ出し方をします。
デベロッパーツールで原因を特定しましょう。
CSS
1.txtbox { 2 width: 860px; 3/* max-width: calc(100%-40%); 4 ↓ */ 5 max-width: calc(100% - 40%); 6} 7```**動くサンプル：**[https://jsfiddle.net/x9toq6uk/](https://jsfiddle.net/x9toq6uk/) 8 9--- 10 11 12【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】 13[https://saruwakakun.com/html-css/basic/chrome-dev-tool](https://saruwakakun.com/html-css/basic/chrome-dev-tool) 14 15【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】 16[https://nandemo-nobiru.com/2944/](https://nandemo-nobiru.com/2944/)
投稿2020/05/26 09:11
総合スコア69606
0
まず、原因がわかりません。
↓表示したいものはこれだと思います。
html
1 <div class="btn4"> 2 <a href="">資料請求</a> 3 </div>
↓CSSで消しているのが原因です。
css
1.btn4{ 2 display: none; 3}
解決方法ですが、メディアクエリで表示させましょう。
投稿2020/05/26 09:04
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/26 09:50