Q&A
コードブロックはコード毎に``` で囲う必要があります(分からなければコード部分を選択状態にして<code>ボタンを押してください) また、タグはふくすうつけることができます。内容的にJavaScriptだけではないので、関連するものをタグに追加してください
入門者のJavaScriptという本で勉強中です
HTMLのコード外で作ったCSSを読み込み動かすプログラムを学習中です。
内容は画像ビューワでビューワ内の→ボタンをクリックすると画像の表示ナンバーが
CSSで指定した色や影が付くハズですが画像がチェンジするだけで変わりません。
発生している問題・エラーメッセージ
エラーメッセージ無し
### 該当のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>簡易画像ビューワ</title> <link rel="stylesheet" href="viewer.css"> <script> function revBtnClick(){ window.alert('こんにちわ'); window,alert('さようなら'); } function fwdBtnClick(){ document.getElementById('no').innerHTML = 'No.2'; document.getElementById('pict').src = 'img/2.jpg'; document.getElementById('no').className = 'no2'; } </script> </head> <body> <img id="pict" src="img/1.jpg"> <div id="no" class="no1">No.1</div> <button onclick="revBtnClick();">←</button> <button onclick="fwdBtnClick();">→</button> </body> </html> ```ここに言語名を入力 ソースコード .no1{ color: green; } .no2{ color: red; text-shadow: 2px 2px 1px rgba(255,0,0,0,5); } 聞ける人に聞いてコードは合っていると言われました。 インターネットエクスプローラー、chrome、ファイアーフォックスのブラウザーで検証しましたが。 画像は変わっても文字表示は変わりませんでした。 よろしくお願いします。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
また、ブラウザの開発ツールを確認するとhtmlが正しく書き換えられているか確認できるので見てみてください
あと、コードブロック内にはコード以外を含めないようにしてください。質問編集画面ではプレビューがリアルタイムで表示されているのでそちらを見ながら調整してください。
本の通りに打ってCSSを代入するまでは走っていたのですが調べてやってみます。ありがとうございます。
確認してもらいたいのですが、今のHTMLをコピーすると<!DOCTYPE html>の前に何か入っています。こちらは何でしょうか？
質問は編集できるので適宜対応してくださると助かります。
Atomで入力してますが1<!DOCTYPE html>が最初のコードです。
なるほど。Bracketsで確認しているのですが <!の前に赤点が表示されたので、何か入っているのかなと思いました。ひとまず、既にコメントしたとおり、コードブロック内はコードのみにしてください。
mts10806様ありがとうございます。早速修正致します。これから病院なので検証後改めてお礼申し上げます。
回答5件
0
ベストアンサー
CSSを直に書き込めば普通に動いたので，キャッシュが効いているだけだと思います
キャッシュ削除・スーパーリロード等を試してみてください
投稿2018/08/30 06:20
総合スコア1284
おそらく，前回読み込んだCSSにno1の部分しか書いていなかったのではと思われます
gif画像のものは，HTML,CSSの記述内容自体は書き換えていないため（書く場所はちょっといじりましたが），純粋に「.no2」だけが効いていなかったものと考えられます
0
質問の見栄え部分で色々とコメントさせてはいただきましたが、先んじてコードを確認させていただきました。
CSSをHTMLに直に埋め込む形だとtext-shadowはともかくcolorは当たっています。
CSSが「置いてある場所をHTMLから正しくパス指定できていない」「そもそもCSSファイルがそこに存在しない」「CSSファイルが破損している」のいずれかではないでしょうか。
text-shadowの色指定ですが最後は0,5ではなく0.5ですね。
これは透明度を指定するもので1が100%、あとはどれくらいの透明度にするかで小数点で書きますのでカンマではなくドット（ピリオド）です。
これでtext-shadowも当たるはず。あとはCSSファイルのリンクだけです。
追記：
カンマとピリオドでは意味が全く違ってきます。
カンマは引数や設定などの区切りとして使われピリオドだと機能の呼び出し、オブジェクトのプロパティの呼び出しなどになります。
プログラムは指示したとおりにしか動きません。「それっぽいもの」は「それ」ではないのでプログラムとしてはNGになります。
それぞれ記号1つ1つにも意味がありますので、教本をうつすことだけに囚われず、意味をかみ締めながらコードを書いていってください。
投稿2018/08/30 06:16
編集2018/08/30 06:29総合スコア80850
0
とりあえずchrome+codepenで提示のソースを動かしてみましたが普通に動きますね。
考えられるのはlinkタグにtype="text/css"が足りないとかcssのパスが間違っているとか。
あと、←ボタンを押したときのイベント、alertはwindow.つけなくても動くのでぱっと見わかりませんが、2行目がピリオドではなくカンマで連結されていますよ。
投稿2018/08/30 06:19
編集2018/08/30 06:20
総合スコア672
エラーでないから気づきにくいところですね。
私も気づきませんでした＾＾；
codepenである程度構文チェックしてくれるので1行目と2行目の色が変わって気づきました。
逆に僕はあまりにも普通にカンマ区切りで続いてたのでtext-shadowに気づきませんでした。。。
こっちはエラーで反映されないのに「普通に動く」と言ってしまいましたorz
回答に「text-shadowはともかく」って書いたあとに色々検証してみた結果気づけました。
使えなかったっけ？いやそんなはずは、で。色かえたり、サイズかえたり、透明度かえたり。
RGBAの引数的には透明度指定が0なのでシャドウかかってないように見えるので正しいんですよね。0%なので。
引数多くてもエラーにはならないみたいで、いずれにしても気づきにくい部分ですね。
そうですね、確かに引数多くてもエラーになっていなかったです。
コピペでぱっと確認するにももう少し注意深くあるべきだと再確認ですね。
質問者様は病院との事で進むのは夜ですかね。
実はソースの方が正解でファイル名をスペルミスでviwer.cssとかにしている可能性もありそう。
そうですね。
出ている回答でおそらく解決しそうには思います。
0
ソースを実際に動かしてみたら、色が変わり正常に動きました。
そうすると、「viewer.css」の置き場が怪しいのですが、htmlファイルと同じ階層に置いてますか？
同じ階層に置いてあれば、動作すると思います。
後はブラウザ標準のデベロッパーツールで、エラーが出ていないか確認すると良いです。
投稿2018/08/30 06:19
編集2018/08/30 06:20
総合スコア181
0
皆様、初心者の私に直ぐに解答を頂き本当にありがとうございます。
どの方のご指摘も大変勉強に、また参考になりました。
どなたにもベストアンサーをさしあげたいです。
今回は実際にコードを動きを見せて頂いたlive As Notes様にさせて頂きます。
スーパーリロードを教えてくださったのも親切に思いました。
検証の結果、ご指摘の通り,と.の違いと何ともお恥ずかしい限りですが
HTMLとCSSが同じ階層に入っていませんでした。
理由はviewer.cssの書き間違いでviwerになっていました。
2点を直したら正常に最初にNo.1がgreenにNo.2がRedの影付きで画像も変わりました。
投稿2018/08/30 11:28
総合スコア13
あなたの回答
tips
プレビュー
