Q&A
iPadAirは３つバージョンがあるのですが、どの世代のものでしょうか？
（参考：https://support.apple.com/ja-jp/HT201471#ipadair）
PCからの閲覧時に、左側に縦に並ぶインデックスを、
width800以下で表示をさせないようにしたいと思っています。
現在は、
JavaScript
1if (!navigator.userAgent.match(/(iPhone|Android)/)) { 2function A { } 3function B { } 4function C { } 5} 6function Header { } 7function Footer { }
となっていて、
iPhoneとAndroidからは
function A～Cまで（画面横に出るインデックス）は表示させず、
headerとfooterのみ表示させるようになっています。
これを、width800で区切りたくて、
JavaScript
1if (window.matchMedia('(max-width: 800px)').matches) { 2 } else if (window.matchMedia('(min-width:801px)').matches) { 3function A { } 4function B { } 5function C { } 6} 7function Header { } 8function Footer { }
としました。PCの画面リサイズでは反映が確認出来ましたが、
ipad miniでは、A～Cが出てきてしまいます。
どこが間違っているのでしょうか。
また、最後に
JavaScript
1 window.onload = switchByWidth; 2 window.onresize = switchByWidth;
をつけてみたのですが、リロードしないと反映されません。
ブラウザの幅を変えただけで反映するようにするにはどうしたらいいでしょうか。
すいません、
【消音/画面の向きをロック】のボタンが有りましたので、
そもそもAirではないですね。
iPad mini でした。
申し訳ありません。訂正致します。
回答ありがとうございます。もうひとつ確認させていただきたいのですが、
<meta name="viewport" content="width=device-width, initial-scale=1">
↑このようなタグを<head>内に入れていますか？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
というのが入っていました。
ありがとうございます。
一度、jsではなくCSSでの解決を試してみてください。回答書きます。
回答2件
0
実際の数値確認してみればわかるのでは？
「間違ってる」のではなく「デバイスに適合した処理になってない」だけかと思います。
全てのデバイスを確認した上で「iPadAirだけ」なら個別対応するしかありません。
投稿2020/02/28 02:15
総合スコア80850
0
ベストアンサー
ウィンドウの幅で要素の表示・非表示を切り替えたい場合はjsよりCSSで対応する方がシンプルに解決できるかもしれません。
いちいちウィンドウ幅を取得するコードを書く必要もないので手っ取り早いと思います。
以下のスタイルをCSSファイルの最下部に追加してみてください。
css
1@media screen and (max-width:800px) { 2 /* 非表示にしたい要素のクラスなどを指定 */ 3 .sample { 4 display: none; 5 } 6}
【追記】
#navに対してdisplay: none !important;が効かない状態とのこと。
おそらくjs側を修正する必要がありますがCSSで強引に表示を消すスタイルを書いておきます。
CSS
1@media screen and (max-width:800px) { 2 #nav, #nav *, .com, .snav { 3 display: none !important; 4 position: fixed !important; 5 top: -100% !important; 6 left: -100% !important; 7 z-index: -100 !important; 8 float: left !important; 9 } 10}
■意味
「#navのdisplayプロパティが変更できない」ということがわかったので、より広範囲にスタイルを強引に変更する方法を取りました。
行ったのは以下の２点。
0. #nav以外にもスタイルを当てる
0. displayプロパティ以外のプロパティで表示を消すスタイルを追加する
CSSの解説をすると、
#nav, #nav *, .com, .snav…スタイルを当てる要素（＝表示を消したい要素）
⇒ #nav：消したい要素（本当はこれだけ消したい）
⇒ #nav *：#navの中にある全ての要素（*はすべての要素を意味する）
⇒ .comと.snav：消したい要素の中の主要な要素
display: none !important;：要素を非表示にする（本当はこれだけ適用したい）
⇒ !importantというのは「他のスタイルの優先順位を無視してこのスタイルを最優先で適用する」という宣言。後から修正する際に混乱を招く恐れがあるため本来は使用を控えなければいけない。
それ以外のプロパティは調べてみてください。
投稿2020/02/28 05:28
編集2020/03/03 01:23総合スコア134
ありがとうございます。
``` html
<div class="left">
<div id="nav">
<script type="text/javascript">
snav();
</script>
<script type="text/javascript">
com();
</script>
</div>
</div>
```
というのを全て非表示にしたいのですが、
``` css
@media screen and (max-width:800px) {
.left .nav
.sample {
display: none;
}
}
```
ということでしょうか
追記
すいません、CSSで”left”を指定している箇所を見つけました。
@media screen and (max-width:800px) {
【ここ】
.sample {
display: none;
}
}
【ここ】の部分に、現在左側に表示されているインデックスのclass（leftやnav）が入るようにすればよろしいでしょうか。
「.sample」というのはサンプルで入れただけなので必要ありません。
また、指定するクラスは一番親の要素だけで良いので、
@media screen and (max-width:800px) {
.left {
display: none;
}
}
↑のように入力してください。
もし「left」というクラスがHTMLに複数ある場合はすべての「left」要素が消えてしまいます。
その時はIDの「nav」を指定してみてください。
@media screen and (max-width:800px) {
#nav {
display: none;
}
}
コピペして使用させて頂きました。
.left のclassがいくつもあったので、
最後に貼り付けましたが、反映されません。
.left a.1{～～}
.left a.2{～～}
.left a.3{～～}
の後にペースト致しました。
今回の質問内容から逸れますが、「.left a.1」というセレクタの書き方は間違っています。「1」というクラス名を指定してもスタイルは反映されません。
すこし確認したいのですが、
<div class="left">
<div id="nav">
<script type="text/javascript">
snav();
</script>
<script type="text/javascript">
com();
</script>
</div>
</div>
↑これを非表示にしたい、というのは、snav();とcom();を実行させたくない、という意味ですか？
ごめんなさい、1、2、3に関しては、本当は文字が入っています。
例として変えてしまったことで、わかりづらくしてしまったようで申し訳ありませんでした。
はい、そうです。
そうでしたか。勘違いしてしまってすみません。
質問内容は「800px以下の時に“インデックス”という要素を非表示にしたい」ということかと思ったのですが、そうではないんですね。
「800px以下の時にsnav();とcom();を実行しないようにしたい」が正確な質問内容でしょうか。
function resize() {
if (window.matchMedia('(max-width: 800px)').matches) {
console.log('800px以下なので実行しない');
} else if (window.matchMedia('(min-width:801px)').matches) {
console.log('function A,B,C を実行');
}
}
window.onload = resize;
window.onresize = resize;
掲示いただいたコードを元に↑のようなコードを試してみましたが特に問題なく動作しました。
恐らく他の部分に問題があるのだと思いますが情報が足りませんので、HTMLとjsコードをすべて質問内容に追記してください。
すいません、素人でして、このような質問を申し訳ありません。
インデックス、というのは、左側に、常に表示されている、メニューのようなもののことを言っておりました。
HTMLで確認をしたところ、left、が、それに該当すると感じました。
leftの中身は、snav();とcom();でしたので、同じ意味かと思ってしまいました。
実行しない、と非表示にする、との違いは何でしょうか。
「left」を非表示にしてもその中にあるコードは実行されます。
なぜなら表示・非表示は単純に見た目の話なので、中のコードには一切影響しないからです。
コードの内容がわからないので推測するしかないのですが、おそらくsnav();やcom();でメニューの要素（HTML）を生成しているのではないでしょうか。
つまり「left」そのものがメニューではなく、その中のコードで生成された何かしらの要素がyuukiさんが消したいメニューなのではないかなと考えております。
コード内容がわからないと推測するしかないので追記をお願いいたします。
HTML
<!--leftwrapper-->
<div class="left">
<div id="nav">
<script type="text/javascript">
snav();
</script>
<script type="text/javascript">
com();
</script>
</div>
</div>
<!--rightwrapper-->
JavaScript
function snav() {
$.ajax({
url: "/include/snav.html",
cache: false, //
async: false, //
success: function (html) {
document.write(html);
}
});
}
function com() {
$.ajax({
url: "/include/com.html",
cache: false, //
async: false, //
success: function (html) {
document.write(html);
}
});
}
すいません、これでおわかりになりますでしょうか…
ありがとうございます。
やはりsnav()とcom()で要素を追加しているようです。
snav.htmlやcom.htmlの中身はわかりますか？
その中身がおそらく非表示にしたいメニューの本体です。
わかります。
現在、会社を出てしまっているため、コードのコピーが出来ません。。。
因みに、実行しない、というのと、非表示と、どちらがオススメですか？
結論としてはCSSで表示・非表示の切り替えを行うことをおすすめします。
yuukiさんが実現したい動作は「ウィンドウ幅が広い時はメニューを表示、狭いときはメニューを非表示にしたい」ということですよね。
snav()が行っているのはhtml要素の追加です。これを実行すればメニューのhtml要素が追加されますし、狭いときには何も追加しない（＝何もしない）という動作になります。
例えばiPadを縦に持っているとき、幅は狭いのでsnav()は実行されずメニューは表示されません。次にiPadを横に回転すると、今度は幅が広がるのでsnav()が実行されてメニューが生成されます。
ここまでは理想的な動作ですよね。
ここでさらにもう一度iPadを縦に持ち直したとします。するとsnav()は実行されませんが、さっき横に持ったときにsnav()が実行されてメニューが生成されているので、縦に持っているのにメニューが表示されている状態になります。
iPadを縦に持っている、つまり幅が狭いのにメニューが表示されている状態は嬉しくないですよね。なので幅が狭いときは「何もしない」のではなく「メニューを削除する」という動作を追加する必要があります。
じゃあメニューを削除する処理を追加しよう、となると初めからiPadを縦に持っているときはそもそもメニューが存在しないはずだからまずはメニューが存在するかどうかを確認する処理を追加する必要があって……
と、なんだかややこしい話になってしまいます。嬉しくないですよね。
一方でCSSで表示・非表示の管理を行うとウィンドウの幅は自動で認識してくれるし、削除する必要はないし、いいことづくめです。
なのでCSSで非表示にすることをおすすめします。
ちょっと自分が最初に示したコードを見直したのですが、もう一度CSSのコードを試してもらってもいいですか？
以下のCSSです。
@media screen and (max-width:800px) {
#nav {
display: none !important;
}
}
動作が確認できるサンプルも用意しました↓
https://codepen.io/KimTom/pen/gOpWzOM
CSS自体は正常に動作するはずなので、これで試してもらってうまくいかない場合はコピペする場所が間違っているか、全角スペースなどのコードに入ってはいけない文字が入っているなどが原因なのかなと思います。
次に出社した際に結果をお知らせください。
ありがとうございます！
まさに理想としている答えです。
comの中身は
<div class="com">
<a class="bn1" href="/contact/">お問い合わせ</a>
<a class="bn2" href="/recruit/">採用情報</a>
<!--<p><a href="/product/shotaro/"><img src="/images/common/bn01.png"></a></p>-->
</div>
で、まさに消したい部分です。
snavも、同じようなもので、同様に、消したいものでした。
CSSのコードですが、
@media screen and (max-width:800px) {
#nav {
display: none !important;
}
}
というのは、
#nav {
width: 240px;
}
の直後に入れましたが、合ってますでしょうか。。。
上記のやり方ですと、消えませんでした。
入れる場所が間違っていそうですね…
こんにちは。ちょっと長丁場になってしまいましたね（笑）
確認いただきありがとうございました（お伺いしている限りコードを入れる場所は間違ってはなさそうです）。
一点ふと浮かんだのが、そもそもiPadの幅が本当に800px以下なのかどうか確認する必要があるのではないかと思いました。
https://codepen.io/KimTom/pen/gOpWzOM
↑にiPadからアクセスして、縦持ちと横持ちでそれぞれ「windowの幅」が何pxと表示されるか見ていただいてもよろしいですか？
本当に長くお付き合い頂いてありがとうございます。
まず、PCのブラウザの幅を狭めて表示されないか、という時点で躓いています…
幅を狭めても消えてくれません・・・
なるほど、それは新しい情報です。
自分が貼ったURL（codepen）のページではどうですか？ 狭めたらきちんと消えますか？
はい、消えます。
消え方もスムーズで、まさに理想としている形でした。
#nav {
width: 240px;
}
の直後に
@media screen and (max-width:800px) {
#nav {
display: none !important;
}
}
を入れたのみで、JavaScriptもhtmlもいじっていませんが、いじる必要がありますでしょうか
どこに直すべき点があるかを探る必要があるので、まず先にCSSに間違いがないが検証していきましょう。
少し回りくどいかもしれませんが、ひとつずつやってみましょう。まずは、
#nav {
width: 240px;
}
↑これを↓のようにしてメニューが（幅に関係なく）消えるかどうか試してください。
#nav {
width: 240px;
display: none !important;
}
新たな状態になりました。
一度消えますが、幅を狭くすると、再度出現します。
この【幅】というのが、デザインが変わる幅と同じなので、
どこか別の場所で、別の設定がされているようです。
大きく前進しました。一度幅を狭めてからもう一度広げた時はメニューは表示されたままですか？ それとも広げるとまた消えますか？
@media screen and (max-width: 768px){
CSS_for_SP;
}
このような記述を見つけました。
こちらが関係していそうです…
広げるとまた消えました
広げるとまた消えるんですね。ありがとうございます。
@media screen and (max-width: 768px){
CSS_for_SP;
}
↑これCSSの中ですか？ この記述が入っていたファイルの拡張子を教えてもらってもいいですか。
CSSです。
前後は
img{
vertical-align:bottom;
}
@media screen and (max-width: 768px){
CSS_for_SP;
}
@media (max-width: 1600px){
CSS_for_PC;
}
body, textarea { font-family: "メイリオ", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
input, select { font-family: "メイリオ", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
のような記載になっています。
「CSS_for_SP;」や「CSS_for_PC;」という記述は正しい書き方ではないので意味のないスタイルです。
（このサイトからコピペしましたか？ https://qiita.com/naoki_mochizuki/items/15ec57dd96c9203ae3f3）
一旦、以下の記述は削除してください（表示上はなにも変わらないとは思いますが）。
@media screen and (max-width: 768px){
CSS_for_SP;
}
@media (max-width: 1600px){
CSS_for_PC;
}
他に「@media」を使った記述はありますか？
CSSやjsのコードを全部貼り付けてもらうことは可能ですか？
問題をいくつも含んでいる可能性が高くなったので見たほうが早いかもしれません。
もし可能でしたら質問内容を編集して追加していただきたいのですが…
すいません、私は引き継いだもので、
前任者（もういません）が、どのページを参考に書き込んだかわからない次第です…すいません。
かなり膨大な量でして、一気に全部、というのはちょっと無理があるかもしれません。
順番に、という形でも大丈夫でしょうか…
CSSの中に、
@media print, screen and (min-width: 801px){
#mobile-bar {
display:none;
}
というのが有りました
JavaScriptの中にはありません。
CSSの中に
@media screen and (max-width:770px){
.spmenubtn {
display:block;
float:right;
background:url(../images/smenu.jpg) left top no-repeat;
background-size:100% 100%;
margin-top:0px;
width:50px;
height:50px;
position:relative;
z-index:99;
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {
opacity: 1;
left: -80px;
}
.flex-direction-nav .flex-next {
opacity: 1;
right: -80px;
}
}
を発見しました。
そういう事情でしたか…
コードありがとうございます。
今貼っていただいたコード中で、
height:50px;
position:relative;
z-index:99;
←ここ
@media screen and (max-width: 860px) {
「ここ」の位置に閉じカッコ（ } ）がないといけないのですがこれはコピペするときに抜けましたか？
それとも元のコードも同じ様に閉じカッコがない状態ですか？
すいません、ミスです。
｝がついています。
あ、ミスでしたか。そしたら関係なさそうですね。
恐らくですが、原因はjs内にあると思います。jsであとからスタイルを付与しているかもしれません。
理想的なのはそのコードを修正または削除することですが、該当のコードを見つけるのはこのコメントのやり取りで行うのは非常に大変です。
ですので根本的な解決にはならないかもしれませんが強引に非表示にする方法を試しましょう。
まずCSSです。以下のコードをCSSの【一番先頭】に追加してみてもらっていいですか。
@media screen and (max-width:800px) {
#nav, #nav *, .com, .snav {
display: none !important;
position: fixed !important;
top: -100% !important;
left: -100% !important;
z-index: -100 !important;
float: left !important;
}
}
これでダメならjs側で削除するコードをお伝えします。
出来ました！
簡単に解説をお願いしても宜しいでしょうか。
また、新たな改善点が出てきてしまいました。
leftなのですが、通常、画面をスクロールすると追尾するようになっています。
800を超えて、left表示状態、全幅が表示されない幅（900くらい）の際、
下に左右スクロールバーが出ます。
追尾機能が発動する前（最上部や最下部に上下スクロールバーがある状態）だと、
左右スクロールするとleftも一緒にスクロールされるのですが、
追尾中（中間地点に上下スクロールバーがある状態）ですと、leftが、画面端からスタートしてしまい、本文に被ってしまいます…
@media screen and (max-width:900px) {
.left {
display: none;
}
}
にしたところ、（900＝被らない幅）
表示はされなくなり、被らなくなりましたが、
追尾中でも、左右スクロールに準じてくれるなら表示をさせたいと思っています。
ひとまず解決してよかったです。
解説を回答に追記しました。
スクロールの件についてですがまた別の質問ですので新しく質問を立ててください。
スクリーンショットなどを貼り付ければ回答も得やすくなると思います。
長い時間、お手伝いを頂き、本当にありがとうございました。
ご丁寧に教えて頂けて、感謝致します。
勿論ベストアンサーにさせて頂きます。
これ以上無いご対応を、ありがとうございました。
あなたの回答
tips
プレビュー
