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

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

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

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

HTML

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

CSS

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

Q&A

解決済

2回答

2119閲覧

cssとjsが読み込まれない?(おしゃれselectボックスの作成)

sobue

総合スコア329

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/09/24 00:54

編集2018/09/24 07:36

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>タイトル</title> 7 <meta name="description" content="ディスクリプション" /> 8 <meta property="og:type" content="website" /> 9 <meta property="og:title" content="タイトル" /> 10 <meta property="og:image" content="/img/icon.png" /> 11 <meta property="og:url" content="http://example.net/" /> 12 <meta property="og:site_name" content="サイト名" /> 13 <meta property="og:description" content="ディスクリプション" /> 14 <meta name="robots" content="noarchive"> 15 <link rel="shortcut icon" href="/img/favicon.ico"> 16 <link rel="stylesheet" type="text/css" href="css/main.css"> 17 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 18 <script type="text/javascript" src="js/main.js"></script> 19 </head> 20 <body> 21 <div class="center"> 22 <select name="sources" id="sources" class="custom-select sources" placeholder="Source Type"> 23 <option value="profile">Profile</option> 24 <option value="word">Word</option> 25 <option value="hashtag">Hashtag</option> 26 </select> 27 </body> 28</html>

css

1@charset "UTF-8"; 2@import url(/css/sanitize.css); 3@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); 4 5body { 6 background: #ededed; 7 font-family: 'Open Sans', sans-serif; 8} 9.center { 10 position: absolute; 11 display: inline-block; 12 top: 50%; left: 50%; 13 transform: translate(-50%, -50%); 14} 15 16/** Custom Select **/ 17.custom-select-wrapper { 18 position: relative; 19 display: inline-block; 20 user-select: none; 21} 22 .custom-select-wrapper select { 23 display: none; 24 } 25 .custom-select { 26 position: relative; 27 display: inline-block; 28 } 29 .custom-select-trigger { 30 position: relative; 31 display: block; 32 width: 130px; 33 padding: 0 84px 0 22px; 34 font-size: 22px; 35 font-weight: 300; 36 color: #fff; 37 line-height: 60px; 38 background: #5c9cd8; 39 border-radius: 4px; 40 cursor: pointer; 41 } 42 .custom-select-trigger:after { 43 position: absolute; 44 display: block; 45 content: ''; 46 width: 10px; height: 10px; 47 top: 50%; right: 25px; 48 margin-top: -3px; 49 border-bottom: 1px solid #fff; 50 border-right: 1px solid #fff; 51 transform: rotate(45deg) translateY(-50%); 52 transition: all .4s ease-in-out; 53 transform-origin: 50% 0; 54 } 55 .custom-select.opened .custom-select-trigger:after { 56 margin-top: 3px; 57 transform: rotate(-135deg) translateY(-50%); 58 } 59 .custom-options { 60 position: absolute; 61 display: block; 62 top: 100%; left: 0; right: 0; 63 min-width: 100%; 64 margin: 15px 0; 65 border: 1px solid #b5b5b5; 66 border-radius: 4px; 67 box-sizing: border-box; 68 box-shadow: 0 2px 1px rgba(0,0,0,.07); 69 background: #fff; 70 transition: all .4s ease-in-out; 71 72 opacity: 0; 73 visibility: hidden; 74 pointer-events: none; 75 transform: translateY(-15px); 76 } 77 .custom-select.opened .custom-options { 78 opacity: 1; 79 visibility: visible; 80 pointer-events: all; 81 transform: translateY(0); 82 } 83 .custom-options:before { 84 position: absolute; 85 display: block; 86 content: ''; 87 bottom: 100%; right: 25px; 88 width: 7px; height: 7px; 89 margin-bottom: -4px; 90 border-top: 1px solid #b5b5b5; 91 border-left: 1px solid #b5b5b5; 92 background: #fff; 93 transform: rotate(45deg); 94 transition: all .4s ease-in-out; 95 } 96 .option-hover:before { 97 background: #f9f9f9; 98 } 99 .custom-option { 100 position: relative; 101 display: block; 102 padding: 0 22px; 103 border-bottom: 1px solid #b5b5b5; 104 font-size: 18px; 105 font-weight: 600; 106 color: #b5b5b5; 107 line-height: 47px; 108 cursor: pointer; 109 transition: all .4s ease-in-out; 110 } 111 .custom-option:first-of-type { 112 border-radius: 4px 4px 0 0; 113 } 114 .custom-option:last-of-type { 115 border-bottom: 0; 116 border-radius: 0 0 4px 4px; 117 } 118 .custom-option:hover, 119 .custom-option.selection { 120 background: #f9f9f9; 121 } 122}

js

1$(".custom-select").each(function() { 2 alert("test"); 3 var classes = $(this).attr("class"), 4 id = $(this).attr("id"), 5 name = $(this).attr("name"); 6 var template = '<div class="' + classes + '">'; 7 template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>'; 8 template += '<div class="custom-options">'; 9 $(this).find("option").each(function() { 10 template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>'; 11 }); 12 template += '</div></div>'; 13 14 $(this).wrap('<div class="custom-select-wrapper"></div>'); 15 $(this).hide(); 16 $(this).after(template); 17}); 18$(".custom-option:first-of-type").hover(function() { 19 $(this).parents(".custom-options").addClass("option-hover"); 20}, function() { 21 $(this).parents(".custom-options").removeClass("option-hover"); 22}); 23$(".custom-select-trigger").on("click", function() { 24 $('html').one('click',function() { 25 $(".custom-select").removeClass("opened"); 26 }); 27 $(this).parents(".custom-select").toggleClass("opened"); 28 event.stopPropagation(); 29}); 30$(".custom-option").on("click", function() { 31 $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); 32 $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); 33 $(this).addClass("selection"); 34 $(this).parents(".custom-select").removeClass("opened"); 35 $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); 36});

