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

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

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

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

Q&A

1回答

1503閲覧

overlayの追加する場所がわからない

MIYABITSUJIMOTO

総合スコア19

HTML5

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

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/06/08 13:28

drawer.jsを使ってドロワーメニューを作っています。
drawer-overlayを指定して、メニューが開いた時に
コンテンツにうっすら色をつけたいです。
そのoverlayをhtmlのどこに指定すればいいのかわかりません。
いろんな所につけてみましたらエラーが出たりで。
検索してみても、コンテンツのところにつける
という表示があるだけでいまいちどこか
わかりませんでした。
下が実際のコードです。
ご教授頂ければと思います。お願いいたします。

html

1<!DOCTYPE html> 2<html> 3<head> 4<!-- drawer.css --> 5<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css"> 6<!-- jquery & iScroll --> 7<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 8<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script> 9<!-- drawer.js --> 10<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script> 11 12</head> 13<body class="drawer drawer--left"> 14 <header role="banner"> 15 <!-- ハンバーガーボタン --> 16 <button type="button" class="drawer-toggle drawer-hamburger"> 17 <span class="sr-only">toggle navigation</span> 18 <span class="drawer-hamburger-icon"></span> 19 </button> 20 <!-- ナビゲーションの中身 --> 21 <nav class="drawer-nav" role="navigation"> 22 <ul class="drawer-menu"> 23 <li><a class="drawer-brand" href="#">Brand</a></li> 24 <li><a class="drawer-menu-item" href="#">Nav1</a></li> 25 <li><a class="drawer-menu-item" href="#">Nav2</a></li> 26 </ul> 27 </nav> 28 </header> 29 <main role="main"> 30 <!-- Page content --> 31 </main> 32 33 <!-- ドロワーメニューの利用宣言 --> 34 <script> 35 $(document).ready(function() { 36 $('.drawer').drawer(); 37 }); 38 </script> 39</body> 40 41</html> 42コード

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

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

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

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

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

guest

回答1

0

「drawer.js drawer-overlay コンテンツ」でググったところ、2番目にこのページがヒットしました。
大変わかりやすいと思いますので、参考にされてはいかがでしょうか。

コンテンツ部分にかかる半透明の黒色の変更 | Drawer(drawer.js)の見た目をカスタマイズするCSSの書き方 | Travelogue

本当に検索をしたのですか?

「検索してみても、コンテンツのところにつけるという表示があるだけでいまいちどこかわかりませんでした」とのことですが、どのようなキーワードで検索をかけたのでしょうか。前述の検索キーワードはあなたのご質問の文章の中から抜き出したものです。

失礼ながら、そもそも本当に検索をしてから質問をしているのか疑っています。
「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」みたいな質問だと、受け取りました。
質問するときのヒントにもありますように、最低限の検索をしてから質問をされることをお勧めします。

ググってから質問をするべき理由

なぜ質問する前に最低限の検索をした方がいいかというと、ググればすぐわかるような質問をすると、回答者に「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」みたいな丸投げ質問だと思われてしまうからです。
teratailの回答者は無償で回答していますので、「ググればわかるけど面倒だからteratailに質問を投げて寝とこ」のような質問をされると、「俺はお前の部下じゃねーよ」などと不快になる人が多いかと思います。
不快になるような質問からは、よいコミュニケーションが生まれず、問題解決につながらず、ただ荒れたやり取りがあるだけになってしまいます。
これは避けるべきです。

本当にググってもわからなかった場合

ですから、本当にググってもわからなかった場合、「XXXXXというキーワードで調べて、XXXという記事を見ましたが、それらしき内容ではありませんでした」などと書いてください。
そうであれば、「ああ、この人は丸投げをしているのではなくて、ググるのが下手なんだな」と伝わるはずです。

質問者も回答者も、お互いに配慮して、気持ちの良いやり取りをしていきたいと思っていますので、なにとぞご協力をお願いいたします。

投稿2020/06/09 01:28

Lhankor_Mhy

総合スコア36074

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

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

MIYABITSUJIMOTO

2020/06/09 11:36

ご回答ありがとございます。私も検索した際こちらの記事を拝見いたしました。コピーして使ってみたのですが、overlayは変わりませんでした。そもそもhtmlにoverlayのクラスを追加していないので、どこに追加すればいいのかがわかなくて今回質問させて頂きました。 ご回答頂ければと思います。お願いいたします
MIYABITSUJIMOTO

2020/06/09 11:37

どこにクラスを追加するのかという記事がいまいち見つけることができませんでした。
Lhankor_Mhy

2020/06/10 03:24

当方でご提示のコードに回答したCSSを加えて試したところ、問題なくコンテンツ部分にかかる半透明の黒色の変更ができました。 コピーして使ってみた時のコードをご提示ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問