Q&A
responsive.cssも提示してください。
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dental Clinic</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="responsive.css"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </head> <body> <div class="wrap"></div> <header> <div class="header-container"> <img src="siteTitle.png" class="title-img" > <div class="header-container-info"> <p>“地域に根付いた歯科医院” デンタル クリニック</p> <div class="header-tel">03-0000-0000</div> <p class="time">予約受付時間 10:00～19:30 <span class="sunday">日祝 休診</span></p> </div> <ul> <li> <a href="" class="first"> <span class="title-ja">トップページ</span> <span class="title-en">HOME</span> </a> </li> <li> <a href="" class=""> <span class="title-ja">医院紹介</span> <span class="title-en">CLINIC</span> </a> </li> <li> <a href="" class=""> <span class="title-ja">診療案内</span> <span class="title-en">SERVICE</span> </a> </li> <li> <a href="" class=""> <span class="title-ja">院長・スタッフ紹介</span> <span class="title-en">STAFF</span> </a> </li> <li> <a href="" class="last"> <span class="title-ja">アクセス</span> <span class="title-en">ACCESS</span> </a> </li> </ul> </div> </header> <div class="contents-wrapper"> <div class="contents"> <h2 class="menu-1">一般歯科</h2> <div class="menu-1-li"> <ul> <li><a href="">虫歯治療</a></li> <li><a href="">歯周病治療</a></li> <li><a href="">入れ歯</a></li> <li><a href="">予防歯科</a></li> </ul> </div> <h2 class="menu-2">審美歯科</h2> <div class="menu-2-li"> <ul> <li><a href="">ホワイトニング</a></li> <li><a href="">オールセラミック</a></li> <li><a href="">セラミックインレー</a></li> <li><a href="">PMTC</a></li> </ul> </div> </div> <div class="main"> <img src="in01.jpg" alt=""> <div class='inner'> <h2 class="new-info">新着情報</h2> <dl> <dt>2012年08月01日 </dt> <dd>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</dd> <dt>2012年07月24日 </dt> <dd>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</dd> <dt>2012年07月02日</dt> <dd>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。 </dd> <dt>2012年06月20日</dt> <dd>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</dd> <dt>2012年06月01日 </dt> <dd> ホームページをリニューアルしました。</dd> </dl> </div> </div> <div class="contenys-wrapper-clear"></div> </div> <footer> <div class="footer-container"> <div class="footer-list"> <ul> <li><a href="">トップページ</a></li> <li><a href="">医院紹介</a></li> <li><a href="">診療案内</a></li> <li><a href="">院長・スタッフ紹介</a></li> <li><a href="">アクセス</a></li> </ul> </div> <div class="footer-address"> <strong>デンタルクリニック</strong> <span> 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</span> </div> <p class="copyright">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p> </div> </footer> </div> </body> </html> ```ここに言語を入力 コード ```* { box-sizing: border-box; } body{ background-color: #f6f6f6; } header{ border-top: solid 8px #6CC6C4; padding: 20px 170px; } .first{ border-radius: 6px 0px 0px 6px; } .last{ border-radius: 0 6px 6px 0; } img{ max-width: 100%; } .header-container ul{ display: flex; list-style: none; } header ul li a{ text-shadow: 1px 1px 2px #6CC6C4; padding: 17px 0 18px; display: block; width: 180px; text-align: center; border-left: solid 1px #99e1df; border-right: solid 1px #71c9c7; text-decoration: none; font-size: 13px; background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%); } .header-container-info{ text-align: right; float: right; } .time{ float: right; } .header-container{ position: relative; } .header-container li{ color: white; margin-top: 50px; } .title-ja{ display: block; color: white; height: 20px; line-height: 20px; text-align: center; font-weight: bold; font-size: 108%; } .title-en{ color: white; height: 15px; line-height: 15px; text-align: center; font-weight: bold; font-size: 77%; } a{ text-decoration: none; } .header-container p{ font-size: 10px; line-height: 18px; color: #515151; } .header-tel{ font-size: 26px; line-height: 46px; } .sunday{ color: #b22c00; } .time{ border: solid 1px #d6d6d6; width: 220px; text-align: center; position: absolute; right: 0px; } .contents-wrapper{ padding: 20px 170px; display: flex; justify-content: space-between; align-items: flex-start; } .contents{ width: 260px; border: solid 1px #6CC6C4; border-radius: 5px; } .menu-1-li a,.menu-2-li a{ font-size: 14px; line-height: 25px; color: #595959; font-weight: bold; text-decoration: none; display: block; padding: 8px; } .contents ul{ padding-left: 30px; } .contents li{ border-bottom: solid 1px #6CC6C4 ; list-style: none; padding-left:25px ; background: url(bgListIcon01.png) no-repeat 5px center; line-height: ; } .menu-2{ display: block; margin-top: 1px; } . border-b; margin-bottom: 30px; .contents .menu-1-li a:hover{ color:#aec24C; } .contents .menu-2-li a:hover{ color: #6cc6c4; } .menu-2-li ,.menu-1-li{ margin-bottom: 20px; padding-right: 10px; } .header span{ text-decoration: none; } .footer-address{ font-size: 13px; line-height: 23px; color: #515151; text-align: right; } .copyright{ font-size: 12px; line-height: 22px; color: #515151; text-align: center; border-top:solid 2px #6CC6C4; } .menu-1,.menu-2{ color:white; background-color: #6cc6c4; padding: 10px; background-image: linear-gradient(rgb(156,227,225) 0%,rgb(108,198,196) 100%); } footer{ padding: 20px 170px; margin-top: 140px; } .footer-list{ background-color: #6CC6C4; padding: 5px 0; border-radius: 5px; } .footer-list ul{ padding-left: 20px; display: flex; } .footer-list li{ color: white; padding-right: 40px; list-style: none; background: url(bgFooterIcon.png) 1px no-repeat; padding-left: 20px; } .footer-list a{ color: white; } .main dl dd{ border-bottom: 1px #CCCCCC dotted; padding: 10px 10px 10px 11em; font-size: 13px; line-height: 20px; color: #515151; } .main dl dt{ align-items: center; padding: 15px 0; float: left; width: 130px; font-size: 13px; color: #515151; line-height: 23px; font-weight: 700; } .inner{ background-color: #ffffff; padding: 30px; } .main{ width: 640px; padding: ; } .main .inner dl{ padding-top: 10px; } .new-info{ border-bottom: #6CC6C4 solid 3px; padding-bottom: 10px; } ```右側にある余白を消したい   ネットで調べた方法を試したのですが、右側の余白が消えません。本来なら上部の水色の線は画面の左から右まであります。教えていただけると幸いです。
回答1件
0
勘で回答しますが、以下で取り急ぎ解決できるかもしれません。
CSS
1body { 2 overflow-x: hidden; 3}
(根本の解決はソースコードやキャプチャ画像がないと難しく、的外れかもしれませんが..)
投稿2020/04/23 13:01
総合スコア4528
申し訳ございません、画像を載せれてなかったです。これからのせるのでもし見ていただけたら幸いです。
HTMLとCSSのソースコードもお願いします。
ごちゃごちゃですみません。一応のせたのですが、こんな感じで大丈夫でしょうか？
main {
width: 640px;
}
がはみ出てしまっているのではないか..と思います。
main {
width: 640px;
max-width: 100%;
}
というような記述を追記して様子をみてほしいです。
改善しているのであれば、似たような記述があるように見えるので1つずつ解決していく必要があると思います。
ありがとうございます。試してみます。
あなたの回答
tips
プレビュー
