コーディング初心者がやりがちなミスまとめ(HTML, CSS, JavaScript/jQuery対応)

2019.06.19  /  2019.06.29 HTML・CSS
コーディング初心者がやりがちなミスまとめ(HTML, CSS, JavaScript/jQuery対応)

コーディングをしていると、

困っている受講生
なんで反映されないんや…!

とか、

困っている受講生
思ったようにどうしてもならない。なんで?????

みたいな場面にたくさん遭遇すると思います。

でも、原因がわかってしまえば「あれ、なんだこんなことか」と拍子抜けするようなミスも多々あり。

私も時々やらかします。

ただし「言われてみれば簡単」なミスほど、なかなか気づかないもの。

そこで、初心者がやりがちな「あるあるミス」を集めました。

藤ミヤチ藤ミヤチ
原因がわからないエラーほど、あらためて確認すると簡単なミスなことも多いよ。この記事のチェックリストを活用してみてね

コーダー初心者がよくやってしまうミス〜HTML編〜

HTML部分で気をつけてほしいのは、以下の6点です。

  1. 適切なstyle.css, script.jsを読み込めているか?
  2. jQueryを読み込んでからscript.jsを読み込んだか?
  3. head部分で文字コードの宣言をしたか?
  4. head部分でviewportの宣言をしたか?
  5. 閉じタグ忘れはないか?
  6. クラス名に間違いはないか?

あらためて書くと「まさか……」と思ってしまう部分もありますが、意外とそれが落とし穴であることもあります。

ただし、それぞれ簡単に確認する方法があるので、説明していきますね。

適切なstyle.css・script.jsを読み込めているか?

困っている受講生
CSSが効かない!jQueryが動かない!

そういうときは、まず「そもそもhead部分できちんと読込できているか」を確認しよう。

確認する方法はすごく簡単。

実際にブラウザでページを開き、適当な場所(画像以外の場所)で右クリックします。
そして「ページのソースを表示」を選択。

すると、サイトのソースコードが見れますよね。
ここで、注目してほしいのは実際にCSSやJSファイルを読み込んでいる部分です。

miyachieve.comのソースコード
https://miyachieve.com のソースコード

CSSやJSファイルを読み込んでいる部分は赤枠のところです。

実際に、ファイルへのパス部分がリンクになっているので、そこをクリックしましょう。

クリックした結果、CSSやJSファイルの中身がブラウザに表示されれば問題なし。
「ファイルが見つかりません」というエラーが表示されれば、パスが間違っているので修正しましょう!

jQueryを読み込んでからscript.jsを読み込んだか?

ふとした瞬間にやりがちです。

jQueryはかなり便利ですが、サイト上でいきなり使おうとしてもうまく動きません。
きちんと設定ファイルを読み込んでから使う必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

などの部分ですね。

この読み込みを忘れがちなので、

困っている受講生
jQueryが動かない…

という場合は、いったん確認してみるといいと思います。

head部分で文字コードの宣言をしたか?

文字化けのときは、ほぼ100%これが原因です。

head部分で文字コードを宣言しないと、ページ内のテキストが文字化けします。

wikipediaの文字化け

こんなときは、迷わずhead部分に以下を追加しましょう。

<meta charset="UTF-8">

閉じタグ忘れはないか?

はい、これもやりがち。

タグを書いて、消して、組み直して…とやっていると、ついつい間違えてしまいます。
ただし、これはすぐ気づきにくいのが難点。

閉じタグ忘れに気づくには、ソースコードのインデントを揃えるのが有効的です。

例えば、以下のようにインデントをきちんと揃えていないと、何がどうなっているかわかりにくいですよね。

インデントを揃えないコードの例

実は、上のコードには閉じタグ忘れがあるんです。
インデントを揃えてみます。

インデントを揃えたコードの例

先程のコードに、</p>タグが足りませんでした。
一番最後の </div> の直前で、一段ずれているのがわかりやすくなっていると思います。

閉じタグを忘れていると、思わぬところで入れ子状態になり、デザインが崩れてしまう原因になります。

藤ミヤチ藤ミヤチ
インデントを揃えるのは面倒に思えるかもしれないけど、エラーの温床をつくらないために習慣づけておこう

クラス名に間違いはないか?

クラス名のスペルミスタイプミスはよくあること。

「step-up」のつもりで「stpe-up」になっていたことに気づかず30分以上を浪費してしまったケースもあります。

困っている受講生
いろいろ試しているのに、何の変化もない…

となった場合は、まず「クラス名に間違いがないか?」を気にしてみてください。

本当に、意外とあるんです。
気づいてさえしまえば、直すのは一瞬なのですが…。

藤ミヤチ藤ミヤチ
「何かおかしい」と思ったら、私はまず一呼吸おいて、真っ先にクラス名のミスがないか確認するようにしているよ

コーダー初心者がよくやってしまうミス〜CSS編〜

