ミスチルの大名曲の数々が配信決定!! 31日間無料!!【PR】

PNG画像の中心部が、透過情報ありになっている
国旗のような画像の中心部が、
ホームページ上で、R、G、Bのスライドバーを使い、作った色で塗りつぶしたいのですが、どのようにしたらいいでしょうか?
パソコン初心者で、無料のホームぺージのテンプレートで作りたいです。
(画像参照)

デザイン等はシンプルなものでかまいません。
どのようにしたらいいでしょうか。

現状は、

<head>
<script>
function clickNow(){

var r = document.querySelector('#red').value;
var g = document.querySelector('#green').value;
var b = document.querySelector('#blue').value;
var msg = document.querySelector('#msg');
msg.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
}
</script>
</head>


<body>
<div id="msg" style="display: inline-block;"><img src="画像"></div>
<p>
<input type="range" id="red" max="255"><br>
<input type="range" id="green" max="255"><br>
<input type="range" id="blue" max="255"><br>
</p>
<button onclick="clickNow();">Click</button>
</body>

となっていますが、色が変わりません。

画像はワード確認しましたが、
背景が透けますので、透過情報はついています。

何か他にも問題があるのでしょうか?

「R、G、Bのスライドバーで色を変えたい」の質問画像

質問者からの補足コメント

  • うーん・・・

    ご回答ありがとうございました。
    取敢えずは間違えはないようですね。

    ただ、忍者HPの無料版でやってみたのですが、動作しませんでした。


     >念のため、#msg要素に画像よりも大きなサイズを与えておいて、背景が変わるかどうかを確認なさってみてはいかがでしょうか?
    (スクリプトがOFFになっていたり、あるいは、サーバで使用禁止になっていたりということはありませんよね?)


    どういうことか良くわかりませんでした。
    申し訳ありませんが、
    もう少し分かりやすく教えていただけないでしょうか。

    No.1の回答に寄せられた補足コメントです。 補足日時:2017/07/13 17:41

A 回答 (1件)

こんにちは



ほぼそのままコピペで試してみましたが、動作するようです。
(IE11.0、fx54.0)

念のため、#msg要素に画像よりも大きなサイズを与えておいて、背景が変わるかどうかを確認なさってみてはいかがでしょうか?
(スクリプトがOFFになっていたり、あるいは、サーバで使用禁止になっていたりということはありませんよね?)
この回答への補足あり
    • good
    • 0
この回答へのお礼

fujillinさん
何度かやってみましたら、
できていたようです。

お手数かけましたが、ありがとうございました。

お礼日時:2017/07/13 18:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q【VBA】IF文 複数(ネスト)の時の処理について

こんにちは。
if文についておしえてください。
以下のようなマクロがあるとします。

変数 tensuuに-1をいれて実行すると①→②のように動作し「入力エラー」と表示されます。
tensuuに120を入れて実行すると①´→②´の順に動作し「入力エラー1」と表示されます。

どして、-1のときは入力エラー1にはいかず入力エラーにいくのでしょうか?
120のときは入力エラーにはいかず入力エラー1にいくのでしょうか?

動きがよくわかりません。
IF文とELSEはどういう紐づけがされているのでしょうか?

よろしくおねがいいたします。
   
Sub t()
tensuu = -1
If tensuu >= 0 Then '①
If tensuu <= 100 Then '①´
If tensuu >= 80 Then
MsgBox "合格"
Else
MsgBox "不合格"
End If
Else
MsgBox "入力エラー1" '②´
End If
Else
MsgBox "入力エラー" '②
End If
End Sub

こんにちは。
if文についておしえてください。
以下のようなマクロがあるとします。

変数 tensuuに-1をいれて実行すると①→②のように動作し「入力エラー」と表示されます。
tensuuに120を入れて実行すると①´→②´の順に動作し「入力エラー1」と表示されます。

どして、-1のときは入力エラー1にはいかず入力エラーにいくのでしょうか?
120のときは入力エラーにはいかず入力エラー1にいくのでしょうか?

動きがよくわかりません。
IF文とELSEはどういう紐づけがされているのでしょうか?

