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

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

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

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

2回答

617閲覧

javaScriptでクラスを追加し、そのクラスが追加されたらcssでtransformを解除したいです!!

music

総合スコア13

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/10/19 06:33

編集2021/10/19 07:16

javaScriptでクラスを追加し、そのクラスが追加されたらcssでtransformを解除したいのですが、クラスの追加は適用されますが、cssのtransform: none; が適用されません。。。

transform: translateX(0); でもだめでした????

試しに.activeにdisplay: none; を指定したところ、そちらは適用されました。。

transformの使用方法が間違っているのでしょうか???
原因がわかる方はいらっしゃいますでしょうか。
よろしくお願い致します。。

HTML

1 <div class="mobile"> 2 <nav id="nav"> 3 <div class="hum"> 4 <div class="title"> 5 <p>店名</p> 6 </div> 7 <img id="open-btn" src="mobile-images/hum-menu.jpg" alt=""> 8 </div> 9 10 11 </nav> 12 13 <nav id="nav-active"> 14 <div class="hum-active"> 15 <img id="close-btn" src="mobile-images/hum-active.jpg" alt=""> 16 17 <img class="hum-logo" src="mobile-images/hum-logo.png" alt=""> 18 19 <ul> 20 <li><a id="nav-btn" href="#body">ホーム</a></li> 21 <li><a id="nav-btn" href="menu.html">お品書き</a></li> 22 <li><a id="nav-btn" href="interior.html">店内</a></li> 23 <li><a id="nav-btn" href="#about">店舗情報</a></li> 24 </ul> 25 26 <p>ご予約・お問い合わせ</p> 27 <p class="call-number">0858-71-1788</p> 28 </div> 29 </nav> 30 31 32 33 <div class="top-image"> 34 <!--<div class="top-logo"> 35 <img class="mobile-logo" src="mobile-images/mobile-logo.png" alt=""> 36 </div>--> 37 </div> 38 </div>

scss

1#nav{ 2 //display: none; 3 width: 100%; 4 height: 65px; 5 position: fixed; 6 // position: absolute; 7 z-index: 2; 8 // top: 0; 9 background-image: url(../mobile-images/mobile-header.jpg); 10 box-shadow: 0px 3px 6px rgba($color: #4A3A2A, $alpha: 1); 11 12 .hum{ 13 //display: none; 14 display: flex; 15 justify-content: space-between; 16 align-items: center; 17 line-height: 100%; 18 19 20 .title{ 21 @include font(20px); 22 margin: 0 auto; 23 } 24 25 img{ 26 width: 65px; 27 } 28 } 29 } 30 31 .passive{ 32 display: none; 33 } 34 35 36 37 #nav-active{ 38 //display: none; 39 width: 100%; 40 //height: 100vh; 41 position: fixed; 42 // position: absolute; 43 z-index: 10; 44 // top: 0; 45 transform: translateX(-50%); 46 transition: .1s; 47 48 49 .hum-active{ 50 height: 100vh; 51 //vh→画面のサイズに合わせる 52 background-color: rgba($color: #2E2E2E, $alpha: 0.8); 53 #close-btn{ 54 width: 65px; 55 position: absolute; 56 top: 0; 57 right: 0; 58 } 59 60 .hum-logo{ 61 display: block; 62 width: 279px; 63 margin: 0 auto; 64 padding-top: 15%; 65 } 66 67 ul{ 68 list-style: none; 69 @include font(24px); 70 letter-spacing: 00.05em; 71 padding: 0; 72 text-align: center; 73 74 li{ 75 padding-bottom: 15%; 76 77 a{ 78 text-decoration: none; 79 color: white 80 } 81 } 82 } 83 84 p{ 85 @include font(22px); 86 color: white; 87 text-align: center; 88 margin: 0; 89 } 90 91 .call-number{ 92 @include white(Hiragino Mincho ProN); 93 font-size: 34px; 94 } 95 } 96 } 97 98 .active{ 99 transform: none; 100 //display: none; 101 } 102 103 104 105 106 .top-image{ 107 margin: 0 auto; 108 max-width: 666px; //追加 109 width: 100%; //修正 110 height: 443px; 111 background-image: url(../mobile-images/mobile-index-top5.jpg); 112 background-repeat: no-repeat; 113 background-size: 666px; 114 background-position: top center; //追加 115 position: relative; 116 z-index: 1; 117 }

javascript

1const open_btn = document.getElementById('open-btn'); 2const close_btn = document.getElementById('close-btn'); 3const nav_btn = document.getElementById('nav-btn'); 4 5open_btn.addEventListener('click', e => { 6 e.preventDefault() 7 document.getElementById('nav').classList.add('passive') 8 document.getElementById("nav-active").classList.add("active") 9}); 10 11 12close_btn.addEventListener('click', e => { 13 e.preventDefault() 14 document.getElementById('nav').classList.remove('passive') 15 document.getElementById('nav-active').classList.remove('active') 16}); 17 18 19nav_btn.addEventListener('click', e => { 20 e.preventDefault() 21 document.getElementById('nav').classList.remove('passive') 22 document.getElementById('nav-active').classList.remove('active') 23});

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

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

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

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

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

guest

回答2

0

ベストアンサー

いろいろツッコミどころ満載ですが。

HTML
id="nav-btn" が複数ありますが、idは一つのドキュメントに一つしか存在できません。

JavaScript
nav_btnの定義部分がありません。
document.getElementById('nav')とありますが、HTMLには、id="nav"がないです。

動かないので、動作確認でませんが、そちらでは、

クラスの追加は適用されますが、

と動いているようなので、動いている前提で、関係部分だけ抜き出すと、

scss

1#nav-active{ 2 transform: translateX(-50%); 3} 4.active{ 5 transform: none; 6}

classよりidの方が詳細度が高いの上書きできてない状態ですね。

.active の詳細度をあげれば効くようになるでしょう。
例えば、

scss

1#nav-active{ 2 transform: translateX(-50%); 3} 4#nav-activ.active{ 5 transform: none; 6}

投稿2021/10/19 07:07

hatena19

総合スコア33620

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

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

music

2021/10/19 07:17

すみません、、勉強不足です。。 質問のコードもコピーミスで範囲を網羅出来ていなかったので、 修正致しました。
music

2021/10/19 07:26

なるほど、、、一つのタグの中での詳細度を理解できていませんでした。 とても勉強になります! ご丁寧にありがとうございました!
guest

0

詳細度のせいです‼️ .active より #nav-active のほうが詳細度が高いので、#nav-active 内の transform が .active内の trasform より優先されます⚠️

#nav-active.active にして詳細度を上げたり、!important を使うなどで対処してください❢

投稿2021/10/19 06:56

編集2021/10/19 07:05
int32_t

総合スコア20672

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

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

music

2021/10/19 07:23

ご回答ありがとうございます。 #nav-active.activeで適応できました!! ちなみに、#nav-active.activeと!importantでは、 どちらがオススメなのですか???
int32_t

2021/10/19 07:26

前者ですね。「詳細度」のリンク先にも書いてあるので読んでみてください。
music

2021/10/19 07:31

参考記事までご提示いただきありがとうございます! なるほど、横着しちゃダメってことですね! 基本的なルールを再度、勉強しようとおもいます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問