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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

917閲覧

ハンバーガメニューの✖印を隠れずに、表示させたい

free_teku

総合スコア103

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/09/24 08:38

編集2022/01/12 10:55

前提・実現したいこと

ハンバーガメニューの✖印が画像のように、隠れずに、表示させたい
liを中央揃えにしたい

2点です。よろしくお願いいたします。

発生している問題・エラーメッセージ

×しるしが右に寄ってしまう

humberger-menu ×印

追記
ハンバーガメニュー1

ハンバーガメニュー2

試したこと

1上記の画像のように、×印が半分隠れてしまうため
大きさが大きいと思い,
width.heightの大きさを変更→解決しない
buttonに余白を持たせようと思い、right: 20px;→解決しない。

検索で「×しるしが右に寄ってしまうHTML」などで検索→解決しない。
2.li,aタグにtext-aligen:center;やmargin0 auto;を書いたが、解決できずにいます

該当のソースコード

HTML

1 <header class="header"> 2 <div class="inner header-inner"> 3 <h1 class="header-ttl"> 4 <img class="img-logo" src="./image/Logo.png" alt=""> 5 <p class="logo-text">ユアコーディング</p> 6 </h1><!-- /.header-ttl --> 7 8 <nav class="nav" id="js-nav"> 9 <ul class="header-list"> 10 <li class="header-item"><a href="#feauture">特徴</a></li><!-- /.header-item --> 11 <li class="header-item"><a href="#price">価格</a></li><!-- /.header-item --> 12 <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item --> 13 </ul><!-- /.header-list --> 14 </nav><!-- /.nav --> 15 <div class="header-link cmn-link"> 16 <a id="js-hum" href="#contact-link">お問い合わせ</a> 17 </div><!-- /.cmn-link --> 18 19 <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する"> 20 <span class="line"></span ><span class="line"></span><span class="line"></span> 21 </button> 22 </div><!-- /.inner --> 23 </header><!-- /.header --> 24

CSS

