Q&A
なぜ、HTMLファイルはどちらも先頭部分が欠けているのでしょうか。特に、clinic.htmlのほうは、div2つ分行方不明なので、表示を再現できません。
clinichtml
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"> 6 <title>Dental Clinic</title> 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 <link rel="stylesheet" href="main.css"> 9 <link rel="stylesheet" href="resposive.css"> 10</head> 11<body> 12 <header> 13 <div class="container"> 14 <div class="header-left"> 15 <img src="https://haniwaman.com/sample/part3/template_08/common/images/siteTitle.png" alt="クリニックの画像"> 16 </div> 17 <div class="header-right" > 18 <p>”地域に根付いた歯科医院”デンタル クリニック</p> 19 <h4><i class="fa fa-phone" aria-hidden="true"></i>03-0000-0000</h4> 20 <p class="reception-time">予約受付時間 10:00~19:30 <span class="red">日祝</span> <span class="red">休診</span></p> 21 </div> 22 <div class="nav"> 23 <a class="first" href="./index.html">トップページ<br><span class="english">HOME</span></a> 24 <a href="./clinic.html">医院紹介<br><span class="english">CLINIC</span></a> 25 <a href="./service.html">診療案内<br><span class="english">SERVICE</span></a> 26 <a href="./staff.html">院長・スタッフ紹介<br><span class="english">STAFF</span></a> 27 <a class="last" href="./access.html">アクセス<br><span class="english">ACCESS</span></a> 28 </div> 29 <p style="font-size: 10px;"><a href="./index.html">トップページ</a>＞医院紹介</p> 30 </div> 31 </header> 32 <div class="main-wrapper"> 33 <div class="container"> 34 <div class="sideber"> 35 <div class="sideber-top"> 36 <h6>一般歯科</h6> 37 <a href="#"><i class="fas fa-caret-down"></i>虫歯治療</a> 38 <a href="#"><i class="fas fa-caret-down"></i>歯周病治療</a> 39 <a href="#"><i class="fas fa-caret-down"></i>入れ歯</a> 40 <a href="#"><i class="fas fa-caret-down"></i>予防歯科</a> 41 </div> 42 <div class="sideber-buttom"> 43 <h6>審美歯科</h6> 44 <a href="#"><i class="fas fa-caret-down"></i>ホワイトニング</a> 45 <a href="#"><i class="fas fa-caret-down"></i>オールセラミック</a> 46 <a href="#"><i class="fas fa-caret-down"></i>セラミックインレー</a> 47 <a href="#"><i class="fas fa-caret-down"></i>PMTC</a> 48 </div> 49 </div> 50 <div class="clinic"> 51 <h5>医院紹介</h5> 52 <div class="inner"> 53 <h6>診療コンセプト</h6> 54 <p><span class="care">予防の大切さを知ってもらう</span><br><br> 55 毎月行っている「こどもデンタル教室」では、お子さんたちに虫歯や口腔内の疾患の予防を指導しています。<br><br> 56 57 正しい歯磨きのやり方、しっかり噛むことでどのような効果があるのか、進行した虫歯の恐ろしさなど…大人の方にも是非聞いていただきたい内容です。<br><br> 58 59 お子さんたちは真剣に内容に取り組んでくれています。検診の際に歯の一本一本をチェックして、「お家で実践してくれている。保護者の方も協力してくださっているのだな」と成果を垣間見ることができます。<br><br> 60 61 こういった取り組みの始まりは、一時期のお子さんたちの虫歯の増加が発端になっています。<br><br> 62 63 医院に通ってくださるお子さんや、検診で伺った小学校の児童さんの歯の状態が非常によくなかったのです。原因は様々だと思いますが、正しく予防さえできればすぐに改善できるのはわかりました。皆さん、知らないだけなのです。<br><br> 64 65 以前は歯医者さんに対して「痛いことをされる怖いところ」だと思われていましたが、今では少し変わってきて「痛くならないようにしてくれるところ」だと思っていただけているみたいです。<br><br> 66 67 教室を始めて、顔を出してくださるお子さんは少しずつ増えてきました。今では翌月の予約がすぐに埋まってしまうようなありがたい状態です。<br><br> 68 69 一も二もなく、まずは予防することです。<br><br> 70 71 虫歯になっても削ってしまえば済むことでは？と思われる方も少なくありませんが、歯は大切な臓器です。減らしたり失ったりすることはよいことではありません。<br><br> 72 73 歯医者さんは、歯を大切にする方法を教えるところに変わっていくべきなのです。<br><br> 74 75 私たちは、予防するという医療を地域に根付かせていきたいと日々努力しています。</p> 76 <h6>休診日・診療案内</h6> 77 <table class="accept" border="1"> 78 <tr bgcolor="#D1D1D1"> 79 <th></th> 80 <th>月</th> 81 <th>火</th> 82 <th>水</th> 83 <th>木</th> 84 <th>金</th> 85 </tr> 86 <tr> 87 <td>午前</td> 88 <td class="none">・</td> 89 <td class="none">・</td> 90 <td class="none">・</td> 91 <td class="none">・</td> 92 <td class="none">・</td> 93 </tr> 94 <tr> 95 <td>午後</td> 96 <td class="none">・</td> 97 <td class="none">・</td> 98 <td>午後診療</td> 99 <td class="none">・</td> 100 <td class="none">・</td> 101 </tr> 102 </table> 103 <p><span class="name">休診日</span> 土日祝日・水曜日午後休診<br><br> 104 105 <span class="name">診療時間</span> 午前 9:00～13:00 / 午後 14:00～19:00 <br> 106 <br> 107 108 当院では、ご予約の患者さんを優先して診察しております。<br> 109 ご来院の際は、ぜひご予約をお願いいたします。<br><br> 110 111 ご予約はお電話で<br> 112 03-0000-0000</p> 113 </div> 114 </div> 115 </div> 116 </div> 117</body> 118</html> 119
css
1body { 2 background-color: #f1f0f0; 3 border-top: 8px solid #71C9C7; 4 margin: 0 auto; 5} 6 7* { 8 -webkit-box-sizing: border-box; 9 box-sizing: border-box; 10} 11 12header { 13 margin: 0 auto; 14 width: 920px; 15 display: -webkit-box; 16 display: -ms-flexbox; 17 display: flex; 18} 19 20.container { 21 padding: 0; 22 margin: 0 auto; 23} 24 25.header-left { 26 padding-top: 60px; 27 float: left; 28} 29 30.header-right { 31 padding-top: 40px; 32 float: right; 33} 34 35.header-right p { 36 font-size: 10px; 37} 38 39.fa-phone { 40 font-size: 20px; 41 padding-right: 8px; 42} 43 44.reception-time { 45 border: 1px solid gray; 46 text-align: center; 47 padding: 5px; 48} 49 50.red { 51 color: red; 52} 53 54.nav { 55 clear: both; 56 border-radius: 0.5em; 57 font-weight: bold; 58 margin-bottom: 30px; 59} 60 61.nav a { 62 background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4)); 63 background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%); 64 border-left: 1px solid #99E1DF; 65 border-right: 1px solid #71C9C7; 66 padding: 15px 0; 67 text-align: center; 68 color: white; 69 text-decoration: none; 70 width: 20%; 71 line-height: 20px; 72 font-size: 14px; 73} 74 75.nav a:hover { 76 background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc6c4), to(#9ce3e1)); 77 background-image: linear-gradient(#6cc6c4 0%, #9ce3e1 100%); 78 opacity: 0.7; 79} 80 81.first { 82 border-top-left-radius: 0.5em; 83 border-bottom-left-radius: 0.5em; 84} 85 86.last { 87 border-top-right-radius: 0.5em; 88 border-bottom-right-radius: 0.5em; 89} 90 91.english { 92 font-size: 12px; 93} 94 95.main-image { 96 max-width: 100%; 97 float: right; 98} 99 100.main-image img { 101 float: right; 102} 103 104.main-wrapper { 105 width: 920px; 106 margin: 0 auto; 107 text-align: left; 108} 109 110.sideber { 111 width: 260px; 112 margin-right: 20px; 113 position: relative; 114} 115 116.sideber-top { 117 width: 100%; 118 height: 250px; 119 margin-right: 20px; 120 border: 2px solid #71C9C7; 121 border-top-right-radius: 0.5em; 122 border-top-left-radius: 0.5em; 123 background-color: white; 124} 125 126.sideber-top h6 { 127 background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4)); 128 background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%); 129 padding: 15px 15px; 130 font-weight: bold; 131 color: white; 132 border-top-left-radius: 0.4em; 133 border-top-right-radius: 0.4em; 134} 135 136.sideber-top a { 137 display: block; 138 color: black; 139 text-decoration: none; 140 margin: 18px; 141 font-size: 14px; 142 font-weight: bold; 143 border-bottom: 1px solid #71C9C7; 144 padding-bottom: 5px; 145} 146 147.sideber-top a:hover { 148 color: #71C9C7; 149} 150 151.fa-caret-down { 152 padding-right: 5px; 153 font-size: 16px; 154 color: #71C9C7; 155} 156 157.sideber-buttom { 158 width: 100%; 159 height: 250px; 160 margin-top: 25px; 161 margin-right: 20px; 162 margin-bottom: 100px; 163 border: 2px solid #71C9C7; 164 border-top-right-radius: 0.5em; 165 border-top-left-radius: 0.5em; 166 background-color: white; 167} 168 169.sideber-buttom h6 { 170 background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4)); 171 background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%); 172 padding: 15px 15px; 173 font-weight: bold; 174 color: white; 175 border-top-left-radius: 0.4em; 176 border-top-right-radius: 0.4em; 177} 178 179.sideber-buttom a { 180 display: block; 181 color: black; 182 text-decoration: none; 183 margin: 18px; 184 font-size: 14px; 185 font-weight: bold; 186 border-bottom: 1px solid #71C9C7; 187 padding-bottom: 5px; 188} 189 190.sideber-buttom a:hover { 191 color: violet; 192} 193 194.date { 195 font-weight: bold; 196 padding-right: 30px; 197 white-space: nowrap; 198} 199 200 201.name { 202 font-weight: bold; 203} 204 205.inner { 206 margin: 0 20px; 207} 208 209.clinic { 210 width: 640px; 211 float: right; 212 background-color: white; 213 border: 2px solid #71C9C7; 214 border-radius: 0.5em; 215 -webkit-box-sizing: border-box; 216 box-sizing: border-box; 217} 218 219.clinic h5 { 220 font-weight: bold; 221 padding-top: 40px; 222 padding-bottom: 30px; 223 padding-left: 20px; 224 background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4)); 225 background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%); 226 color: white; 227 border-top-left-radius: 0.3em; 228 border-top-right-radius: 0.3em; 229} 230 231.clinic h6 { 232 margin: 30px 0px; 233 padding-bottom: 15px; 234 font-weight: bold; 235 border-bottom: 3px solid #71C9C7; 236} 237 238.clinic p { 239 margin: 30px 10px; 240 font-size: 13px; 241 line-height: 24px; 242} 243 244 245 246 247
医院紹介の部分を右上に持って行きたいです。
色々と調べたのですが、この部分だけどうしてもわかりません。
教えていただければ嬉しいです。よろしくお願いいたします。
。
CSSといいつつ、Sassのままの状態です。
回答2件
0
ベストアンサー
現在貼り付けられているCSSには、その前のSassのときにはなかった .nav のスタイルがあり、逆にSassのときにはあった footer のスタイルが消えていたり、といまいち状況がつかめませんが(何種類もあるのか?)。
CSS
1.sideber { 2 width: 260px; 3 margin-right: 20px; 4 position: relative; 5 float: left; 6}
現在のCSSを信じるのであれば、 .sideber に「float: left;」を追加すれば解決します。
ただこれ、Sassのときはすでに付いていたんですよね。なので、SassからCSSに変換すると、ナビゲーションのスタイルがないこと以外は、ちゃんと左右に並んでいた。
あと、直しませんでしたが「サイドバー」の綴りは、sidebarです。
投稿2020/06/19 06:52
編集2020/06/19 06:54総合スコア11990
ありがとうございます。
10000文字以内という制限があり、全てのコードを載せることができませんでした。申し訳ないです。
float:leftをするとトップページ以外は正しくなるのですが、トップページの部分でsideberが下に移動して今います。
また自分でいろいろと調べてみます。
お手数おかけして申し訳ありませんでした。ありがとうございました！
0
HTMLが欠けているせいか再現できないのですが、以下を試しに指定してみてください。
CSS
1.clinic { 2 /* 以下を追加 */ 3 box-sizing: border-box; 4}
もしくは
.clinic {
width: calc(640px - 2px - 2px; /* 横幅からborderの幅を差し引く */
}
.clinicの横幅が、640pxではなく、borderの幅が加算された「644px」になってしまっていることにより、改行しているのではないかと思われます。
投稿2020/06/18 14:33
編集2020/06/18 14:36
総合スコア4528
あなたの回答
tips
プレビュー