よろし...続きを読む

Aベストアンサー

If 〜 Then 〜 Else 〜 End If
で1セットです。

ネスト(入れ子)になったIF文というのは、 Then 〜 とか Else 〜 の〜の部分にIf文がくるものです。
ですから、外のIfを越えてしまうことはありません。
よって、一番内側から見ていけば、構造がはっきりします。


一番内側から見ます。

If tensuu >= 80 Then
MsgBox "合格"
Else
MsgBox "不合格"
End If

が1セットです。
これを 「文1」とすると元のプログラムは

If tensuu >= 0 Then '①
If tensuu <= 100 Then '①´
「文1」
Else
MsgBox "入力エラー1" '②´
End If
Else
MsgBox "入力エラー" '②
End If

となります。この状態で「一番内側」を見ると

If tensuu <= 100 Then '①´
「文1」
Else
MsgBox "入力エラー1" '②´
End If
です。これを「文2」とすると

If tensuu >= 0 Then '①
「文2」
Else
MsgBox "入力エラー" '②
End If


余談ですが
この例の場合、外側2つは、判定内容と処理とが離れてしまい、見辛いのは確かです。
if 条件 Then A Else B は if not条件 Then B Else A と同じ、ということから、Thenでの処理とElseでの処理を入れかえれば、
条件の直ぐ下の処理が来るので、見易さが格段によくなります。

If tensuu < 0 Then '① ' tensuu<0 は not (tensuu>=0)と同じ
MsgBox "入力エラー" '②
ElseIf tensuu > 100 Then '①´
MsgBox "入力エラー1" '②´
ElseIf tensuu >= 80 Then
MsgBox "合格"
Else
MsgBox "不合格"
End If ' ElseIfで継いでいるので、ネストにはなっていない

If 〜 Then 〜 Else 〜 End If
で1セットです。

ネスト(入れ子)になったIF文というのは、 Then 〜 とか Else 〜 の〜の部分にIf文がくるものです。
ですから、外のIfを越えてしまうことはありません。
よって、一番内側から見ていけば、構造がはっきりします。


一番内側から見ます。

If tensuu >= 80 Then
MsgBox "合格"
Else
MsgBox "不合格"
End If

が1セットです。
これを 「文1」とすると元のプログラムは

If tensuu >= 0 Then '①
If tensuu <= 100 Then '①´
「文1」
Else
MsgBox "入力エラー1" '②´
...続きを読む

Qエクセル 数式を教えてください!

エクセルの数式を教えてください!

エクセルでタイムカードを作成しているのですが、休憩時間が2枠ある場合(①通常時間帯②深夜時間帯)の各時間(拘束時間・労働時間・日勤時間・通常残業・深夜
時間・深夜残業)の算出数式が分かりません。

画像のように、休憩時間は①通常時間帯と②深夜時間帯(22:00~5:00)の2枠あり、それぞれ合計時間を数値で入力します。
各時間帯の休憩時間がそれぞれ、
・拘束時間・労働時間・日勤時間・通常残業・深夜時間・深夜残業に反映させるようにしたいのですが、休憩が2枠あるため数式がうまくいきません。。

深夜帯(深夜時間・深夜残業)は22:00~5:00で、1日の労働時間が8時間を超えた場合に残業となります。

画像のように、【拘束時間・労働時間・日勤時間・通常残業・深夜時間・深夜残業】に適切な数値(出勤退勤はh:mmで入力し、その他は15分=0.25単位の数値)で計算されるようにしたいです!

賢者の皆様、どうか宜しくお願い致します!

Aベストアンサー

ANo3です。

>15分を0.25と数値で計算させる方法がわからないので
シリアル値は1日が1.0となるように計算しています。

シリアル値の時間をTとするなら
 =HOUR(T)+MINUTE(T)/60
とすることで、時間単位(15分は0.25時間)に該当する値を得られます。
例えば、3:15 → 3.25 となります。

上記の1日=1.0(1日=24時間)を利用すれば、もっと簡単に
 =T*24
とすることでも、同様の結果を得ることができます。

※どちらの場合も、表示書式は「数値」や「標準」としておく必要があります。