1.header { 2 background-color: #FFFFFF; 3 height: 94px; 4 position: fixed; 5 top: 0; 6 z-index: 9999; 7 width: 100%; 8 -webkit-box-shadow: 0px 3px 6px #00000029; 9 box-shadow: 0px 3px 6px #00000029; 10} 11 12.header .header-inner { 13 max-width: 1022px; 14 margin: 0 auto; 15 padding: 0 20px; 16 display: -webkit-box; 17 display: -webkit-flex; 18 display: -ms-flexbox; 19 display: flex; 20 -webkit-box-align: center; 21 -webkit-align-items: center; 22 -ms-flex-align: center; 23 align-items: center; 24 -webkit-box-pack: justify; 25 -webkit-justify-content: space-between; 26 -ms-flex-pack: justify; 27 justify-content: space-between; 28 height: 100%; 29} 30 31.header .header-inner .header-ttl { 32 display: -webkit-box; 33 display: -webkit-flex; 34 display: -ms-flexbox; 35 display: flex; 36 -webkit-box-align: center; 37 -webkit-align-items: center; 38 -ms-flex-align: center; 39 align-items: center; 40} 41 42.header .header-inner .header-ttl .img-logo { 43 width: 55px; 44 height: 55px; 45} 46 47.header .header-inner .header-ttl .logo-text { 48 display: block; 49 font-size: 2.4rem; 50 font-weight: bold; 51 margin-left: 16px; 52} 53 54@media screen and (max-width: 1200px) { 55 .header .header-inner .nav._open { 56 position: fixed; 57 left: 0; 58 top: 0; 59 width: 100%; 60 background-color: #efefef; 61 opacity: 0.1; 62 padding-top: 145px; 63 z-index: 1; 64 opacity: 0; 65 visibility: hidden; 66 -webkit-transition: opacity 0.3s ease; 67 transition: opacity 0.3s ease; 68 opacity: 1; 69 visibility: visible; 70 transition: opacity 0.3s ease; 71 padding: 20px; 72 } 73} 74 75.header .header-inner .header-list { 76 display: -webkit-box; 77 display: -webkit-flex; 78 display: -ms-flexbox; 79 display: flex; 80 -webkit-box-pack: justify; 81 -webkit-justify-content: space-between; 82 -ms-flex-pack: justify; 83 justify-content: space-between; 84 -webkit-box-align: center; 85 -webkit-align-items: center; 86 -ms-flex-align: center; 87 align-items: center; 88} 89 90@media screen and (max-width: 1200px) { 91 .header .header-inner .header-list { 92 display: none; 93 } 94} 95 96.header .header-inner .header-list._active { 97 display: -webkit-box; 98 display: -webkit-flex; 99 display: -ms-flexbox; 100 display: flex; 101 -webkit-box-orient: vertical; 102 -webkit-box-direction: normal; 103 -webkit-flex-direction: column; 104 -ms-flex-direction: column; 105 flex-direction: column; 106 text-align: center; 107} 108 109.header .header-inner .header-list .header-item > a { 110 font-weight: bold; 111} 112 113.header .header-inner .header-list .header-item > a._active { 114 font-size: 3.0rem; 115 text-align: center; 116} 117 118.header .header-inner .header-list .header-item + .header-item { 119 padding-left: 46px; 120} 121 122.header .header-link { 123 width: 155px; 124 height: 37px; 125} 126 127@media screen and (max-width: 769px) { 128 .header .header-link { 129 display: none; 130 } 131} 132 133@media screen and (max-width: 1200px) { 134 .header .header-link { 135 display: none; 136 } 137} 138 139.header .header-link > a { 140 color: #fff; 141 font-size: 1.4rem; 142 text-align: center; 143} 144 145@media screen and (max-width: 1200px) { 146 .humburger { 147 display: block; 148 height: 80px; 149 width: 80px; 150 position: fixed; 151 top: 0%; 152 right: 20px; 153 /* /* position: fixed; 154 right: 20px; 155 z-index: 3; */ 156 /* width: 5%; 157 height: 5%; */ 158 /* border: 1px solid #333; 159 box-shadow: 0 0 2rem transparent; */ 160 z-index: 99; 161 } 162 .humburger._open { 163 right: 20px; 164 } 165} 166 167@media screen and (max-width: 1200px) and (max-width: 1200px) { 168 .humburger .line { 169 display: block; 170 height: 1px; 171 width: 50px; 172 background-color: #333; 173 position: absolute; 174 top: 50%; 175 left: calc(50% - 25px); 176 /* 左右中央 */ 177 -webkit-transition: .3s; 178 transition: .3s; 179 -webkit-transform-origin: center; 180 transform-origin: center; 181 /* 回転の軸を中央にする */ 182 } 183 .humburger .line:first-child { 184 top: calc(50% + 5px); 185 } 186 .humburger .line:nth-child(2) { 187 top: calc(50% + 10px); 188 bottom: 0; 189 margin: auto; 190 } 191 .humburger .line:last-child { 192 top: calc(50% + 15px); 193 } 194 .humburger .line._open:first-child { 195 display: block; 196 -webkit-transform: rotate(-45deg); 197 transform: rotate(-45deg); 198 color: #000; 199 } 200 .humburger .line._open:nth-child(2)._open { 201 opacity: 0; 202 } 203 .humburger .line._open:last-child { 204 -webkit-transform: rotate(45deg); 205 transform: rotate(45deg); 206 top: 50%; 207 color: #000; 208 } 209}

SCSS

1 2.humburger{ 3 4 @include mt{ 5 display: block; 6 height: 80px; 7 width: 80px; 8 position: fixed; 9 top: 0%; 10 right: 20px; 11 /* /* position: fixed; 12 right: 20px; 13 z-index: 3; */ 14 /* width: 5%; 15 height: 5%; */ 16 // border-radius: 50%; 17 /* border: 1px solid #333; 18 box-shadow: 0 0 2rem transparent; */ 19 z-index: 99; 20 &._open{ 21 right: 20px; 22 } 23 24 @include mt{ 25 .line { 26 display: block; 27 height: 1px; 28 width: 50px; 29 background-color: #333; 30 position: absolute; 31 top: 50%; 32 left: calc(50% - 25px); /* 左右中央 */ 33 //transform: translate(-50%,-50%); 34 transition: .3s; 35 transform-origin: center; /* 回転の軸を中央にする */ 36 37 &:first-child { 38 top: calc(50% + 5px); 39 } 40 &:nth-child(2) { 41 top: calc(50% + 10px); 42 bottom: 0; 43 margin: auto; 44 } 45 &:last-child { 46 47 top: calc(50% + 15px); 48 } 49 //js-open 50 &._open{ 51 &:first-child { 52 display: block; 53 transform: rotate(-45deg) ; 54 // transform-origin: left; 55 color: #000; 56 57 58 } 59 &:nth-child(2){ 60 &._open{ 61 opacity: 0; 62 } 63 } 64 65 &:last-child { 66 transform: rotate(45deg) ; 67 top: 50%; 68 // transform-origin: left; 69 color: #000; 70 } 71 } 72 } 73 } 74 } 75} 76 77

js

1/* humberger */ 2$(function(){ 3 $("#js-humburger","body", ".nav").on('click', function(){ 4 5 $(this).toggleClass("_open"); 6 $(".nav, .line").toggleClass("_open"); 7 $(".header-list, .header-item, .header-item a").toggleClass("_active"); 8 $("body").toggleClass("noscroll"); 9 $(".this").fadeToggle(300); 10 11 }); 12 13});

何卒よろしくお願いいたします。

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

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

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

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

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

Lhankor_Mhy

2021/09/24 09:40

JavaScript がないと再現できないんじゃないでしょうか。
free_teku

2021/09/24 13:09

お待たせしました。jsを記載しました。よろしくお願いいたします。
guest

回答1

0

transform: translate(-50%, -50%); で中央寄せしていますが、これで位置調整すると、回転させて✖にしたときの位置調整が面倒なことになります。

transform は使わずに、top bottom left 等で位置調整したほうがシンプルです。

css

1@media screen and (max-width: 1200px) and (max-width: 1200px) { 2 .humburger .line { 3 display: block; 4 height: 1px; 5 width: 50px; 6 background-color: #333; 7 position: absolute; 8 top: 50%; /* 上下中央 */ 9 left: calc(50% - 25px); /* 左右中央 */ 10 transition: .3s; 11 transform-origin: center; /* 回転の軸を中央にする */ 12 } 13 .humburger .line:first-child { 14 top: calc(50% - 15px); 15 } 16 .humburger .line:last-child { 17 top: calc(50% + 15px); 18 } 19 .humburger .line._open:first-child { 20 top: 50%; 21 transform: rotate(45deg); 22 } 23 .humburger .line._open:nth-child(2)._open { 24 opacity: 0; 25 } 26 .humburger .line._open:last-child { 27 transform: rotate(-45deg); 28 top: 50%; 29 } 30}

CodePenサンプル

投稿2021/09/24 13:46

編集2021/09/27 04:55
hatena19

総合スコア33620

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

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

free_teku

2021/09/27 00:31

遅くなりました。ご回答ありがとうございます。 以後、シンプルなハンバーガメニューを作れるようにtop.bottom.leftを使いながら、作ります 一点質問です。 添付したように、3本の幅が小さくなっています。 それぞれの線にtop:calc() の15pxを変更しました。R:線が非表示になってしまったからです。 恐れ入りますが、上記の画像の線の幅をもう少し広げるには、どこを調節すればよろしいでしょうか? top:calc()のpxを調節しましたが、あまりうまくいきませんでした。 また、✖印が斜めになってしまいます。こちらの原因についても教えていただけると幸いです。
hatena19

2021/09/27 04:58

> R:線が非表示になってしまったからです。 R:線 ってなんのことでしょう。 回答にサンプルのリンクを追加しましたが、それのどの辺がご希望にあわないのでしょうか。 また、どのようにしたいのでしょうか。
free_teku

2021/09/28 02:43

線はspanのことです。 span3本線の幅をもう少し広げたいです。一番は✖印が斜めになってしまっているので ✖印を斜めにせずにきちんと表示させたいです サンプルリンク追加はSCSS,CSSは更新しました。という意味です
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問