ベストアンサー ※ ChatGPTを利用し、要約された質問です(原文:javascriptの質問です。) JavaScriptでボタン送信が機能しない理由 2023/11/03 14:17 このQ&Aのポイント JavaScriptを使用したボタン送信が正常に機能しない問題を検討しています。通常のウェブサイトでのボタン機能を期待するが、実装に失敗。送信機能が働かない原因と解決策を求めています。 javascriptの質問です。 <button type="button" class="btn" id="b_send" > <img class="ic2" width="25" height="25" src="../css/icon/paper44.png"><img class="ic2w" width="25" height="25" src="../css/icon/paper44.png">送信 <span> CTR + ENTER </span> </button> とあるのですがjavascriptで送信しようとしても送信できません。 普通のサイトでは押したら送信されるはずなのにできません。 これはどうすればできるでしょうか。 回答よろしくお願いします 質問の原文を閉じる 質問の原文を表示する みんなの回答 (2) 専門家の回答 質問者が選んだベストアンサー ベストアンサー Kaneyan-R ベストアンサー率42% (1340/3126) 2023/11/03 14:50 回答No.2 document.getElementById('b_send'); 入れ先(変数)が無いけど? もしかしてresult? completion(result); completionは何をやる関数? 通報する ありがとう 1 広告を見て他の回答を表示する(1) その他の回答 (1) Kaneyan-R ベストアンサー率42% (1340/3126) 2023/11/03 14:32 回答No.1 javascriptで送信しようとしても送信できません。 その肝心のスクリプトが質問に書いてないのは何故? 質問者 補足 2023/11/03 14:34 let a = Math.random(); let element = document.getElementById('comment'); element.value = a ; document.getElementById('b_send'); completion(result); 今はこんな感じなんどすけど…どうすればいいですかね? 通報する ありがとう 1 カテゴリ [技術者向] コンピュータープログラミング・開発JavaScript 関連するQ&A HTML、CSS が、なかなかうまくいきません。 お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の2つのボタンは、やや大きい感じのボタン。 下段の3つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。 画像を右下から詰めて表示したい 画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角(□)の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…?どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; } 全部のサイコロをjavascriptで動かしたい。 たくさんのサイコロを画面が切り替わったと同時に出てきて、サイコロが全部ランダムに違う数字になって出てくるようにしたいのですが、HTML文の <li><img class="simap" src="img/MAP.png"/><img src="sai1.png" class="saikoro" name="saikoro"></li>の行が1個だったら、画面が切り替わるとちゃんとランダムに数字が変わるうようになり、何も問題ないのですが、 この行が2行以上になると、ランダムになるはずなのに、なぜかなりません。 毎回サイコロの目は1です。 どうしてランダム機能がちゃんと機能しないのか、 どう修正すればいいのか、 アドバイスお願いします。 *****************HTML文********************* <html> <head> <link rel="stylesheet" href="daisu.css" type="text/css"/> <script src="daisu.js"></script> <title>ダイス戦略</title> </head> <body> <div id="title"> <p>ああああ</p> <p><button id="btn_gamennkirikae" type="button">あああ</button></p> </div> <div id="gamegamenn"> <p><button id="btn_hitori" type="button">ああああ</button></p> </div> <div id="map"> <ul id="sima"> <li><img class="simap" src="img/MAP.png"/><img src="sai1.png" class="saikoro" name="saikoro"></li> **********ここ*********************************** </ul> </div> <body> </html> ******************CSS文******************** #title{ width:1200px; height:800px; border:4px solid gray; text-align:center; margin-top:70px; margin-left:auto; margin-right:auto; } #gamegamenn{ width:1200px; height:800px; border:4px solid gray; text-align:center; margin-top:70px; margin-left:auto; margin-right:auto; } button#btn_gamennkirikae{ width: 150px; height: 50px; margin-top:300px; } #map{ width:1200px; height:800px; border:4px solid gray; text-align:center; margin-top:70px; margin-left:auto; margin-right:auto; } #map li{ float:left; list-style-type: none; margin-left:-50px; } #map img{ } #sima{ float:left; margin-left:50px; } .saikoro{ width:50px; height:50px; position:relative; right:80px; bottom:25px; } .simap{ } *****************JS文********************* window.addEventListener('load',initGame,false); function initGame(){ var dialog = document.querySelector('#title'); dialog.style.display='block'; var dialog =document.querySelector('#gamegamenn'); dialog.style.display='none'; var dialog =document.querySelector('#map'); dialog.style.display='none'; var btn =document.querySelector('#btn_gamennkirikae'); btn.addEventListener('click',gamegamenn,false); } function gamegamenn(){ var dialog = document.querySelector('#title'); dialog.style.display='none'; var dialog =document.querySelector('#gamegamenn'); dialog.style.display='block'; gamestart(); } function gamestart(){ var btn =document.querySelector('#btn_hitori'); btn.addEventListener('click',hitori,false); } function hitori(){ var dialog =document.querySelector('#gamegamenn'); dialog.style.display='none'; var dialog =document.querySelector('#map'); dialog.style.display='block'; chg(); } function chg(){ sai=new Array("sai0.png","sai1.png","sai2.png","sai3.png","sai4.png","sai5.png","sai6.png"); r=Math.random()*6; //乱数表 rr=Math.floor(r)+1; //切り捨てて+1する document.saikoro.src=sai[rr]; //サイコロを入れ替える } レスポンシブなサイトがうまくいかない レスポンシブなサイトを作っているのですが、 navを小さくした時のみ二行にして、押しやすくする為に二行の間にスペースを入れたいのですがうまくいきません。 <ul class="futtnavi"> <li><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/yourinfo.png" alt="個人情報の取り扱い" width="146" height="17" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <span> <li><img src="img/base/aboutus.png" alt="観光協会について" width="129" height="19" /></li> </span> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/faq.png" alt="FAQ" width="40" height="17" /></li> </ul> CSS /*Responsive /br*/ td.copyright span:before { content: "\A"; white-space: pre; } ul.futtnavi+li+li+li+li+span li,ul.futtnavi+li+li+li+li+span+li,ul.futtnavi+li+li+li+li+span+li+li { display: inline-block; margin-top: 1em; } どのようにしたら出来るでしょうか? もちろん@media screen and (max-width: 320px)などは入れています。そちらの問題では有りません。 javascriptを使い、サムネイル表示 サンプルHP⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html> フッター上部に謎の隙間 フッター上部に謎の隙間ができて困っています。 以下ソースになります。 『HTMLソース』 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>サンプルページ</title> <meta name="description" content="" /> <meta name="author" content="." /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.11.0/build/cssreset/cssreset-min.css"> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript"> $(function(){ $(".hide").hide(); $(".btn").click(function(){ $(".hide").next().slideToggle(); }); }) </script> </head> <body> <div id="conteiner"> <header> <div class="center"> <h1>ヘッダー</h1> </div> </header> <div id="box_001"> <div id="box_002"> <div class="center"> <h2>見出し</h2> <p class="btn">ボタン</p> <ul> <li><img src="A.png" alt="img" width="250" height="250" /></li> <li><img src="A.png" alt="img" width="250" height="250" /></li> <li><img src="A.png" alt="img" width="250" height="250" /></li> <li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li> <li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li> <li class="hide"><img src="A.png" alt="img" width="250" height="250" /></li> </ul> </div> </div> </div> <footer> <div id="box_003"> <p>フッター</p> </div> </footer> </div> </body> </html> 『CSSソース(style.cssで読み込んでます)』 html,body { height: 100%; width: 100%; } #conteiner { width: 100%; height: 100%; } .center { width: 100%; max-width: 1040px; height: auto; margin: 0 auto; } .center:after { content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } header { width: 100%; height: 300px; background: #ff7f50; } #box_001 { background: #4169e1; } #box_002 { background: #4169e1; } #box_001 ul { margin-bottom: 150px; } #box_001 ul li { float: left; margin: 40px; } footer { width: 100%; height: 150px; background: #ff7f50; } footer p { line-height: 150px; text-align: center; } html5でブロックとブロックの間に隙間ができる 下記のホームページを作りました。 しかし、ボタン部分とスライドショー部分に少し隙間ができてしまいます。 いろいろ試しましたが、隙間が目られません。 原因を教えていただけると幸いです。 [html5] <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link href="style/main.css" rel="stylesheet" type="text/css"> <meta name="author" content="HTMQ"> <meta name="robots" content="all"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <body> <header> <section> <h1>格安ホームページ制作会社 - hompa(ホムペ) -</h1> </section> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <nav> <ul> <li><a href="index.html"><img src="img/btn/btn0.png" width="120" height="86" alt="TEST"></a></li> <li><a href=""><img src="img/btn/btn1.png" width="120" height="86" alt="TEST2"></a></li> <li><a href=""><img src="img/btn/btn2.png" width="120" height="86" alt="TEST3"></a></li> <li><a href=""><img src="img/btn/btn3.png" width="120" height="86" alt="TEST4"></a></li> <li><a href=""><img src="img/btn/btn4.png" width="120" height="86" alt="TEST5"></a></li> <li><a href=""><img src="img/btn/btn5.png" width="120" height="86" alt="TEST6"></a></li> <li><a href=""><img src="img/btn/btn6.png" width="120" height="86" alt="TEST7"></a></li> </ul> </nav> </div> <!-- header --> <div class="clearfix"></div> <!-- slidmain --> <div id="slidemain"> <p id="slideshow"> <img src="img/index/photo1.jpg" width="980" height="450" alt="スライドショー1" class="active"> <img src="img/index/photo2.jpg" width="980" height="450" alt="スライドショー2"> <img src="img/index/photo3.jpg" width="980" height="450" alt="スライドショー3"> </p> </div> <!-- slidmain --> </div> <!-- container --> </header> </body> </html> [CSS] @charset "UTF-8"; /* CSS Document */ * { margin:0; padding:0; } body { } div#container { text-align:left; width:980px; margin: 0 auto; } div#header { width:840px; text-align:left; margin: 0 auto; padding-top:20px; } h1 { text-indent: -9999px; display: none; } ul { list-style:none; } li { float:left; } .clearfix:after { content:" "; display:block; clear:both; } #slidemain { width:980px; height:450px; } #slideshow { position: relative; width: 980px; height: 450px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; } imgタグとレスポンシブについて imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> Javascriptがうまく動作しません。 こんにちわ。 サイト制作初心者の者です。 サイトにCSSの切り替えが出来る"styleswitcher.js"を使用しているのですが、 切り替えの動作はするものの、ページを更新(リフレッシュ)したり、別のページに移動すると、元のCSSに戻されます。 ネットで同じ様なエラーが出てないか確かめてみましたが、役に立ちそうな答えが見つからなかったので、ここに質問させていただきます。 Styleswitcher.js http://www.alistapart.com/articles/alternate/ サイトでのソース: == <head></head>内:== <script type="text/javascript" src="js/styleswitcher.js"></script> <link rel="stylesheet" href="css/style.css" type="text/css" title="Default" /> <link rel="alternate stylesheet" href="css/style2.css" type="text/css" title="Custom2" /> <link rel="alternate stylesheet" href="css/style3.css" type="text/css" title="Custom3" /> == <body></body>内:== <div class="csspalette"> <a href="#" onclick="setActiveStyleSheet('Default'); return false;"><img src="images/ccss1.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> <a href="#" onclick="setActiveStyleSheet('Custom2'); return false;"><img src="images/ccss2.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> <a href="#" onclick="setActiveStyleSheet('Custom3'); return false;"><img src="images/ccss3.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> </div> ==== コードには問題は無いと思うのですが、 この他にJquery等を使ったエフェクトを入れているので、それが問題なのでしょうか? ご教授願います。 Javascriptで質問です。 以前こちらで質問をして retorofan さんに追加のscriptを詳しく教えていただき、実際の表示もほぼうまくいったのですが、選択ごとに表示位置が変わってしまってうまくいきません。inlineの部分をblockにしてだいぶ良くなったのですが、それでもまだ一定位置に出てくれません。どこを修正すれば一定位置に画像を出せるのでしょうか? <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023年</option> <option value="ne">2024年</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ne" class="subbox2"> <option value="">月を選択</option> <option value="ne1">1月</option> <option value="ne2">2月</option> <option value="ne3">3月</option> </select> </div> </form> <!-- 画像1 --> <div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div> <!-- 画像2 --> <div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div> <!-- 画像3 --> <div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></div> <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script> <script> //------------------------------------------------------------------------------ // 初期画面の表示内容 //「年」「月」画像1(2023−1.jpg)、画像2(2023−1-2.jpg)、画像3(2023−1-3.jpg) //------------------------------------------------------------------------------ window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 22:40 //---------------------------------------------------------- const cate = document.getElementById("cate"); const ha = document.getElementById("ha"); const subbox3 = document.querySelectorAll(".subbox3"); ha.style.display =""; cate.options[0].selected = true; ha.options[0].selected = true; [...subbox3].forEach(function(elem, index){ if (index % 6 == 0){ elem.style.display="inline-block"; //横並び //elem.style.display="block"; //縦並び } }); //---------------------------------------------------------- }); 同じjqueryを2つ並べて動かしたいけど動かない いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、2つめは動きません。 どうすれば動きますか?? 理想は■が1つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン&レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン&レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> </body> </html> Javascriptで質問です。 度々すみません。以下のようにセレクトボックスを2段階、「年」「月」を選択後に画像を3つ出力するコードでほぼ出来上がっているのですが、初期に画像を出しておきたいので、表示としては 「年」「月」画像1(2023−1.jpg)、画像2(2023−1-2.jpg)、画像3(2023−1-3.jpg)が初期画面で出るようにしたいのです。 詳しい方がいらっしゃいましたら、教えていただければ嬉しいです。よろしくお願いいたします。 <form> <div class="pulldownset vegetable"> <select id="cate" class="subbox" > <option value="">年</option> <option value="ha">2023年</option> <option value="ne">2024年</option> </select> <select id="ha" class="subbox2"> <option value="">月</option> <option value="ha1">1月</option> <option value="ha2">2月</option> <option value="ha3">3月</option> </select> <select id="ne" class="subbox2"> <option value="">月を選択</option> <option value="ne1">1月</option> <option value="ne2">2月</option> <option value="ne3">3月</option> </select> </div> </form> <!-- 画像1 --> <div id="ha1" class="subbox3"><img src="2023−1.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3.jpg" width="130" height="37" alt=""/></div> <!-- 画像2 --> <div id="ha1" class="subbox3"><img src="2023−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-2.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-2.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-2.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-2.jpg" width="130" height="37" alt=""/></div> <!-- 画像3 --> <div id="ha1" class="subbox3"><img src="2023−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ha2" class="subbox3"><img src="2023−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ha3" class="subbox3"><img src="2023−3-3.jpg" width="130" height="37" alt=""/></div> <div id="ne1" class="subbox3"><img src="2024−1-3.jpg" width="130" height="37" alt=""/></div> <div id="ne2" class="subbox3"><img src="2024−2-3.jpg" width="130" height="37" alt=""/></div> <div id="ne3" class="subbox3"><img src="2024−3-3.jpg" width="130" height="37" alt=""/></div> <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll(".subbox2,.subbox3").forEach(x=>{ x.style.display ="none"; }); document.querySelector("#cate").addEventListener('change',e=>{ document.querySelectorAll(".subbox2").forEach(x=>{ x.value=""; x.style.display =x.getAttribute("id")===e.target.value?"inline":"none"; }); document.querySelectorAll(".subbox3").forEach(x=>{ x.style.display ="none"; }); }); document.querySelectorAll(".subbox2").forEach(x=>{ x.addEventListener('change',e=>{ document.querySelectorAll(".subbox3").forEach(y=>{ y.style.display =y.getAttribute("id")===e.target.value?"inline":"none"; }); }); }); }); </script> <script> window.addEventListener('DOMContentLoaded', ()=>{ // 追加 2023-04-21 11:05 //---------------------------------------------------------- const cate = document.getElementById("cate"); const ha = document.getElementById("ha"); const subbox3 = document.querySelectorAll(".subbox3"); ha.style.display =""; cate.options[0].selected = true; ha.options[0].selected = true; let v = cate.options[1].text+"-"+ ha.options[1].text; [...subbox3].forEach(function(elem){ if (elem.textContent==v){elem.style.display="block"} }); //---------------------------------------------------------- }); </script> 【jQuery】サムネイル 3つのサムネイル画像(.thumb)があります。 クリックした.thumbはopacityを1に、その他は0.5に切り替わる する方法を教えてください。 始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); }); HTML CSSを、教えてください。 お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか? (オレンジ画像 width=100 height=50 でお願いします。) 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; } cssについて質問です。 cssについて質問です。 IE8で思ったように表示されるものが、Firefoxだとレイアウトが崩れてしまいます。 imgの高さや横幅がFirefoxで反映されず文字が上部に表示されるのですがいろいろやっても改善出来ずに途方に暮れています。 ヘッダーやフッターなどもありますが、関係のありそうな部分を抜き出してみました。 添付画像のように画像を3つならべて表示したいのですが、 一番無駄無くdivで組む方法もありましたらご教授下さい。 よろしくお願いします。 ■HTML■ <div class="subcontentsbox"> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> </div> ■css■ .subcontentsbox { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"MS Pゴシック",sans-serif; font-size: 100%; width: 100%; margin: 20px 0px; padding: 0; text-align: justify; -ms-text-justify: inter-ideograph; overflow: hidden; display: block; } .imgbox { background-color: #987654; height: 250px; width: 33.33333%; text-align: center; float: left; } .imgbox a{ text-decoration: none; border: 0; height: 180px; width: 180px; } .imgbox img{ border: 0; height: 180px; width: 180px; } HPの形態が崩れてしまうのですが HPの形態がくずれてしまいます。 困り度: すぐに回答を! 現在ホームページ製作をしています。 新しい操作を行うたびに、画像の位置がおかしくなってしまうことで質問なのですが、よろしいでしょうか? 現在ひとつのページにコンテンツにあたる画像を置いています。 そこに、インラインフレームをつけようと挿入すると 画像がインラインフレームの幅と同じサイズに改行され、 くずれてしまいます。 どうしたら型崩れせずにきれいにみせることができるのでしょうか?ちなみに画像が切れてしまうのはいやなので、フレームわけはしないでページ内ジャンプという形をとろうとおもっています。 ーーーーーータグはこちらですーーーーーーー <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>COLOR』</title> <link href="file:///E|/site/base.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { color: #333333; font-weight: bold; } --> </style> </head> <body> <p> <div id="content"> <p><span class="style1"> <br /> \今年のテーマは『COLOR』!/</span><br /> <img src="contents_about.png" alt="about" width="170" height="86" /><br /> <img src="contents_schedule.png" alt="schedule" width="243" height="86" /> <iframe src="main.html" name="uri" width="800" height="600" scrolling="Auto" frameborder="0" id="uri" style="border:none;filter:Alpha(opacity=50);"></iframe> <br /> <img src="contents_event.png" alt="event" width="170" height="86" /><br /> <img src="contents_blog.png" alt="blog" width="170" height="86" /><br /> <img src="contents_access.png" alt="access" width="201" height="86" /><br /> <img src="contents_link.png" alt="link" width="170" height="86" /><br /> <img src="contents_mail.png" alt="mail" width="170" height="86" /><br /> <img src="contents_top.png" alt="top" width="170" height="86" /></p> </div> </p> </body> </html> フォントサイズでレイアウトがずれる? cssでページレイアウトをしているのですが、 外部cssでサイト全体のフォントサイズを13pxにした場合 body { font-size: 13px; } 同じ画像なのに(四角のボタン)下部分の1pxの底辺が表示されるものとされないものが出てきました。 HTMLの記述内容は以下の通りです。 <div class="menu"> <p><img src="/img/**1.png" alt="" width="180" height="33"></p> <p><img src="/img/**2.png" alt="" width="180" height="33"></p> <p><img src="/img/**3.png" alt="" width="180" height="33"></p> <p><img src="/img/**4.png" alt="" width="180" height="33"></p> </div> <p>にmargin、paddingなどは設定していません。 この場合、画像、css共に同じ条件であるはずなのに、3番目の画像だけ上記のような不具合がおこりました。 フォントサイズを14pxにした場合、問題なく表示されます。 firefoxで確認したところは13px,14px共に、きちんと表示されていました。 ちなみにブラウザはIE6です。 ブラウザのバグか何かでしょうか?? 申し訳ありませんが、どなたかご教授お願い致します。 初歩的かもしれませんが回り込みが上手くできません 初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを4つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか?? <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div> javascriptでの、文字の可変の仕方について サイト全体に、javascriptでテキストの(「小」「中」「大」など。)可変の設定をしていますが、なぜかMacの「Safari」だけ反応しません。 WindowsのIE、Firefox、MacのFirefoxは可変します。 設定は下記のようにしてあります。 ◆common.css #fontSizeSelect .btn { cursor:pointer; } ◆fontsize_l.css .variableTxt01 { font-size:130%!important; } ◆htmlのボタンの設定 <img class="btn" src="../common/img/img_font_l.gif" width="28" height="23" alt="大" onClick="setActiveStyleSheet('fontSizeL');" /> 他にもタグが必要なのでしょうか。 よろしければ、アドバイスよろしくお願い致します。m(_ _)m スタイルシートでフレーム枠を隙間なくピタリとつける。 よろしくおねがいします。 http://www.sonzai.net/test/test.html 参考URL↑ 中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、 下辺だけ微妙に離れてしまいます。 【HTML】 <div id="subnavibar"> <p><img src="images/top/event.png" width="220" height="50" /></p> <img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" /> <p><img src="images/top/event.png" width="220" height="20" /></p> </div> 【css】 #subnavibar { width: 240px; float: left; background-color: #ffffff; height: 100%; } 原因としては、何があるでしょうか?
補足
let a = Math.random(); let element = document.getElementById('comment'); element.value = a ; document.getElementById('b_send'); completion(result); 今はこんな感じなんどすけど…どうすればいいですかね?