参考HP

cssは背景色は変わるのですが、コンボボックスの色、大きさなどが変わらないです。
jsはalertを仕込んでみたのですが表示されなかったので読み込みすらされていない状態です。

確認環境
IE11
Edge
jQuery3.3.1

----------------------------追記----------------------------
解決ソース

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>タイトル</title> 7 <meta name="description" content="ディスクリプション" /> 8 <meta property="og:type" content="website" /> 9 <meta property="og:title" content="タイトル" /> 10 <meta property="og:image" content="/img/icon.png" /> 11 <meta property="og:url" content="http://example.net/" /> 12 <meta property="og:site_name" content="サイト名" /> 13 <meta property="og:description" content="ディスクリプション" /> 14 <meta name="robots" content="noarchive"> 15 <link rel="shortcut icon" href="/img/favicon.ico"> 16 <link rel="stylesheet" type="text/css" href="css/main.css"> 17 </head> 18 <body> 19 <div class="center"> 20 <div class="custom-select-wrapper"> 21 <select name="sources" class="custom-select sources" id="sources" style="display: none;" placeholder="Source Type"> 22 <option value="profile">Profile</option> 23 <option value="word">Word</option> 24 <option value="hashtag">Hashtag</option> 25 </select> 26 </div> 27 </div> 28 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 29 <script type="text/javascript" src="js/main.js"></script> 30 </body> 31</html>

js

1alert("test"); 2$(".custom-select").each(function () { 3 var classes = $(this).attr("class"), 4 id = $(this).attr("id"), 5 name = $(this).attr("name"); 6 alert("test"); 7 var template = '<div class="' + classes + '">'; 8 template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>'; 9 template += '<div class="custom-options">'; 10 $(this).find("option").each(function () { 11 template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>'; 12 }); 13 template += '</div></div>'; 14 $(this).wrap('<div class="custom-select-wrapper"></div>'); 15 $(this).hide(); 16 $(this).after(template); 17}); 18$(".custom-option:first-of-type").hover(function () { 19 $(this).parents(".custom-options").addClass("option-hover"); 20}, function () { 21 $(this).parents(".custom-options").removeClass("option-hover"); 22}); 23$(".custom-select-trigger").on("click", function () { 24 $('html').one('click', function () { 25 $(".custom-select").removeClass("opened"); 26 }); 27 $(this).parents(".custom-select").toggleClass("opened"); 28 event.stopPropagation(); 29}); 30$(".custom-option").on("click", function () { 31 $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); 32 $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); 33 $(this).addClass("selection"); 34 $(this).parents(".custom-select").removeClass("opened"); 35 $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); 36}); 37//# sourceURL=pen.js

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

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

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

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

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

