はじめに

プログラムは思った通りに動くのではない。書いたとおりに動くのだ。

えらいひとは言いました。

ちゃんと書いたのに、写したのに、コピペしたのに思った通りに動かない！
そんなときに確認してほしいことをリスト化しました。

本当にいたいけな初学者向けです。
（情報工学徒でもない限りQiitaみてないって？）

環境

エディタ：VSCode
拡張機能：LiveServer（簡易ローカルサーバ）

Level1

誤字脱字はありませんか？

思った通りに動かないランキングぶっちぎりNo.1だと思います。
タグで囲ったところが全体的にcss当たってないときはまず疑いましょう。
htmlとcssでビミョーにつづりが違うとかありがちです。
htmlで作ったclass名やid名はそのままコピペでcssに貼り付けましょう。

cssファイルではclassは. idは#を付けましょう。

さて、コピペでclass名やid名をcssに貼り付けると何が起こるでしょうか。
そう、.や#の付け忘れです。
また、idなのに.を付けたり、classなのに#を付けたりということも起こります。
h2やpといったHTMLタグには.も#も必要ありません。

cssファイルは読み込みましたか？

全体的にcssが当たっていない、ありのままの姿になっている場合はcssファイルが読み込まれていません。
そもそもcssファイルを読み込むことを忘れている場合と、読み込もうとしたんだけどパスがおかしい場合があります。
後者についてはimg等でも言えることですので、一つの項目として後述したいと思います。

非常に残念ですが、ファイルをディレクトリに置いただけではダメなんです。ご理解ください。

パスは通っていますか？

vscodeだとデフォルトでパスが可視化されます。
『./』(ルートパスで書く場合は『/』)とタイプしてみてください。
ディレクトリやファイルの一覧が表示されますね？あとはクリックを駆使してお望みのファイルまでたどり着くだけです。
（vscodeのスクショを貼る予定）

『./』で何も出てこない？そんな方は続けてお読みください。

root
-index.html
-css
 --style.css
-img
 --bg.png

上記のようなディレクトリ構造で、style.cssからbg.pngを指定したい場合は『../』で一つ上のディレクトリに戻る必要があります。『../img/bg.png』が正しいパスです。

相対パスとか絶対パスとかルートパスの詳しい話は先駆者がたくさんしてくれているので割愛しますが、わたしは親等に近いものだと認識しています。『./』が一親等、『../』が二親等。叔母や兄弟にたどり着くにはその親までさかのぼる必要があるところが少し似ていませんか？

相対パスの考え方について耳寄りな情報を仕入れました。
自分のいる階の自販機にあるコーラを買いに行く場合は『./コーラ』、違う階（仮に3Fとしましょう）の自販機にあるコーヒーを買いに行く場合は、『../3F/コーヒー』。階段の上り下りが『../』を表しているというわけです。そして何階に行きたいか、今回であれば3Fを明示します。コーヒーを買いに行っているときに誰かがあなたを訪ねてくるかもしれませんからね。そしてようやくコーヒーにたどり着けると言うわけです。

Level2

そのタグ、閉じましたか？

はい、Emmetって便利なんです。Emmetさえ使いこなしていれば↑みたいなことは起きようがありません。

【爆速コーディング】Emmetはいいぞ！【HTML編】
Emmetの使い方についてはこちらの記事が参考になります。

Emmetでもオートコンプリート機能でもまあなんでもよいのですが、開きタグ（こんな言い方する？）を作ったならば、閉じタグもその場で作る！！！
これ、参考書を書き写す事の弊害だと思うのですが、まさかEmmetちゃんが作ってくれた閉じタグを消して、１行ずつ上から丁寧に書き写したりしていませんよね？？？

タグはマトリョーシカのように入れ子になっていることを意識してくださいね。
さすれば閉じタグを見失うことはありません。（対応するタグをハイライトする機能もあるしね……）

Level3

そのスペース、必要ですか？

参考書を写してもらっていると、このような質問をいただきます。

hoge.css

.hoge{
    width:100%;   /*a*/
    width: 100%;  /*b*/
}

先生はスペースも含めてそっくりそのまま参考書を書き写すように言いましたが、aにはコロンの後ろにスペースがなくて、bにはあるのですが、なにか違うのですか？

・
・
・

同じです。と申し上げる他ありません。
※特定の書籍を指して苦言を呈しているわけではありません
しかし揃えておくに越したことはないでしょう。

本題は次のセクションにて。

そのスペース、不要ですか？

では、擬似クラスセレクタや疑似要素セレクタではどうでしょうか。

hoge.css

/*c*/
p:before{
    content: '';
}

/*d*/
p :before{
    content: '';
}

そう、cは正解だけど、dはダメなんです。スペースを空けりゃいいって話ではないんです。
反対にスペースが必須な場合もあります。calcの演算子前後はスペース必須です。

hoge.css

.hoge , .fuga{
}

.hoge .fuga{
}

.hoge.fuga{
}

またこれらのカンマ区切り、スペース区切り、区切りなしはどれが正解ということではなく、どれも正しく、そして違う結果になります。
このあたりはおいおい理解していけばよいと思いますが、「参考書のスペースをそのまま書き写すように」と指示を出したのにはこういう理由があります。

もらってきたcssと干渉していませんか？

リセットCSSやCSSフレームワークと干渉していませんか？
講師をはじめて最初にぶち当たったこのカテゴリの問題は、リセットCSSに記述されたword-break:break-word;によって引き起こされていました。
自分で書いてないからわかんないんですよね。
そのうちjsのプラグインなんかでも同じことが起こります。

番外編

とにかく検証ツールだ！

とにかく一度検証ツールをみてほしい。
タグを選択してみて、cssが出てこなかったら基本的には誤字脱字だ。
jsのミスは赤いバツが出る。丁寧にエラーを吐いている行数まで教えてくれる。

拡張機能を入れるときは慎重に、な。

拡張機能ってめちゃくちゃ便利ですよね。しかし、やみくもに入れまくると動かなくなったりします。
そんなときのために設定ファイルなんかのバックアップを取っておくとよいのですが……。
みたこともないディレクトリを探すの、こわいですよね……？

そこで、一番簡単な復旧方法をお教えしましょう！
vscodeをアンインストールして再インストールすることです！！！

・
・
・

【完】