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

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

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

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

CSS

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

Q&A

解決済

1回答

1161閲覧

@media screenについて以下のコードが何を示しているのか分かりません。

kawausomaru

総合スコア29

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/05/23 06:27

ハンバーガーメニューを実装したいと思いコードを調べていたのですが

@media only screen and (min-width:481px) and (max-width:896px),only screen and (max-width:480px){

これが何を示しているのか確信がありません。

最小481~最大896,最大480

このあとにコードが2パターン書かれていたなら枝分かれかなと思ったのですが
1パターンだけなので何で最大896という記述だけじゃダメなのか疑問に感じています。
どなたか分かる方ご回答よろしくお願いします。

ちなみに後に続くコードです。

/* ハンバーガーボタンコード始まり*/ @media only screen and (min-width:481px) and (max-width:896px),only screen and (max-width:480px){ .l--header--button{ position:relative; display:inline-block; text-decoration:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; background-color:transparent; cursor:pointer; z-index:1000 } .l--header .p--hamburger{ position:absolute; top:0; right:1.6rem; width:41px; height:41px; margin:auto; border-radius:50%; border:1px solid #fcfcfc; outline:none; box-shadow:0 0 2rem transparent; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; cursor:pointer;z-index:1000 } .l--header .p--hamburger:hover,.l--header .p--hamburger:focus{ box-shadow:0 0 0.5rem rgba(255, 255, 255, .5) } .l--header .p--hamburger__line{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:18px; height:2px; background-color:#fcfcfc; -webkit-transition:inherit; transition:inherit } .l--header .p--hamburger__line:before,.l--header .p--hamburger__line:after{ position:absolute; display:block; width:100%; height:100%; background-color:inherit; content:''; -webkit-transition:inherit; transition:inherit } .l--header .p--hamburger__line:before{ top:-5px } .l--header .p--hamburger__line:after{ top:5px } .l--header .p--hamburger[aria-expanded="true"] .p--hamburger__line{ background-color:transparent } .l--header .p--hamburger[aria-expanded="true"] .p--hamburger__line:before,.l--header .p--hamburger[aria-expanded="true"] .p--hamburger__line:after{ top:0; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); background-color:#fcfcfc } .l--header .p--hamburger[aria-expanded="true"].p--hamburger__line:before{ top:0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg) } .l--header .u--visuallyHidden{ position:absolute; white-space:nowrap; width:1px; height:1px; overflow:hidden; border:0; padding:0; clip:rect(0 0 0 0); clip-path:inset(50%); margin:-1px } /*ハンバーガーボタンコード終わり*/ .l--header .gnav{ background:rgba(0, 0, 0, .8); display:none; height:100%; position:fixed; width:100%; z-index:980; top:0; left:0 } .l--header .gnav__wrap{ align-items:center; display:flex; height:100%; justify-content:center; position:absolute; width:100%; z-index:980 } .l--header .gnav__menu__item{ font-size:2.4rem; margin:1.6rem 0 } .l--header .gnav__menu__item:hover{ -webkit-transform:scale(1.1); transform:scale(1.1); transition:1s } .l--header .gnav__menu__item a{ color:#fcfcfc; } } .l--header.transform{ background-color:rgba(0, 0, 0, .8); transition:1s } .l--header.transform__item:last-of-type a:hover{ color:#333 } }

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

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

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

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

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

guest

回答1

0

ベストアンサー

おそらく、元になったソースをコンパイルした加減で、2つの条件があったのを統合したとか、そういうことかと思います。

なお、現実にはあまり気にしなくていいかも知れませんが、何かの拍子に幅が480.5pxとなってしまうと、どちらも適用されなくなりますので、それを狙ってやっているのでもなければ素直にmax-width:896pxだけで書くほうが適切です。

投稿2020/05/23 06:33

maisumakun

総合スコア145123

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

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

kawausomaru

2020/05/23 06:40

@media only screen and (max-width:896px){ } これで問題なく動きました。 回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問