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

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

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

Materializeは、Googleが提唱するマテリアルデザインのサイト作成ができるCSSのフレームワーク。頻繁に使用されるスタイルが既に定義されており、優れたデザインのページを作成できます。また、レスポンシブWebデザインにも対応可能です。

JavaScript

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

Q&A

解決済

2回答

912閲覧

MaterializeのParallaxで画像が1つしか読み込まれない

HirakuMorishima

総合スコア29

Materialize

Materializeは、Googleが提唱するマテリアルデザインのサイト作成ができるCSSのフレームワーク。頻繁に使用されるスタイルが既に定義されており、優れたデザインのページを作成できます。また、レスポンシブWebデザインにも対応可能です。

JavaScript

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

0グッド

0クリップ

投稿2019/06/10 00:31

編集2019/06/10 02:21

MaterializeのParallaxで画像が1つしか読み込まれません。
Developer Toolsではエラーが出ておらず、1つ目の画像は問題なく読み込まれているという点から、2つ目がなぜ表示されないのかわかりません。

以下のコードで間違っている点や修正すべき点を教えていただきたいです。

html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <!--MaterializeCSS--> 6 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 8 <!--Google Web Font--> 9 <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet"> 10 <!--CSS--> 11 <link rel="stylesheet" href="css/styles.css" type="text/css" /> 12 <title>案件追加画面</title> 13 </head> 14 <body> 15 16 <div class="parallax-container"> 17 <div class="parallax"><img src="img/test.jpg"></div> 18 </div> 19 <div class="section white"> 20 <div class="row container"> 21 <h2 class="header1">Parallax</h2> 22 <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p> 23 </div> 24 </div> 25 <div class="parallax-container"> 26 <div class="parallax"><img src="img/test.1.jpg"></div> 27 </div> 28 29<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 30<script> 31 const para = document.querySelector('.parallax'); 32 M.Parallax.init(para,{}); 33</script> 34 </body> 35</html>

##追記
別HTMLですが、

Materializeのdatepickerを同一ファイル内に2つ読み込もうとすると、

こちらも最初のdatepickerしか作動しませんでした。

同一ファイル内に同じJavascriptを読み込もうとすると、最初の1つしか作動しないのはこちらのParallaxと同じ事象かと思います。

このような問題を解決するためにはどのような対策が必要でしょうか。

以下は、datepickerが最初の1つしか作動しないコードです。

html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <!--MaterializeCSS--> 6 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 8 <!--Google Web Font--> 9 <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap" rel="stylesheet"> 10 <!--CSS--> 11 <link rel="stylesheet" href="../css/styles.css" type="text/css" /> 12 <title>案件追加画面</title> 13 </head> 14 <body> 15 <!--サイドメニューここから--> 16 <div class="row"> 17 <div class="col s0 l2"> 18 <ul id="slide-out" class="sidenav sidenav-fixed "> 19 <li><a href="../index.html">クライアント一覧<i class="material-icons left">person</i></a></li> 20 <li><a href="#">案件カレンダー<i class="material-icons left">date_range</i></a></li> 21 <li><a href="addClient.html">クライアント追加<i class="material-icons left">add</i></a></li> 22 <li><a href="addItem.html">案件追加<i class="material-icons left">add</i></a></li> 23 </ul> 24 </div> 25 <!--サイドメニューここまで--> 26 <div class="col s12 offset-l1 l8"> 27 <nav class="header"> 28 <a href="#" data-target="slide-out" class="sidenav-trigger btn-floating"><i class="medium z-depth-1 material-icons">add</i></a> 29 <h2 class="center-align">案件追加</h2> 30 </nav> 31 <form action="" method="POST"> 32 <div class="input-field col s12"> 33 <input id="last_name" type="text" class="validate"> 34 <label for="last_name">〇〇に関するライティング依頼(一括登録あり)</label> 35 </div> 36 <div class="input-field col s12"> 37 <input id="last_name" type="text" class="datepicker"> 38 <label for="last_name">納期</label> 39 </div> 40 <div class="input-field col s12"> 41 <input id="last_name" type="text" class="validate"> 42 <label for="last_name">単価(文字単価対応)</label> 43 </div> 44 <div class="input-field col s12"> 45 <input id="last_name" type="text" class="validate"> 46 <label for="last_name">備考</label> 47 </div> 48 <input type="submit" value="案件編集" class="waves-effect waves-light btn blue accent-1"> 49 <input type="submit" value="案件削除" class="waves-effect waves-light btn red lighten-1"> 50 </form> 51 </div> 52 </div> 53 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 54 <!-- サイドバーの初期化用JS --> 55 <script> 56 document.addEventListener('DOMContentLoaded', function() { 57 var elems = document.querySelectorAll('.sidenav'); 58 var instances = M.Sidenav.init(elems, {}); 59 }); 60 </script> 61 <!--datepickerの初期化用JS--> 62 <script> 63 const Calendar = document.querySelector('.datepicker'); 64 M.Datepicker.init(Calendar,{}); 65 </script> 66 </body> 67</html>

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

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

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

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

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

m.ts10806

2019/06/10 00:35

細かいですがDeveloper Toolsですね。(deveropperではないです)
guest

回答2

0

自己解決

javascript

1<script> 2 const para = document.querySelector('.parallax'); 3 M.Parallax.init(para,{}); 4</script>

上記のコードを

javascript

1<script> 2 const para = document.querySelectorAll('.parallax'); 3 M.Parallax.init(para,{}); 4</script>

にして解決。

投稿2019/06/10 22:24

HirakuMorishima

総合スコア29

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

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

0

考えられる原因は3つ。

1.CSSの読み込み順番。css/styles.cssのように自身で用意するファイルはCSSフレームワークのファイル読み込みよりあとの方が良い。基本は後勝ちです
2.css/materialize.csshttps://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
Materialize本体を2回読み込んでいるように見受けられますが、これはあまりよくないと思います。CDNのほうだけで良いでしょう。

html

1 <link rel="stylesheet" href="css/styles.css" type="text/css" /> 2 <!--MaterializeCSS--> 3 <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> 4 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 6

3.2.とほぼ同じですがMaterialize本体を3回読み込んでいるように見受けられますこれもCDNだけで良いでしょう。機能バッティングで正常動作しない恐れもあります。

js

1 <script src="js/materialize.js"></script> 2<script type="text/javascript" src="js/materialize.min.js"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

投稿2019/06/10 00:39

m.ts10806

総合スコア80765

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

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

HirakuMorishima

2019/06/10 01:31

ご回答ありがとうございます。 ご指摘の通り修正しましたが、やはり画像は1つしか表示されておりません。
m.ts10806

2019/06/10 01:32

編集後のコードを追記してください。(今のコードを編集するのではなく「回答をもらったうえで修正したコード」として追加してください)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問