Q&A
前提・実現したいこと
ヘッダーについて
①headerの「buger-btn」を非表示にしたい
②headerをうまく両端いっぱいに広げたい（理想をあとでイメージに添付します）
おそらく②の現象は、①がうまく非表示になれば自動的にできるのではと推測している。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 <link rel="stylesheet" href="css/responsive.css"> 10 <title>模写テイク2</title> 11</head> 12 13<body> 14 <header class="header"> 15 16 <h1 class="site-title"><a href="./">クリ★スタ</a></h1> 17 <!-- <a href="#" class="header-title">クリ★スタ</a>--> 18 <div class="nav-wrapper"> 19 <nav class="header-nav"> 20 <ul class="nav-list"> 21 <!-- href のなかの書き方--> 22 <li class="nav-item"><a href="#about">About</a></li> 23 <li class="nav-item"><a href="#blog">Service</a></li> 24 <li class="nav-item"><a href="#access">Contents</a></li> 25 </ul> 26 </nav> 27 28 </div> 29 <!-- 全然かけなかったボタン--> 30 <button class="buger-btn"> 31 <span class="fa-bars"> 32 <span class="bar bar-top"></span> 33 <span class="bar bar-mid"></span> 34 <span class="bar bar-button"></span> 35 </span> 36 </button> 37 </header> 38 <main> 39 <div class="main-visial"> 40 <h1 class="kv-copy">Cresta.design</h1> 41 </div> 42 43 44 45 <!-- アバウト--> 46 <section class="about section-wrapper"> 47 <h2 class="section-title">About</h2> 48 <h3 class="sub-title">ミニマルで<br>洗練されたデザインを。</h3> 49 <p class="section-text">近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p> 50 </section> 51 52 <!-- サービス--> 53 <section class="service wrapper"> 54 <h2 class="section-title">Service</h2> 55 <div class="content-wrapper"> 56 <div class="content-item"> 57 <div class="content-img"><img src="img/service-image@2x.jpg" alt="一眼レフ"></div> 58 <div class="content-text-section"> 59 <h3 class="content-title sub-title">リリース時のサポートで<br>サービスのブランディングを</h3> 60 <p class="content-text">弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p> 61 </div> 62 </div> 63 <div class="content-item reversi"> 64 <div class="content-img"><img src="img/service-image02@2x.jpg" alt="アイフォン"></div> 65 <div class="content-text-section"> 66 <h3 class="content-title sub-title">リリース後のサポートで<br>効果を最大化させる</h3> 67 <p class="content-text">弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p> 68 </div> 69 </div> 70 </div> 71 </section> 72 <!--ニュース--> 73 <section class="news section-wrapper"> 74 <h2 class="section-title">Contents</h2> 75 <div class="news-list"> 76 <div class="news-card"> 77 <div class="news-img"><img class="card-img" src="img/card-image1@2x.jpg" alt="アイフォン"></div> 78 <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 79 </div> 80 <div class="news-card"> 81 <div class="news-img"><img class="card-img" src="img/card-image2@2x.jpg" alt="アイフォン"></div> 82 <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 83 </div> 84 <div class="news-card"> 85 <div class="news-img"><img class="card-img" src="img/card-image3@2x.jpg" alt="アイフォン"></div> 86 <p class="news-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 87 </div> 88 </div> 89 </section> 90 <!-- お問い合わせ--> 91 92 <div class="contact section-wrapper"> 93 <h2 class="contact-title">お問い合わせ</h2> 94 <ul class="contact-list"> 95 <li class="contact-form mei"> 96 <p>担当者名</p><input type="text"> 97 </li> 98 <li class="contact-form tel"> 99 <p>電話番号</p><input type="tel"> 100 </li> 101 <li class="contact-form mail"> 102 <p>メールアドレス</p><input type="email"> 103 </li> 104 <li class="contact-form mail"> 105 <p>お問い合わせ内容</p><textarea></textarea> 106 </li> 107 </ul> 108 <input class="btn" type="submit" value="送信"> 109 </div> 110 </main> 111 <footer> 112 <small> ©︎crest.design all rights reserved</small> 113 114 </footer> 115</body> 116 117</html> 118
該当のソースコード
CSS
1@charset "UTF-8"; 2/*ヘッダーフッター送信ボタン*/ 3/*ニュースの枠線など*/ 4/*共通レイアウト*/ 5/*html { 6 font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif; 7 font-size: 0.8rem; 8 /*letter-spacing: 30px;*/ 9/* color: $text-black;*/ 10html { 11 font-size: 62.5%; 12 /*フォントサイズを簡潔に計算しやすくするため*/ 13} 14html body { 15 color: #141414; 16 font-size: 1.4rem; 17 line-height: 1.8; 18 letter-spacing: 0.05em; 19 /*変換表でXDの「0.7px」を変換した0.043の四捨五入*/ 20 /*和文フォントの目安高さ*/ 21 /* .wrapper { 22 margin: 0 auto; 23 padding: 0 10% 20px; 24 text-align: center; 25 }*/ 26} 27html body img { 28 max-width: 100%; 29 vertical-align: bottom; 30} 31html body a { 32 text-decoration: none; 33 color: #FFFFFF; 34} 35html body .section-title { 36 font-size: 3.6rem; 37 font-weight: bold; 38 margin-top: 150px; 39 margin-bottom: 70px; 40 letter-spacing: 0.05em; 41 /*（文字間「1.8」÷フォントサイズ「36px」）=0.05em*/ 42 text-align: center; 43 /*まん中に寄せる*/ 44} 45html body h3 { 46 font-weight: bold; 47 letter-spacing: 0.1em; 48 /*文字間「2.4」÷フォントサイズ「24」=0.1em*/ 49 margin-bottom: 40px; 50} 51html body .section-wrapper { 52 padding: 100px 10% 50px; 53} 54 55/*ヘッダー*/ 56header { 57 background-color: #1B1310; 58 border-bottom: 1px solid #FFFFFF; 59 line-height: 74px; 60 display: flex; 61 justify-content: space-between; 62 align-items: center; 63 padding: 0 120px; 64} 65header .nav-list { 66 display: flex; 67} 68header .nav-list .nav-item { 69 margin-right: 55px; 70} 71header .nav-list .nav-item:last-of-type { 72 padding-right: 0; 73} 74header .burger-btn { 75 display: none; 76} 77 78/*メインビジュアル*/ 79.main-visial { 80 background-image: url(../img/fv-bgi@2x.jpg); 81 background-size: cover; 82 bgposition: center; 83 padding: 300px 0; 84} 85.main-visial .kv-copy { 86 color: #FFFFFF; 87 font-size: 20px; 88 border: 2px solid #FFFFFF; 89 text-align: center; 90} 91 92/*アバウト*/ 93.about { 94 text-align: left; 95 display: inline-block; 96} 97.about .sub-title { 98 font-size: 24px; 99 font-weight: bold; 100} 101 102/*サービス*/ 103.service .content-title { 104 font-weight: bold; 105 text-align: left; 106} 107.service .content-wrapper .content-item { 108 display: flex; 109} 110.service .content-wrapper .content-item .content-img { 111 width: 480px; 112 margin-bottom: 67px; 113} 114.service .content-wrapper .content-item .content-img:last-of-type { 115 margin-bottom: 0; 116} 117.service .content-wrapper .content-item .content-text { 118 width: 480px; 119 text-align: left; 120} 121/*ニュース*/ 122.news .news-list { 123 display: flex; 124 justify-content: center; 125} 126.news .news-list .news-card { 127 box-shadow: 0 0 6px #1B131066; 128 width: 320px; 129 margin-right: 35px; 130} 131.news .news-list .news-card .news-text { 132 width: 255px; 133 text-align: center; 134 line-height: 25px; 135 margin: 25px auto; 136} 137.news .news-list .news-card:last-of-type { 138 padding-right: 0; 139} 140 141/*お問い合わせ*/ 142.contact { 143 /*display: inline-block;*/ 144 max-width: 700px; 145 /*フォームのマックスの長さ*/ 146 margin: 0 auto; 147 /*ボタン*/ 148} 149.contact .contact-title { 150 font-size: 24px; 151 font-weight: bold; 152 margin-top: 150px; 153 margin-bottom: 72px; 154} 155.contact .contact-form { 156 width: 700px; 157} 158.contact .contact-form p { 159 text-align: left; 160} 161.contact .btn { 162 background-color: #1B1310; 163 color: #FFFFFF; 164 font-size: 2rem; 165 /*フォントサイズはrem*/ 166 /*border-radius: 51px;*/ 167 border-radius: 30px; 168 font-weight: bold; 169 /*フォント太く*/ 170 /* margin: 50px;*/ 171 width: 235px; 172 /*ボタンの幅をつくる*/ 173 box-shadow: 0px 0px 6px #1B1310; 174 /*ボタンのうっすらとしたかげ*/ 175 padding: 20px 97px; 176 /*なんとなく数値が近いのはわかるけどなぜ20*/ 177} 178 179/*フッター*/ 180footer { 181 background-color: #1B1310; 182 /*padding: 29px auto;*/ 183 height: 80px; 184 /*フッターの高さをつくる*/ 185} 186footer small { 187 color: #FFFFFF; 188 display: block; 189 /*インラインじゃなくてブロック*/ 190 text-align: center; 191 /*line-height: 30px;*/ 192 /*font-size: 14px;*/ 193 padding-top: 30px; 194 /*上に余白を作ることでまんなかになる*/ 195} 196 197/**/
試したこと
解答と見比べて同じようにやってみたつもりですが、それでもうまくいかないようです。
補足情報（FW/ツールのバージョンなど）
OS:Windows
エディタ:Brackets
ブラウザ:クローム
イメージ
回答1件
0
ベストアンサー
①headerの「buger-btn」を非表示にしたい
HTML <button class="buger-btn">
CSS header .burger-btn
クラス名とセレクタがあってません。
②headerをうまく両端いっぱいに広げたい（理想をあとでイメージに添付します）
css
1header .nav-list .nav-item { 2 margin-right: 55px; 3}
上記のコードだと、margin-right分だけ、nav-itemが左に寄りますので、下記の方がいいかと思います。
css
1header .nav-list .nav-item + .nav-item { 2 margin-left: 55px; 3}
投稿2021/02/08 03:18
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/08 04:26