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

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

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

iOS 9は、アップル社のモバイルOSであるiOSシリーズのバージョン。特徴として検索機能の強化、Siriの機能改良、iPad向けマルチタスクなどがあります。マルチウィンドウ機能をサポートし、iPad向けマルチタスクもサポートされています。

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

885閲覧

ドロワーメニューPCで表示されてスマホで表示されない件

chamaki40

総合スコア32

iOS 9

iOS 9は、アップル社のモバイルOSであるiOSシリーズのバージョン。特徴として検索機能の強化、Siriの機能改良、iPad向けマルチタスクなどがあります。マルチウィンドウ機能をサポートし、iPad向けマルチタスクもサポートされています。

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2018/08/24 07:49

編集2018/08/24 08:53

PCだけじゃなく、スマートフォンでもドロワーメニューを前面に表示させたい
スマートフォンで見るとリンクは反応していて文字が完全にコンテンツの後ろにいます
リンクは効くけど、背景色はグレーで文字が完全に隠れているという状態
今日中に知りたいのでどなたか教えてください

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

トップから出てくるドロワーメニュー http://git.blivesta.com/drawer/top/ 
このサイトからコードをダウンロードして自分が過去に作ったサイトのデータ(ヘッダー部分)に入れ込みました PCで見るとちゃんと動作しますが、スマートフォンではバックグラウンドのグレーの色しか出てきません →http://reality-star700.com/test/beginner.html

エラーメッセージ

該当のソースコード

<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport"> <meta name="keywords" content="セカンドライフ,デイトレード,アービトラージ,錬金術,投資"> <meta name="description" content="疑似体験プロジェクト、バイナリーオプション"> <link rel="SHORTCUT ICON" HREF=""> <title>セカンドライフ|投資マスターへの道</title> <!-- Include jQuery Library -->
<link rel="stylesheet" href="css/reset.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" /> <link href="css/sandbox.css" rel="stylesheet"> <link href="dist/css/drawer_2.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="dist/js/drawer.min.js" charset="utf-8"></script>
<script> $(document).ready(function() { $('.drawer').drawer(); }); </script> </head> <body class="drawer drawer--top drawer--navbarTopGutter"> <header class="drawer-navbar drawer-navbar--fixed" role="banner"> <div class="drawer-container"> <div class="drawer-navbar-header"> <a class="drawer-brand" href="./index.html">セカンドライフ</a> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> </div>
<nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-menu-item" href="index.html">トップ</a></li> <li><a class="drawer-menu-item" href="beginner.html">投資ビギナーの方へ</a></li> <li><a class="drawer-menu-item" href="#">スマホで稼げる?</a></li> <li class="drawer-dropdown"> <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false"> トークアプリを使った実用例<span class="drawer-caret"></span> </a> <ul class="drawer-dropdown-menu"> <li><a class="drawer-dropdown-menu-item" href="./navbar-top.html">投資のひとつです</a></li> <li><a class="drawer-dropdown-menu-item" href="./navbar-left.html">投資のひとつです</a></li> <li><a class="drawer-dropdown-menu-item" href="./navbar-right.html">投資のひとつです</a></li> </ul> </li> <li class="drawer-dropdown"> <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false"> 投資を勉強する前に <span class="drawer-caret"></span> </a> <ul class="drawer-dropdown-menu"> <li><a class="drawer-dropdown-menu-item" href="./fixed-navbar-top.html">決済ができます</a></li> <li><a class="drawer-dropdown-menu-item" href="./fixed-navbar-left.html">ウォレットを作成します</a></li> <li><a class="drawer-dropdown-menu-item" href="./fixed-navbar-right.html">高騰しています</a></li> </ul> </li> <li class="drawer-dropdown"> <a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false"> お問い合わせ <span class="drawer-caret"></span> </a> <ul class="drawer-dropdown-menu"> <li><a class="drawer-dropdown-menu-item" href="./sidebar-left.html">先物取引</a></li> <li><a class="drawer-dropdown-menu-item" href="./sidebar-right.html">FX</a></li> </ul> </li> </ul> </nav> </div>
</header> <main role="main"> <!-- Page content --> <div id="head_1"><img src="img/for_sitetop2.jpg" alt="サイトイメージ"></div> </main> <!-- メインコンテンツ --> <div id="container"> ※このcontainerに対してz-indexを指定しましたが無反応でした <div id="left">