guest

回答2

0

ベストアンサー

script記述(js読みこみも) を</body>の直前に変えてみては?
ready記述がないのであれば、その箇所を通る時点で実行されるのでhtml操作を入れているところは対象のelementが読み込まれる前に実行されているように思います。

投稿2018/09/24 01:26

m.ts10806

総合スコア80765

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

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

sobue

2018/09/24 01:52

回答ありがとうございます。現在htmlに直書きすることで動作させるようにしています。レイアウトが解決したら試してみたいと思います。
m.ts10806

2018/09/24 03:31 編集

あまり回答の意図が伝わっていないようで、分かりにくかったかもしれませんが、scriptタグの記述位置の話です。 具体的には下記の位置に移動すると言うことです。 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/main.js"></script> </body>
sobue

2018/09/24 07:27

現在のhtml ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル</title> <meta name="description" content="ディスクリプション" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:image" content="/img/icon.png" /> <meta property="og:url" content="http://example.net/" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:description" content="ディスクリプション" /> <meta name="robots" content="noarchive"> <link rel="shortcut icon" href="/img/favicon.ico"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <body> <div class="center"> <div class="custom-select-wrapper"> <select name="sources" class="custom-select sources" id="sources" style="display: none;" placeholder="Source Type"> <option value="profile">Profile</option> <option value="word">Word</option> <option value="hashtag">Hashtag</option> </select> </div> </div> </body> </html> ``` ```js alert("test"); $(".custom-select").each(function () { var classes = $(this).attr("class"), id = $(this).attr("id"), name = $(this).attr("name"); alert("test"); var template = '<div class="' + classes + '">'; template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>'; template += '<div class="custom-options">'; $(this).find("option").each(function () { template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>'; }); template += '</div></div>'; $(this).wrap('<div class="custom-select-wrapper"></div>'); $(this).hide(); $(this).after(template); }); $(".custom-option:first-of-type").hover(function () { $(this).parents(".custom-options").addClass("option-hover"); }, function () { $(this).parents(".custom-options").removeClass("option-hover"); }); $(".custom-select-trigger").on("click", function () { $('html').one('click', function () { $(".custom-select").removeClass("opened"); }); $(this).parents(".custom-select").toggleClass("opened"); event.stopPropagation(); }); $(".custom-option").on("click", function () { $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); $(this).addClass("selection"); $(this).parents(".custom-select").removeClass("opened"); $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); }); ``` alert("test");で読み込みされていることは確認できましたが、関数が読まれないです。
m.ts10806

2018/09/24 07:30

コメント欄ではマークダウン使えないので質問に追記いただけますか? あとscriptによるjs読み込み記述はそこじゃないですよ。 何度も書いてますが </body> の直前です。提示コードは<body>の直前になってます。
sobue

2018/09/24 07:40 編集

根気よく回答ありがとうございます。jsの読み込みは無事解決しました。 cssは自己解決しましたので最終解決ソースを質問に記述しました。
m.ts10806

2018/09/24 07:50

回答で不明な点や回答者とのズレを感じたら聞いてくださいね。 何度もやりとりが発生するとお互い無駄に疲弊してしまいます。
guest

0

実際に必要な外部 .js, .css ファイルへの要求が出ていて期待した応答が返ってきているか、順番は正しいかは確認されているのでしょうか?

ブラウザのキャッシュを削除して問題のページを要求し Fiddler で要求・応答をキャプチャするなどで調べられると思うのですが・・・

イメージ説明

そんなことは言われるまでもなく調べた上で、問題ないことを確認済ということでしたら、的外れなレスを失礼しました。

投稿2018/09/24 02:47

編集2018/09/24 02:48
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問