前提・実現したいこと
レスポンシブでタブレット、スマートフォンに対応する画面のヘッダーのボタンを画像ボタンに変えたいです。
発生している問題・エラーメッセージ
1000px以下のレスポンシブの対応する画面サイズになると通常のボタンが消え、切り替えたい画像のボタンも消えてしまいます。
該当のソースコード
HTML
1<header> 2 <div class="container"> 3 <div class="title"> 4 <div class="header-left"> 5 <img class="logo" src="isaralogo.png" alt="iSara"> 6 <p>バンコクのノマドエンジニア育成講座</p> 7 </div> 8 <div class="header-right"> 9 <div class="contactpc"> 10 <p>お問い合わせ / 資料請求はこちら</p> 11 </div> 12 <div class="contactsp" id="contactsp"> 13 14 <img src="form.png"> 15 <a href="#contactform">資料請求</a> 16 </div> 17 </div> 18 </div> 19 </div> 20 </header>
css
1* { 2 box-sizing: border-box; 3 text-rendering: optimizeLegibility; 4 -webkit-font-smoothing: antialiased; 5} 6 7a { 8 text-decoration: none; 9} 10 11img { 12 width: auto; 13 height: auto; 14 max-width: 100%; 15 max-height: 100%; 16} 17 18.container { 19 max-width: 1170px; 20 width: 100%; 21 padding: 0 15px; 22 margin: 0 auto; 23 text-align: center; 24} 25 26body { 27 margin: 0; 28 font-family: "Hiragino Kaku Gothic ProN"; 29 letter-spacing: 1.5px; 30} 31 32header { 33 z-index: 10; 34 background-color: #fff; 35 width: 100%; 36 height: 65px; 37 position: fixed; 38 top: 0; 39} 40 41.header-left { 42 float: left; 43} 44 45.header-right { 46 float: right; 47 margin-top: 15px; 48} 49 50.title { 51 width: 1170px; 52 max-width: calc(100% -20%); 53 margin: 0 auto; 54 position: relative; 55 padding: 20px 0; 56 height: 75px; 57} 58 59.logo { 60 display: inline-block; 61 width: 128px; 62 margin-top: -6px; 63 float: left; 64} 65 66.header-left p { 67 display: inline-block; 68 position: relative; 69 bottom: -10px; 70 font-size: 14px; 71 font-weight: 600; 72 margin-top: 5px; 73} 74 75.contactpc { 76 background-color: #da6b64; 77 border-radius: 25px; 78 position: absolute; 79 right: 0px; 80 top: 16px; 81 padding: 11px 40px; 82 color: white; 83 cursor: pointer; 84 font-size: 14px; 85 margin: 0; 86} 87 88.contactpc:hover { 89 background-color: #d84940; 90} 91 92.contactpc p { 93 margin: 0; 94 letter-spacing: 0; 95} 96 97.contactsp { 98 display: none; 99 text-align: center; 100 position: absolute; 101 right: 0px; 102 top: 0px; 103 padding: 9px 11px; 104 background-color: #da6b64; 105} 106 107.contactsp img { 108 width: 20px; 109 margin: auto; 110 display: block; 111 112 background-color: #da6b64; 113} 114 115.contactsp a { 116 text-decoration: none; 117 color: #fff;; 118 font-size: 12px; 119 margin: auto; 120} 121 122.contactsp a:hover { 123 text-decoration: underline; 124}
javascript
1@media(max-width: 1000px){ 2 .txtl { 3 font-size: 20px; 4 } 5 6 .txtm { 7 font-size: 16px; 8 } 9 10 .txts { 11 font-size: 12px; 12 } 13 14 .txtxs { 15 font-size: 10px; 16 } 17 18 .contactpc { 19 display: none; 20 } 21 22 .contactsp { 23 24 box-sizing: border-box; 25 display: block; 26 } 27 .contactsp img{ 28 width: 20px; 29 margin: auto; 30 } 31} 32
試したこと
1000pxを境にLAPTOPをdisplay:none; タブレット対応のCSSをdisplay:block; にしました
全体のbox-sizingをborder-boxにしました
両方ともに背景色、大きさともに指定しました
補足情報(FW/ツールのバージョンなど)
HTMLの上層部はこのように記述しました
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>iSara[イサラ]|バンコクのノマドエンジニア育成講座</title> 8 <meta name="description" content="iSara"> 9 <link rel="stylesheet" href="isara-1.css"> 10 <link rel="stylesheet" href="isara-responsive.css"> 11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 12 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 13 integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 14 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 15 integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 17</head>
使用しているエディタはVSCODEでchromeを使用しレスポンシブなどの確認をしています
回答1件
あなたの回答
tips
プレビュー