続いて、CSSファイル内でやりがちなミスをまとめました。
以下の7個です。

  1. 最初に文字コードの宣言はしたか?
  2. } で閉じ忘れ、プロパティの最後に ; のつけ忘れはないか?
  3. : と ; を間違えて書いていないか?
  4. プロパティ名のスペルミスはないか?
  5. クラス名間違いはないか?
  6. 全角スペースが紛れ込んでいないか?
  7. # と . を書き間違えていないか?

最初に文字コードの宣言はしたか?

HTMLと同じで、文字コードの宣言は必ず必要です。

どんなCSSを書くよりも先に、

@charset "UTF-8";

を入れましょう。

藤ミヤチ藤ミヤチ
ついつい忘れがちなので、「あれ?」と思ったら見直すとGOOD

} で閉じ忘れ、プロパティの最後に ; のつけ忘れはないか?

↓のコードに、1か所エラーがあります。

.sample {
  margin: 40px auto;
  font-size: 18px;
  font-weight: 700
  color: #353535;
}

font-weight: 700 のあとに ; がありません。

ブラウザ側からしたら読み込みできないのでエラーとなってしまいます。

複数行のCSSを書いているとどうしても忘れてしまうことがあるので、ふとした瞬間に確認する癖をつけるといいと思います。

: と ; を間違えて書いていないか?

: と ; の書き間違いはよくやってしまうかと思います。

日本語キーボードでも、英語キーボードでも、: と ; はかなり近い場所にあります。
そして、画面上ではぱっと見ただけだと判別しづらい。

ゆえに、いつまで経っても気づかないエラーになってしまいます。

そこで「何故か変わらない」と思ったら、その部分を指定しているはずのCSSを落ち着いて確認してみましょう。

クラス名間違いはないか?

HTML編でもあげましたが、クラス名のスペルミスはありがちです。

「template」と打ち込んだつもりで「tempalte」になっていたり、「position」が「postiion」になっていたり。

残念ながらよくあります。

・・・何度でもいいます。
書き間違いは多いです。

そのため、まず「書き間違えていないか?」は確認しましょう。

全角スペースが紛れ込んでいないか?

プログラミングにおいて、全角スペースは敵です。

↑のツイートがバズるくらい、プログラミングにおいて全角スペースは嫌なヤツです。

ただし、これ気づきにくいんですよね…。

.sample {
  margin: 0 auto;
  border: 1px solid #353535;
  background: #fff;
}

実は、↑のコードの中に1箇所だけ全角スペースが紛れ込んでいます。
そのせいで、CSSがきちんと反映されません。

どこだと思いますか?

……

実際に全角スペースになっているのは、margin: のあとの空白です。

.sample {
  margin: 0 auto;
  border: 1px solid #353535;
  background: #fff;
}

↑が全角スペースを半角スペースに直したものです。

困っている受講生
……わかりにくい

だからこそ、なかなか解決できないエラーになってしまうんです。

そこで、私は「あれ、おかしいな」と思ったら、エディターの一括置換機能で、全角スペースを半角スペースに置き換えるようにします。

実際にどこに全角スペースがあったかはわかりませんが、全角スペースが紛れ込んでいれば自動で半角スペースに置き換わるのでエラー解消となります。

一括置換はオススメ。

# と . を書き間違えていないか?

idとclassの間違いですね。

HTML部分ではclassで設定しているのに、CSSではidとして設定していることがよくあります。
逆もまた然り。

<h1 class="title">サンプルタイトル</h1>
#title {
  font-weight: bold;
}

これでは、想定している形になりません。
ただし、書いている途中では気づかないことが多い。

わからない受講生
CSSを書いても書いても反映されないの、なんで?

という場合は、# と . の書き間違いを疑ってみてください。

コーダー初心者がよくやってしまうミス〜JavaScript/jQuery編〜

次に、JavaScript/jQueryでやってしまいがちなミスをまとめました。
以下の5点が「あるあるミス」です。

  1. # と . を書き間違えていないか?
  2. 最後の ; を書き忘れていないか?
  3. }); で閉じ忘れていないか?
  4. スペルミスはないか?
  5. 大文字と小文字を書き間違えていないか?

JavaScriptやjQueryの場合は、ブラウザの検証モード(Console)で見ると赤い文字で「○○な場所がおかしい」と言われることが多いです。

consoleでのJSエラー

Console部分にかかれていることがエラー解消の手助けになることが多いですが、改めて「どんなミスをしやすいのか」をまとめました。

# と . を書き間違えていないか?

CSS編の最後でも載せましたが、idのときの「#」と、classのときの「.」の書き間違いは多いです。

<div id="to-top">トップに戻るボタン</div>
$(function(){
  // ボタンクリックで、ページ最上部まで移動
  $('.to-top').on('click', function(){
    $('html,body').animate({scrollTop:0}, 500, 'swing');
  });
});

例えば、↑のコードに文法的なミスはありませんが、いつまでたっても動作しません。

そのため、

わからない受講生
なんで動かない????

