##質問内容
以下のサイトの模写コーディングに挑戦しているのですが、
<p>バンコクのノマドエンジニア育成講座</p>
部分のポジションが見本に比べ下方に配置してしまっているのと、font-sizeが打ち消されている原因がわかりません。
Googleのデペロッパツールと見比べながら修正をしてみたのですが、原因がわからず自分一人では解決できなかったので質問してみました。
模写サイト
https://isara.life/
リセットCSS
http://html5doctor.com/html-5-reset-stylesheet/
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Isara head</title> 7 <meta name="Author" content="" /> 8 <link rel="stylesheet" href="doctor_css_reset.css"> 9 <link rel="stylesheet" href="isara_head.css"> 10</head> 11 12<body> 13 <section class="head"> 14 <div class="head_in"> 15 <header class="bar"> 16 <div class="logo"> 17 <img src="https://isara.life/wp-content/themes/isara_v2/img/isaralogo.png" alt=""> 18 </div> 19 <div class="subtitle txtxs"> 20 <p>バンコクのノマドエンジニア育成講座</p> 21 </div> 22 <div class="headcontact"> 23 <div class="contactsp"> 24 <p class="txtxs">お問い合わせ / 資料請求はこちら</p> 25 </div> 26 <div class="contactpc"></div> 27 </div> 28 </header> 29 </div> 30 </section> 31 <div class="box"> 32 </div> 33</body> 34</html>
CSS
1* { 2 box-sizing: border-box; 3} 4 5.head { 6 position: fixed; 7 z-index: 10; 8 width: 100%; 9 background: #fff; 10} 11 12.bar { 13 padding: 20px 0; 14 height: 75px; 15 width: 1170px; 16 max-width: calc(100% - 20px); 17 margin: 0 auto; 18 position: relative; 19} 20 21.logo img { 22 width: 128px; 23} 24 25.bar .logo, 26.subtitle { 27 display: inline-block; 28} 29 30.logo { 31 margin-top: -6px; 32} 33 34img { 35 width: auto; 36 height: auto; 37 max-width: 100%; 38 max-height: 100%; 39} 40 41.subtitle { 42 position: relative; 43 bottom: -10px; 44 font-weight: 600; 45} 46 47.txtxs { 48 font-size: :14px; 49} 50 51.bar .contactsp { 52 cursor: pointer; 53 position: absolute; 54 background: rgb(216, 73, 64); 55 color: #ffffff; 56 border-radius: 25px; 57 right: 0px; 58 top: 16px; 59 padding: 11px 40px; 60} 61 62.box { 63 background-color: blueviolet; 64 height: 3000px; 65} 66
回答1件
あなたの回答
tips
プレビュー