作ったHTML5がうまく動作しない時どうするか？
よく質問を受けるのですが
「先生〜うまく動きません！」
私がいれば、「どれどれ」と一緒にPCに向かって解決するのですが、私がいなかったり、独学だったり、遠隔だったり、社会に出たりすればそうも行きません。そんなとき学生自らが自力でどう解決するかを考えてみます。内容は順次追加します。
１．原因
HTML、CSS、JavaScriptでは、動作しない原因は次のケースかなと思います。
1-1. スペルミス
これが圧倒的です。スペルミスの中でも、例えば
☑ HTMLやCSSは半角の英数字で記述しますが、誤って全角文字で記述した。
☑ JavaScriptは英字の大文字・小文字の区別は厳格です。小文字で記載するところを大文字で記述していると動作しません。
☑ 終了タグのスラッシュ「/」を入れ忘れた。
<div></div>→<div><div>みたいに。
☑ コロン(:)とセミコロン(;)の間違い。CSSで多い。
☑ IDやクラスのセレクタの名前の間違い。これもCSSで多い。JavaScriptでは変数の名前間違いも多いですね
☑ 全角の空白文字を入力してしまった。HTMLの開始タグの属性との間に入れちゃうと動かない。しかも見つけにくい。CSSでも同様。
☑ 間違えやすい文字の入力間違い（エル「l」やアイ「I」や数字のイチ「1」、オー「0」とゼロ「0」など。外人さんはどうしてこんなわかりにくい文字を・・・モニョモニョ）
1-2. パスのミス
例えば、他のファイルを参照する属性があります。(srcとかhref)。参照先にファイルがなければ画像やリンク先のページが表示されません。
同じ階層（＝フォルダやディレクトリと言います）に参照先のファイルがいるのであれば
<img src="gazou.png" alt="画像">
でOKですが、下の階層「hoge」の中であるならば、
<img src="hoge/gazou.png" alt="画像">
ですし、上の階層（=「../」となる）でしたら
<img src="../gazou.png" alt="画像">
です。相手が見つからなければ、どこかに隠れている可能性は高いでしょう。この「フォルダ・ディレクトリ」はなかなか難しいですが、なれましょう。
1-3. ファイルサーバ上で動作しない
PC上で動作して、サーバにアップロードしたら、動作しないケースがあります。そんなときは、ファイルをすべてアップロードしているか確認してみてください。アップロードできていてもファイル名の大文字小文字の区別がきちんとされているかも確認しましょう。開発者ツールを使えばおおよその問題の行がわかるでしょう。
1-4. カッコがペアになっていない
例えば、(〜)や{〜}、"〜"や'〜'など、カッコや引用符がペアになっていないと当然おかしなことになります。例えば
だと、href属性の値が「https://example.jp>サンプルサイト</a>」になってしまい、アンカーテキスト「サンプルサイト」も表示されず、リンクも期待通りにはなりません。
またJavaScriptでも丸括弧のペアを間違うと期待通りになりません。
if(a===b) && (c===d)){処理A;}
入れ子状態の丸括弧ですが「(」の数は2、「)」の数は3と一致していませんので、これは誤りです。
1-5. 操作ミス
例えばエディタでファイルを作成し、ブラウザで確認する際、ファイルの保存とブラウザの更新という作業が入ります。これをスルーすると当然反映されていませんから動かない可能性があります。
また、エディタで編集しているファイルとブラウザで閲覧しているファイルが違うものというケースが結構ありますから注意しましょう。
さらに、Windowsの場合、zipファイルに入っているサンプルファイルを解凍・展開しないまま、中のファイルをエディタで開き、保存できないというケースもまれにみます。かならず解凍・展開して使用しましょう。
それから、例えばCSSの「:hover」はマウスを対象要素の上に重ねないと動作しませんし、JavaScriptもボタン・要素を押す等の操作をしないといけません。それをしなければ当然動きませんよね。
1-6. 拡張子
そうそう、Windowsに多いのですが、PCの「拡張子を表示しない」設定になっていることが多いです。「拡張子を表示する」設定にしましょう。ファイル名を「index.html」と作ったつもりが、実際は「index.html.html」とか「index.html.txt」とかになってしまいます。
Winowsに関しては、
適当なフォルダを開き、
メニューバーの「表示」タブ
→右端の「オプション」
→フォルダーオプションの「表示」タブ
→「詳細設定」の下の方「登録されている拡張子は表示しない」のチェックを外せば、
拡張子は表示されます。
また、拡張子が間違っていると表示されないですね。HTMLファイルの拡張子は〜.html（または〜.htm）です。htmlは「Hypertext Markup Language」の略ですね、この拡張子であればブラウザはHTMLの文書だと認識してブラウザに表示してくれます。
ファイル名の付け方も半角英数の小文字、「-」「_」になります。それ以外の文字や全角文字は避けたほうが無難でしょう。ちなみにPCでは大文字小文字の区別はありませんが、サーバ上では大文字小文字の区別がありますので、PCで見えるのにサーバで見えなくなるというケースが見られます。
さらに、大文字小文字にも気をつけてください。PC上では「img.jpg」と「img.JPG」は同じもの、サーバー上では違うものとして扱われます。
また「index.html」は特別なファイル名で、そのサイト、ディレクトリのトップページというものになり、ディレクトリ内で記載を省略することができます。例えば 「https://yahoo.jp」と「https://yahoo.jp/index.html」は同じですので知っておくといいでしょう。
1-7. 参考テキストのミス
テキストにはミスがあります。どんなに目を皿のようにしてチェックしてもミスはあります。テキストを作った本人が言うのですから間違いありません。ですから正誤表をチェックし、まわりの友達にも聞いて同様の状況でしたら、執筆者に優しく問い合わせましょう。
1-8. コード記述漏れ
灯台下暗しですね。写経（コードを書き写すこと）中に、コードをうっかり１行書き忘れてしまうと、当然期待通りの動作はしないでしょう。集中して、１行、２行チェックを行いながら書き漏らしのないように、目を皿のようにして確認しましょう。
２．解決方法
ではどうするかですが、上記の原因を確認してもらえれば、おのずと解決するのですが、どうしても見つからないこともあるでしょう。
2-1. お茶しましょう
間違っているときは、視野が狭くなっています。間違っている箇所が目の前にあるのに気が付かない、そんな状態です。そんなときは、お茶してください。時間をおいて見直すと「あら！」とわかることがあります。
2-2. 友達は大事
また、友達に見てもらうのも有効です。もちろん友達が困ってたら見てあげましょう。友達の作り方はいろいろあるでしょうが、SNSでつながったり、勉強会に参加するなどあります。
2-3. HTMLとCSSの検証サービス
HTMLとCSSについては検証サービスがありますので、それを利用しましょう。
Check byの選択で、すでに公開されていれば 「address」、ファイルでチェックしたければ 「File upload」、コピペでしたければ「text input」のタブを選んで見ましょう。問題があればその箇所を指摘してくれますからじっくり確認してください。ちなみに問題なければ「Document checking completed. No errors or warnings to show.」と表示されます。
2-4. JavaScriptのデベロッパツール
JavaScriptはブラウザにデベロッパ（開発者）ツールというツールが内蔵されていますので、それを使用しましょう。
ブラウザ上でコンテクストメニューを開き「検証」をクリックするか、F12キーを押せば右か下にツールの画面が表示されます。
右上に赤い「✗印」が表示されていたらそれをクリックするか「Console」タグをクリックしてください。そうすればJavaScriptで間違えた箇所に関するエラーメッセージとファイル名、そして行数が表示されますから、それを頼りに修正します。メッセージは英語ですが、わからなければそのメッセージをまるごと検索ワードにして検索してみてください。きっとヒントが見つかるはずです。
詳細は次のnoteに投稿しましたので、ご覧ください。
また、このツールはHTMLやCSSの開発にも役立つツールですので興味のある方はググって調べてみてください。
2-5. 最初から書き直す
どうしてもわからない場合もあります。そんなときは、一旦消して作り直しましょう。それでうまく行ったこともあります。
2-6. フォントを変える
半角のつもりで全角を書いてしまうことが多いです。「;」と「；」の区別はエディタではなかなか付きません。そんな時は、フォントを変えるというのも有効です。私は「Source Han Code JP」を入れていますが、初学者には次のフォント「もなかこみフォント」をおすすめします。なんと全角文字は枠がついて半角文字と区別がつくすぐれものです。
2-7. 比較の機能
もし正解のファイルがあって、自分のファイルとどこが違うかを比較したければ、Visual Studio Codeにはファイルを比較する機能を使うというのも一つの方法です。
// いつかこのツールのnoteを書きますね。③
2-8. ラバーダック・デバッグ
また、こんな解決法があります。
①まず、お風呂に浮かべるアヒルくんを買ってきましょう
②PCの画面の前に置きましょう
③素人のアヒルくんにコードを丁寧に説明しましょう
ほら、間違いが見つかった。デバッグ以外にも問題解決の手段として有効そうですね。
３．間違うことは悪いことではない
試験では間違ったら減点ですが、私は学びにおいては、間違うことも学びの一つだと思っています。現場でトラブルが発生した時に対処する能力が高まるからです。
とにかくコードを書いてみて、どんどん間違え、自身で解決しましょう。5~10分で解決しないこともあります。半日、1日、2~3日粘りましょう。
そうすれば、次回はその経験が生きてくるはず。その経験が皆さんの財産になるはずです。
頑張りましょう。
【PR】
①初心者向けHTML5対面教室（東京・大阪）
②HTML5の検定にチャレンジ！（オンライン）
この記事が気に入ったらサポートをしてみませんか？