質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1759閲覧

ヘッダー部分 ①要素を非表示にしたい ②うまく両端いっぱいに広げたい

mitrasi

総合スコア49

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/02/08 02:38

前提・実現したいこと

ヘッダーについて
①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
ブラウザ:クローム

イメージ

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mitrasi

2021/02/08 04:26

ご回答ありがとうございます! コード上はおかしくないはずなので誤字かとは思っていましたが、どれほど確認しても気づけなかったので大変助かります????ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問