Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
模写の練習をしていたのですが、header部分ですでにズレが生じました。
お手本と同じようにやっても横にのっぺりしてしまったり、赤いボタンの位置が変わらなかったり、
よくわからない状態となってしまいました。
margin 0 autoと指定して、お手本ではmarginは全て0になっているのに、
自分のだとmargin 0 auto としても左右にmarginが出るのでのっぺりしてるのかと考えてます。
入力したHTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圧倒的に安い英会話スクール。英会話教室のリンゲージ</title> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/a0c9562080.js" crossorigin="anonymous"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <div class="header-ttl"> <h1>安いのにしっかり上達する英会教室・英会話リンゲージ</h1> </div> <div class="container"> <div class="header-logo logo"> <a href="https://www.linguage-school.jp/" target="_blunk"><img src="images/logo.png" alt="英会話のリンゲージ"></a> </div> <div class="header-tel-area pc only"> <a href="tel:0120965680">0120-965-680</a> <p class="header-tel-txt1">月13:00～22:00／火～金 7:00～22:00／土日 11:00～19:00</p> <p class="header-tel-txt2"> ※スクールにより受付時間が異なります。</p> </div></div></div> <a href="https://www.linguage-school.jp/entry/trial/" target="_blunk" class="header-contact btn-pink pc-only">まずは気軽に無料体験</a>
入力したCSS(SCSS)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
div {
display: block;
}
- {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: left;
font-size: 16px;
font-family: Arial,'Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
color: #222;
line-height: 1.5;
margin: 0;
}
header {
display: block;
height: 140px;
border-bottom: 2px solid red;
.header-ttl {
height: 20px;
background: #eee;
.header-ttl h1 { font-size: 14px; position: relative; }
}
.header-logo {
position: absolute;
top: 16px;
left: 0;
}
.header-logo a {
display: inline-block;
}
.header-tel-area {
float: right;
}
a {
outline: none;
}
.header-ttl h1 {
font-size: 14px;
margin: 0 auto;
position: relative;
max-width: 980px;
width: 92%;
}
.header-tel-area {
display: block;
margin-right: 20px;
position: absolute;
top: 12px;
right: 180px;
text-align: right;
width: 340px;
}
.container {
position: relative;
max-width: 980px;
width: 92%;
margin: 0 auto;
height: 0;
}
}
.header-tel-area a {
background: url(https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/tel-mark.png) no-repeat left 4px;
background-size: 35px 23px;
color: #888;
padding-left: 44px;
display: inline-block;
font-size: 30px;
line-height: 1;
letter-spacing: 1.2px;
text-decoration: none;
}
.header-tel-txt1, .header-tel-txt2 {
color: #888;
font-size: 12px;
display: block;
line-height: 1.2;
}
.header-contact {
border-radius: 4px;
display: block;
height: 40px;
line-height: 40px;
position: absolute;
top: 18px;
right: 0;
text-align: center;
width: 180px;
}
a.btn-pink {
background: #de264c;
box-shadow:0 4px 0 rgba(188,13,53,1);
color:#fff;
text-decoration: none;
}
見ずらいコードではありますが、もし原因についてわかる方がいましたら、
ご教授お願いいたします。
回答1件
0
diff
1 2<header> 3 <div class="header-ttl"> 4 <h1>安いのにしっかり上達する英会教室・英会話リンゲージ</h1> 5 </div> 6 <div class="container"> 7 <div class="header-logo logo"> 8 <a href="https://www.linguage-school.jp/" target="_blank"> 9 <img src="images/logo.png" alt="英会話のリンゲージ"> 10 </a> 11 </div> 12 13 <div class="header-tel-area pc only"> 14 <a href="tel:0120965680">0120-965-680</a> 15 <p class="header-tel-txt1">月13:00～22:00／火～金 7:00～22:00／土日 11:00～19:00</p> 16 <p class="header-tel-txt2"> ※スクールにより受付時間が異なります。</p> 17 </div> 18- </div> 19 <a href="https://www.linguage-school.jp/entry/trial/" target="_blunk" class="header-contact btn-pink pc-only"> 20 まずは気軽に無料体験 21 </a> 22+ </div> 23</header> 24
diff
1 2@charset "UTF-8"; 3 4- html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 5+ * { 6 margin: 0; 7 padding: 0; 8 border: 0; 9 font-size: 100%; 10 font: inherit; 11 vertical-align: baseline; 12} 13 14/* 省略 */ 15 16header { 17 display: block; 18- height: 140px; 19+ height: 104px; 20 border-bottom: 2px solid red; 21 position: relative; 22 23 /* 省略 */ 24} 25/* 省略 */ 26 27
投稿2020/01/05 03:51
編集2020/01/05 04:17
総合スコア10429
フルのコードはCodePenよりダウンロードしてください。
ダウンロードリンク
https://codepen.io/asuchi0819/pen/MWYrgzp.html
https://codepen.io/asuchi0819/pen/MWYrgzp.scss
あなたの回答
tips
プレビュー