Q半透過pngを作れるフリーソフト探しています

今したいのは、エクセルで表を作ってペイントなどに張り付けます
その表の文字や罫線以外の白い所を透明、文字は不透明、アンチエは半透明
になるようなソフトです
白は透明、黒は不透明、灰色は半透明の様に、色によって透明度を決めてくれる
フリーソフトって有りますか?

Aベストアンサー

色別で透明度指定・・・
GIMP2でちょっとやってみました。
色別というよりも色の濃さで透明度は変化するようです。
「白は透明、黒は不透明、灰色は半透明」はクリアしてますね。

Q画質を劣化させずに縮小する方法を教えてください。 中学生です。理科の授業ではすべてルーズリーフにノー

画質を劣化させずに縮小する方法を教えてください。
中学生です。理科の授業ではすべてルーズリーフにノートをとって、バインダーにとじているのですが、図や写真はルーズリーフに書けないので教科書のを印刷したいのです。でも教科書の画像をスキャンしてトリミングして縮小すると画像が悪くなります。作業はスマホでやってます。スキャンした時点では画質は問題ないです。アプリはスキャン用にCanonのprint、編集用にラインカメラです。
説明下手くそですいませんでした。分かる方回答お願いします。

Aベストアンサー

記載の忘れていたところです。
解像度は最低でも72ピクセル以上で、画像サイズは思ったサイズ縦横の2倍以上は欲しいです。
保存は、できるだけ圧縮をしないで。

Q質問です。

スキャナでスキャンした新聞を保存するのに適した画像形式は【  】である   
 
 
CRC
GIF
MPEG
MP3

上記4つの内、どれが正しいでしょうか?

Aベストアンサー

その中ならGIFでしょうけど
妙な問題ですね
別に適しては無いですからね

Qこちらの記述をスマホサイトにも適用させることはできますでしょうか?

PCサイトは問題なく別窓を開いて動作するんですが、iPhoneなどのスマホではリンク先に飛ぶ動作ができなくて困っています。さかのぼって検索したのですが見つけられずどうかお知恵をお貸しください。

<script>
function jump(parts){
if(parts.options[parts.selectedIndex].value==""){
void(0);
}else{
window.open(parts.value,"_blank");
}
}
</script>


<form>
<select name="next" onchange="jump(this)">
<option value="" selected="selected">【都道府県別 店舗一覧】</option>
<optgroup label="北海道">
<option value="(店舗URL)">(店名)</option>
</optgroup>
</select>
</form>

Aベストアンサー

こんにちは

スマホはよくわかりませんが、単に、ポップアップブロックのせいではないでしょうか?
(PCでもブロックされたりしますけれど・・・)
http://d.hatena.ne.jp/go_nash/20111026#1319617919

ユーザーの動作の一環として行えばブロックされないという記事もあるようですが・・・
http://qiita.com/sutoh/items/7e40d7e89888e574198c

対策らしき方法を載せているページがありました。
https://gist.github.com/froop/5370154

Q画像加工ソフトGIMPで 「A」を選んで文字を入れるのに フォントは漢字が少ないと思い 英語を選択し

画像加工ソフトGIMPで
「A」を選んで文字を入れるのに
フォントは漢字が少ないと思い
英語を選択して漢字を入れると文字が
ギザギザになるし。
なぜGIMPは漢字を入れにくいのでしょうか?

Aベストアンサー

漢字が少ない理由
日本語フォントを入れてないから。
元々OSが持ってるフォント自体日本語フォント(漢字)が少ない。

https://oshiete.goo.ne.jp/qa/9827667.html
↑ところでこっちは放置?

Qh1タグのパンくずリストへの設置

SEO対策としてh1タグの設置を検討していますが、各ページに設置するため、パンくずリストへの設置を考えています。

[HTML]
<ol>
<li>
<a href="ホーム.html">
<span>ホーム</span></a>
</li>
<li>
<span>このサイトのご利用案内</span>
</li>
</ol>