~以下、省略~

【CSS】

/*!

*/

.drawer-open{overflow:hidden!important}
.drawer-nav{
position:fixed;
z-index:4;
top:0;
overflow:hidden;
width:16.25rem;
height:100%;
color:#222;
background-color:#fff;
opacity: 0.7;
transition: opacity .2s ease-out;
}

#container {
max-width:1100px;
min-height: 100%;
height: auto;
position: relative;
z-index: 0 !important;
margin:0 auto;
background:#fff;
min-height: calc(100vh - 70px);
overflow:auto;

}

.drawer-brand{
font-size:1.5rem;
font-weight:700;
line-height:3.75rem;
display:block;
padding-right:.75rem;
padding-left:.75rem;
text-decoration:none;
color:#222
}

.drawer-menu{
margin:0;padding:0;
list-style:none;
}

.drawer-menu-item{
font-size:1rem;
display:block;
padding:.75rem;
text-decoration:none;
color:#222
}

.drawer-menu-item:hover
{
text-decoration:underline;
color:#555;background-color:transparent
}

.drawer-overlay
{
position:fixed;
z-index:2;
top:0;
left:0;
display:none;
width:100%;
height:100%;
background-color:
rgba(0,0,0,.2)
}

.drawer-open .drawer-overlay{
display:block
}

.drawer--top .drawer-nav{
top:-100%;
left:0;
width:100%;
height:auto;
max-height:100%;
-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);
transition:top .6s cubic-bezier(.19,1,.22,1)
}

.drawer--top.drawer-open
.drawer-nav{top:0}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open
.drawer-hamburger{right:0}.drawer--left .drawer-nav
{
left:-16.25rem;
-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);
transition:left .6s cubic-bezier(.19,1,.22,1)
}

.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger
{left:0}

.drawer--left.drawer-open .drawer-hamburger{left:16.25rem}
.drawer--right .drawer-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}.drawer--right
.drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger
{right:0}
.drawer--right.drawer-open .drawer-hamburger{right:16.25rem}
.drawer-hamburger{position:fixed;
z-index:3;
top:0;
display:block;
box-sizing:content-box;
width:2rem;
padding:0;
padding:18px .75rem 30px;
-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
transition:all .6s cubic-bezier(.19,1,.22,1);
-webkit-transform:translateZ(0);
transform:translateZ(0);border:0;
outline:0;background-color:transparent}

.drawer-hamburger:hover{
cursor:pointer;
background-color:
transparent
}

.drawer-hamburger-icon{
position:relative;
display:block;
margin-top:10px
}

.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
width:100%;
height:2px;
-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
transition:all .6s cubic-bezier(.19,1,.22,1);
background-color:#222}

.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
position:absolute;
top:-10px;left:0;content:" "}

.drawer-hamburger-icon:after{top:10px}
.drawer-open .drawer-hamburger-icon{
background-color:transparent
}

~以下、省略~

イメージ説明

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

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

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

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

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

liveasnotes

2018/08/24 08:15

htmlはインデントを整え,利用したcssも添えてください.また,「背景色が出てくる」という状況がよく分からないので,スクショを添えてください
chamaki40

2018/08/24 09:01

ご質問ありがとうございます 編集しました スクリーンショットはちょうど下に伸びている状態のものです 文字が見えないですがクリックはできます
liveasnotes

2018/08/24 14:56 編集

リンクがクリックできるということは,コンテンツよりも前面に出ているということだと思うので,ちょっと原因がつかめないですね...(CSSにもopacity:0;やpointer-events:none;は見当たらないですし...)手元にiOS端末がないので,一度そちらで,リンクボタンにbackground:skyblue;とかbackground:palegreen;とか指定して,ボタンが本当にそこにあるのか確かめてみてもらえますか?
guest

回答1

0

自己解決

スタイルシートの中に前のサイトのheaderのソースがあり、もう一つのドロワーメニュー のheaderと重なっていた為、修正しました

元のheaderの指示でoverflowのhiddenがPC側でもドロップダウンの部分が隠れて、スマホでも文字が見えなくなっていた原因でした

問い合わせ頂いた方、ありがとうございます まだ作り途中なので他にも質問させて頂かと思います

投稿2018/08/25 09:43

chamaki40

総合スコア32

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問