という沼にはまってしまうことがあります。

$(‘.to-top’) という部分で「#」と「.」を間違えているだけで、文法的なミスがないからこそ気づきにくいです。

JavaScript/jQueryが動かないときは、まずそもそものターゲットとなっている要素( $(‘.to-top’) の部分)に間違いがないか確認する癖をつけましょう。

最後の ; を書き忘れていないか?

JavaScriptやjQueryでは、一つのプログラムが終わるごとに ; を書くルールになっています。

ただし、一気にたくさんのコードを書くと、ついつい ; は忘れがち。

; が1か所ないだけで、プログラムは動かなくなってしまいます。

つまり、

$('body,html').scrollTop(0);

↑は動きますが、

$('body,html').scrollTop(0)

↑はきちんと動きません。

わからない受講生
ん?当たり前じゃん?

と思うかもしれませんが、実際のところ書き忘れは多いです。

※ちなみにif文やeach文などの終わりに書く } には ; が必要ないので、注意してください。

}); で閉じ忘れていないか?

HTMLの閉じタグや、CSSでの ; 忘れと同じく、JavaScritpやjQueryでも }); で閉じ忘れることがままあります。

これは、一度書いたコードを手直しする場合に発生することが多いです。

そうすると、基本的に閉じ忘れたあとに記載したJavaScriptがすべて死にます。

触っていない場所も動かなくなったときは、閉じ忘れを疑ってみてください。

スペルミスはないか?

HTML編・CSS編でも言いました。
くどいくらい言います。

スペルミスはやりがちです。
馬鹿みたいですが、本当に多いです。

悲しいかな、プログラムは書いた通りにしか動きません

「tempalte」ってつまり「template」のことだよね?
……なんて忖度は一切ありません。

ただし、実際にスペルミスに気をつけるだけでエラーはかなり減らせるので、気をつけてください。

くどいとわかってて言います。

藤ミヤチ藤ミヤチ
スペルミスには本当に注意…!

大文字と小文字を書き間違えていないか?

JavaScriptやjQueryに慣れていない初心者ほど、大文字と小文字には注意したほうがいいと思います。

例えば、

$('body,html').scrollTop(0);

↑は動きますが、

$('body,html').scrolltop(0);

↑は動きません。

違いは scrollTop の T が大文字になっているか、なっていないか、です。

プログラムは馬鹿正直なので、「scrolltop」と「scrollTop」は別物として扱います。

JavaScriptでは、単語(scroll)と単語(top)を続ける言い方をするときは、2語目よりあとはすべて最初の一文字が大文字になる、というルールがあります。

HTMLでは動作上、大文字と小文字の違いは大きくありませんが、JavaScript/jQueryでは厳密に別のモノとして認識されるので注意してください。

コーダー初心者がよくやってしまうミス〜その他〜

困っている受講生
上記のチェックリストはOKなのに、まだうまくいかない…

そんなときは、最後に1点だけ確認してみてください。

キャッシュが残っているせいで反映されていないだけじゃないか?

キャッシュとは、一度見たことのあるサイトのデータをパソコンの中に一時的に保存しておいて、また同じページを開くときにすばやく見れるようにするシステムです。

これはかなり便利なんですが、サイトを制作するときには邪魔になってしまうことがあります。

つまり、前にそのページを開いたときのキャッシュが残っている影響で、コードを書き換えた点が反映されないんです。

特に画像のキャッシュはかなり影響するので、ときどき差し替えたはずなのに前の画像が表示され続けることもあります。

変更がいつまで経っても反映されないときは、「Ctrl/Command + Shift + R」を押して、キャッシュを無視したページの再読込をしてみてください。

藤ミヤチ藤ミヤチ
「何故か変わらない」ときは、キャッシュが原因かもしれないよ

簡単なミスほど気づきづらいので、慌てずに確認していこう

ここまでで、HTML・CSS・JavaScript/jQueryなどにわけて、初心者がやってしまいがちなミスについてまとめました。

サイト制作/プログラミングは、基本的にエラーとの戦いです。
そして、原因がわからなければたった1つのエラーに数時間〜1日を費やしてしまうこともあります。

やっかいなことに、簡単なミスほど気づきづらい……

困っている受講生
何かおかしい…

と思ったら、まずこの記事のチェックリストを見てケアレスミスでないか確認してみてくださいね。

藤ミヤチ藤ミヤチ
あるあるミスにきちんと気づけるかどうかで、コーディングのスピードが変わってくるよ
スキルアップしたいサイト制作者
向けの情報をつぶやくよ 藤ミヤチのTwitter
(ここをクリック/タップ)
シェア


この記事も参考になるかも
CSSのIDとclass(クラス)の使い分けは、完成後の保守性まで考慮に入れて決めよう
SEO対策のためのmetaタグはこう書く!効果のある記述方法を丁寧に解説
CSSでデザインが崩れた!余白paddingが原因のデザイン崩れは、簡単に解決できる