[CSS]
ol {
float: left;
margin: 12px 0 0 20px;
}
ol li {
display: inline; /* 横並び */
}
ol li a {
padding-right: 15px;
background: url(/images/path.gif) no-repeat right; /* 矢印 */
}

「このサイトのご利用案内」をh1にしたいので、
<span>このサイトのご利用案内</span> を
<span><h1>このサイトのご利用案内</h1></span> にしたり
<h1><span>このサイトのご利用案内</span></h1> にしたり
しましたが、「ホーム」と「このサイトのご利用案内」の文字が重なってしまいます。
<span style="margin-left: ○○px; "><h1>このサイトのご利用案内</h1></span> や
<span style="padding-left: ○○px; "><h1>このサイトのご利用案内</h1></span> 
にすると重ならずに表示できますが、さらに下の階層のページなどでの汎用性が低くなり一般的でないと思います。

文字が重ならないようにする方法を教えて下さい。

宜しくお願いいたします。

SEO対策としてh1タグの設置を検討していますが、各ページに設置するため、パンくずリストへの設置を考えています。

[HTML]
<ol>
<li>
<a href="ホーム.html">
<span>ホーム</span></a>
</li>
<li>
<span>このサイトのご利用案内</span>
</li>
</ol>

[CSS]
ol {
float: left;
margin: 12px 0 0 20px;
}
ol li {
display: inline; /* 横並び */
}
ol li a {
padding-right: 15px;
background: url(/images/path.gif) no-repeat right; /* 矢印 */
}

...続きを読む

Aベストアンサー

>>やはり左端に寄ってしまいます。
改行しないで横へ並べるなら、そう書けば良いだけです。

前のh1に追加するだけ。
h1 {font-size:16px; font-weight:normal; line-height:1;}

h1 {font-size:16px; font-weight:normal; line-height:1;display: inline;}

Q”の” の小さいひらがなの打ち方がわかりません、

XやLを頭に入れても出ません、ローマ字入力です。よろしくお願いします。

Aベストアンサー

コンピュータでは、文字に番号を割り当ててあって、その番号を使って文字を扱います。
番号の割り当てられていないものは使えません
https://ja.wikipedia.org/wiki/%E5%B9%B3%E4%BB%AE%E5%90%8D_(Unicode%E3%81%AE%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF)
番号のあるひらがなはこれだけです。

その「小さいひらがな」というのは、「ひらがなに見える、別の文字」のことでしょう。

QHTML フレーム内にWebページを表示したい

学生時代にHTMLを習ったことがあり、10年ぶりに作ろうと思ったのですが、
フレームに別ページを表示させようとするとエラーとなってしまいます。OSはWin10。
(IE(11)では別ウインドウでなくては開かない、Firefox(51.0.1)ではエラーすら表示されない)

コードは以下の通りです。フレームの一つに自分で作ったページを表示させ、
もう一つにGOOGLEなどのウェブページを表示させたいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>

<head>
<title>サンプルページ</title>
</head>

<frameset cols="100,*">
<frame name="frame1" src="./a.html">
<frame name="frame2" src="http://www.google.co.jp">
</frameset>

</html>


いろいろ調べましたが、最近はセキュリティの都合でこのような表示はできないようなのですが、何か方法はないでしょうか?

学生時代にHTMLを習ったことがあり、10年ぶりに作ろうと思ったのですが、
フレームに別ページを表示させようとするとエラーとなってしまいます。OSはWin10。
(IE(11)では別ウインドウでなくては開かない、Firefox(51.0.1)ではエラーすら表示されない)

コードは以下の通りです。フレームの一つに自分で作ったページを表示させ、
もう一つにGOOGLEなどのウェブページを表示させたいです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>

<...続きを読む

Aベストアンサー

>もう一つにGOOGLEなどのウェブページを表示させたいです。

ありません。googleは、frame内に表示されることを禁止しています。google側の問題です。自分のページなら表示されるでしょ

フレームの最大の問題点--googleなどから見た---は、googleのコンテンツがあたかも、そのページの作者のものてあるように見られること

 フレームは、遠い昔---「10年ぶりに」じゃなくて、20年以上前から、非推奨の代表格でした。


人気Q&Aランキング