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

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

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

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

CSS

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

Q&A

解決済

2回答

267閲覧

サイトで背景色のグラジュエーション変化効果を表現したい

StanS.

総合スコア25

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/04/18 02:22

編集2019/04/18 08:54

ムード漂わせるサイトを作りたいです。
スイッチのオン・オフ以外にも明るさを調整できるライトのような背景色で
ウェブにもこういったスイッチ効果を表現できないかと考えていています。
下記のコードのように、画像をクリックすると、
ウェブサイトの背景の色がデフォルトの白から黒め影に映るに変わり、
昼から夜に移行する自然現象のようなグラジュエーション効果を実現したいです。。

■ コメントへの回答:作業状況 ■

(問題提議)

1. コメントが全角である <!-----画像が表示されるーーーー>
2. myAudio のidがついた要素がない
3. htmlではidが指定、cssではクラス指定 "."

(修正後)

1. 全角か<!-----画像が表示される---->
2. <audio>ラインを追加
3. CSSのクラス指定を"#" に変更

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<html> <head> <script src="audiojs/audio.min.js"></script>  <script> audiojs.events.ready(function() { audiojs.createAll(); }); </script> </head> <body> <div id="one"> <p id="kaisetu" style="font-family:’Helvetica Bold’,游明朝,'Yu Mincho'; text-align:center;"> パーカッション式の短銃をカジノの裏口で拾ったが <br>誰の所有者なのかわからい。 <br>人間の拳程度の大きさでポケットにも入る。 <br>しかし、護身拳銃にぴったりだ。</p> . . . <br>ん?"フィラデルフィアデリンジャー・・・" <br> (銃の表面に書かれた画像をタップする) </div> <!-----画像が表示される----> <div style="display:none;"> <audio id="myAudio" src="audio/Lincolnassociation.mp3" preload="auto"></div> <a onclick="togglePlay()"><img id="mypic" src="images/button.jpg" name="s" onclick="disp()" alt="philadelphiaderringer" ></a> <!---- こちらは画像をクリックすると音楽が鳴る仕様になっているので、 Toggle Playがついています。またjavascriptを使用し、画像が別の画像に変わるように onclick="disp(0)"も使用しています-----> <script> var pics_src = new Array("images/button.jpg","images/buttonred.jpg"); var num = 0; function disp(){ if (num == 1) { num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; } </script> <script type="text/javascript"> var myAudio = document.getElementById("myAudio"); var isPlaying = false; function togglePlay() { if (isPlaying) { myAudio.pause() } else { myAudio.play(); } }; myAudio.onplaying = function() { isPlaying = true; }; myAudio.onpause = function() { isPlaying = false; }; </script> </body> </html>

ユーザーが画像をタップすると、
上記に文章のフォントが白に変わり、同時にサイトの背景色が
だんだんと徐々に黒くなるような表現をしたいです

CSSの transtion機能を使い、クリックと同時に変更できないか、
下記のようなコードを試していますが、反応がありません・・・。

#mypic { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #div one:disp() { background-color #ffc9d7; } #div kaisetu{ font-color: FFF; }

長文となり失礼しました。
ご検討いただけますでしょうか・・・、何卒よろしくお願いいたします。

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

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

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

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

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

kei344

2019/04/18 02:57

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
guest

回答2

0

CSSのセレクタがちゃんとid=mypicの要素を指定できてないですね。

IDで指定したい場合には.mypicではなく#mypicにしましょう。.で始まる指定はクラスでの指定になってしまいます。

投稿2019/04/18 02:31

Swordroot_M

総合スコア36

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

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

StanS.

2019/04/18 02:43

CSSにおけるID指定方法、とClassの差別。 ご教授、いただきありがとうございました。
guest

0

ベストアンサー

全角ではコメントが終わりません。また、myAudio のidが付いた要素も無いので、エラーが出ているのでは。

HTML

1<!-----画像が表示されるーーーー> 2```↓ 3```HTML 4<!-- 画像が表示される -->

投稿2019/04/18 02:46

kei344

総合スコア69364

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

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

StanS.

2019/04/18 02:57

失礼いたしました。 myAudio とidを持たされた、<audio>ラインを追加しました。 また、コメントに関しては全角を半角に訂正しました。 ご確認ください、よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問