質問: ムード漂わせるサイトを作りたいです。 スイッチのオン・オフ以外にも明るさを調整できるライトのような背景色で ウェブにもこういったスイッチ効果を表現できないかと考えていています。 下記のコードのように、画像をクリックすると、 ウェブサイトの背景の色がデフォルトの白から黒め影に映るに変わり、 昼から夜に移行する自然現象のようなグラジュエーション効果を実現したいです。。 ### ■ コメントへの回答:作業状況 ■ ### (問題提議) 1. コメントが全角である 1. ラインを追加 2. CSSのクラス指定を"#" に変更 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ``` パーカッション式の短銃をカジノの裏口で拾ったが 誰の所有者なのかわからい。 人間の拳程度の大きさでポケットにも入る。 しかし、護身拳銃にぴったりだ。 . . . ん?"フィラデルフィアデリンジャー・・・" (銃の表面に書かれた画像をタップする) ``` ユーザーが画像をタップすると、 上記に文章のフォントが白に変わり、同時にサイトの背景色が だんだんと徐々に黒くなるような表現をしたいです 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; } ``` 長文となり失礼しました。 ご検討いただけますでしょうか・・・、何卒よろしくお願いいたします。
回答: CSSのセレクタがちゃんとid=mypicの要素を指定できてないですね。 IDで指定したい場合には`.mypic`ではなく`#mypic`にしましょう。`.`で始まる指定はクラスでの指定になってしまいます。