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

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

ただいまの
回答率

90.35%

  • JavaScript

    22079questions

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

  • HTML5

    5617questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2864questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTMLにCSSの指示を反映させたい

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 694

makoto527

score 11

入門者の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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • makoto527

    2018/08/30 15:17

    Atomで入力してますが1<!DOCTYPE html>が最初のコードです。

    キャンセル

  • m.ts10806

    2018/08/30 15:19

    なるほど。Bracketsで確認しているのですが <!の前に赤点が表示されたので、何か入っているのかなと思いました。ひとまず、既にコメントしたとおり、コードブロック内はコードのみにしてください。

    キャンセル

  • makoto527

    2018/08/30 15:24

    mts10806様ありがとうございます。早速修正致します。これから病院なので検証後改めてお礼申し上げます。

    キャンセル

回答 5

checkベストアンサー

+3

CSSを直に書き込めば普通に動いたので,キャッシュが効いているだけだと思います
イメージ説明

キャッシュ削除・スーパーリロード等を試してみてください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/30 15:21 編集

    おそらく,前回読み込んだCSSにno1の部分しか書いていなかったのではと思われます

    gif画像のものは,HTML,CSSの記述内容自体は書き換えていないため(書く場所はちょっといじりましたが),純粋に「.no2」だけが効いていなかったものと考えられます

    キャンセル

+3

質問の見栄え部分で色々とコメントさせてはいただきましたが、先んじてコードを確認させていただきました。
CSSをHTMLに直に埋め込む形だとtext-shadowはともかくcolorは当たっています。
CSSが「置いてある場所をHTMLから正しくパス指定できていない」「そもそもCSSファイルがそこに存在しない」「CSSファイルが破損している」のいずれかではないでしょうか。

text-shadowの色指定ですが最後は0,5ではなく0.5ですね。
これは透明度を指定するもので1が100%、あとはどれくらいの透明度にするかで小数点で書きますのでカンマではなくドット(ピリオド)です。

これでtext-shadowも当たるはず。あとはCSSファイルのリンクだけです。

追記:
カンマとピリオドでは意味が全く違ってきます。
カンマは引数や設定などの区切りとして使われピリオドだと機能の呼び出し、オブジェクトのプロパティの呼び出しなどになります。
プログラムは指示したとおりにしか動きません。「それっぽいもの」は「それ」ではないのでプログラムとしてはNGになります。
それぞれ記号1つ1つにも意味がありますので、教本をうつすことだけに囚われず、意味をかみ締めながらコードを書いていってください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

ソースを実際に動かしてみたら、色が変わり正常に動きました。

そうすると、「viewer.css」の置き場が怪しいのですが、htmlファイルと同じ階層に置いてますか?
同じ階層に置いてあれば、動作すると思います。

後はブラウザ標準のデベロッパーツールで、エラーが出ていないか確認すると良いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

とりあえずchrome+codepenで提示のソースを動かしてみましたが普通に動きますね。
考えられるのはlinkタグにtype="text/css"が足りないとかcssのパスが間違っているとか。
あと、←ボタンを押したときのイベント、alertwindow.つけなくても動くのでぱっと見わかりませんが、2行目がピリオドではなくカンマで連結されていますよ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/30 15:53

    回答に「text-shadowはともかく」って書いたあとに色々検証してみた結果気づけました。
    使えなかったっけ?いやそんなはずは、で。色かえたり、サイズかえたり、透明度かえたり。
    RGBAの引数的には透明度指定が0なのでシャドウかかってないように見えるので正しいんですよね。0%なので。
    引数多くてもエラーにはならないみたいで、いずれにしても気づきにくい部分ですね。

    キャンセル

  • 2018/08/30 16:01

    そうですね、確かに引数多くてもエラーになっていなかったです。
    コピペでぱっと確認するにももう少し注意深くあるべきだと再確認ですね。

    質問者様は病院との事で進むのは夜ですかね。
    実はソースの方が正解でファイル名をスペルミスでviwer.cssとかにしている可能性もありそう。

    キャンセル

  • 2018/08/30 16:24

    そうですね。
    出ている回答でおそらく解決しそうには思います。

    キャンセル

+1

皆様、初心者の私に直ぐに解答を頂き本当にありがとうございます。
どの方のご指摘も大変勉強に、また参考になりました。
どなたにもベストアンサーをさしあげたいです。
今回は実際にコードを動きを見せて頂いたlive As Notes様にさせて頂きます。
スーパーリロードを教えてくださったのも親切に思いました。
検証の結果、ご指摘の通り,と.の違いと何ともお恥ずかしい限りですが
HTMLとCSSが同じ階層に入っていませんでした。
理由はviewer.cssの書き間違いでviwerになっていました。
2点を直したら正常に最初にNo.1がgreenにNo.2がRedの影付きで画像も変わりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    22079questions

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

  • HTML5

    5617questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2864questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。