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

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

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

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

HTML

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

CSS

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

0回答

264閲覧

画像のimgデータの表示位置が上手く指定できません!

anopurihana

総合スコア34

JavaScript

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

HTML

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

CSS

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2017/08/26 07:04

編集2022/01/12 10:55

こんにちは。
現在Monacaでプロプラン(有料)でアプリ製作をしております。
以下のコードで、テキストボックス内に入力できる文字のカラー変更をできる四つのinputボタンを設置しています。この並びに、<p><a onClick="sound2()">以下省略の画像データを表示したいのですが、うまく反映されません。
具体的には、<p><a onClick="sound2()">以下省略のコードをHTML内の四つのカラーボタンのコードの下に書き込む場合、望んだ位置(カラーボタンの右側)に配置できましたが、そうするとカラーボタンが機能しなくなってしまいました。
この原因と、画像データをカラーボタン右側にうまく配置できる打開策をご教授していただければ助かります。
ご協力よろしくお願いします。

css

1input.green{ 2 font-size: 1.4em; 3 font-weight:bold; 4 padding: 10px 30px; 5 background-color:#33ff00; 6 color:transparent; 7 border-style: none; 8 box-shadow: 2px 2px 3px 1px #666; 9 -moz-box-shadow: 2px 2px 3px 1px #666; 10 -webkit-box-shadow: 2px 2px 3px 1px #666; 11 -moz-border-radius: 5px; 12 -webkit-border-radius: 5px; 13 border-radius: 5px; 14 } 15 16input.blue{ 17 font-size: 1.4em; 18 font-weight:bold; 19 padding: 10px 30px; 20 background-color:#3333ff; 21 color:transparent; 22 border-style: none; 23 box-shadow: 2px 2px 3px 1px #666; 24 -moz-box-shadow: 2px 2px 3px 1px #666; 25 -webkit-box-shadow: 2px 2px 3px 1px #666; 26 } 27 28input.black{ 29 font-size: 1.4em; 30 font-weight:bold; 31 padding: 10px 30px; 32 background-color:#000000; 33 color:transparent; 34 border-style: none; 35 box-shadow: 2px 2px 3px 1px #666; 36 -moz-box-shadow: 2px 2px 3px 1px #666; 37 -webkit-box-shadow: 2px 2px 3px 1px #666; 38 } 39 40input.red{ 41 font-size: 1.4em; 42 font-weight:bold; 43 padding: 10px 30px; 44 background-color:#ff0000; 45 color:transparent; 46 border-style: none; 47 box-shadow: 2px 2px 3px 1px #666; 48 -moz-box-shadow: 2px 2px 3px 1px #666; 49 -webkit-box-shadow: 2px 2px 3px 1px #666; 50 } 51 52.unk { 53position: relative; 54margin-right: 50px; 55margin-top: -55px; 56text-align: right; 57width:auto 58height:auto 59}

html

1<p><a onClick="sound2()"><div class="unk"><img src="pic/han.jpg" width="40" height="40" data-width="39" data-height="39" oncontextmenu="return false" data-src="pic/han.jpg" data-aspect="0.748"/> </div> 2</a></p> 3 4<form> 5<center> 6<input type="button" class="green"value="green" onclick="chgColor(this)"style="width:40px;height:40px;"> 7<input type="button" class="blue"value="blue" onclick="chgColor(this)"style="width:40px;height:40px;"> 8<input type="button" class="black"value="black" onclick="chgColor(this)"style="width:40px;height:40px;"> 9<input type="button" class="red"value="red" onclick="chgColor(this)"style="width:40px;height:40px;"> 10</center> 11</form> 12 13<center> 14<div style="padding:0px 30px 30px 20px " "margin:10px 20px 10px 10px"> 15<textarea rows="3" cols="30" wrap="hard" 16 style="width:300px;height:100px;border-style:none;font-size:x-large;text-align:center;" 17 placeholder="Input your message!" id="ttttt" onchange="onChange();"> 18</textarea> 19</div> 20</center> 21

javascript

1 function sound1() { 2 document.getElementById("kokokara").play(); 3 } 4 function sound2(){ 5 document.getElementById('kokokara2').play(); 6 } 7 8 9function sound1(){ 10 11if( typeof( document.getElementById( "kokokara").currentTime) !='undefined'){ 12 document.getElementById("kokokara").currentTime = 0; 13} 14document.getElementById("kokokara").play(); 15} 16 17function sound2(){ 18 19if( typeof(document.getElementById('kokokara2').currentTime) !='undefined'){ 20 document.getElementById('kokokara2').currentTime = 0; 21} 22 23document.getElementById('kokokara2').play(); 24} 25 26function chgColor(arg) { 27 if (arg.value === "green") { 28 document.getElementById("ttttt").style.color = "green"; 29 } else if (arg.value === "blue") { 30 document.getElementById("ttttt").style.color = "blue"; 31 } else if (arg.value === "black") { 32 document.getElementById("ttttt").style.color = "black"; 33 } else if (arg.value === "red") { 34 document.getElementById("ttttt").style.color = "#ff0000"; 35 36 } 37 }

※質問内容と関連のないコードは一部省略しております。

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

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

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

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

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

s8_chu

2017/08/26 07:09

`chgColor関数`、`sound2関数`のコードを追記していただけませんか?
anopurihana

2017/08/26 07:36

ご指摘ありがとうございます。たった今コードを追加致しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問