今日も初心者向けの教本を読み、サンプルコードを書きながら妻がうなっています。
何か違う。
何が？
本に書いてあるデザイン通りにならないの
本に書いてある通りやってる？
僕も経験があるのですが、本の通りに書き写してみてもうまくいかないこと（本に書いてある結果にならないこと）があります。
いくつか原因はあるので説明していきます。
ソースコードが間違っていない？
単純に「書いたソースコードが間違っている」パターンです。
間違いの中にも色々あります。
やりがちなのが（妻も実際に間違えていたのは）こんな感じでした。
<h1>こんにちは</h1>
<h2>こんばんは</h1>
コピー＆ペーストした結果、後方のタグの修正を忘れているよくあるパターンです。
この間違いだとVisualCodeStudioだと誤りだと認識してくれなかったりします。
あとは【<】が余分に入っていたり、後方タグの【/】が入っていなかったり。
ソースコードの間違いについてはテキストエディタが指摘してくれないものは1行1行しっかりと見ていくしかないです。
手順を飛ばしてない？
こちらもITを勉強したての時期で多いのかなぁと思います。
書いてあることが理解できずにその内容にいたるまでの手順をどこかですっとばしてしまう感じです。
こちらも本の前のページに戻ってひとつずつチェックしていくしかないです。
エビデンスを残しておこう
こういう部分で困らないようにするために、実際のITの現場でも行われているのですが、環境構築の手順の一つずつを画面キャプチャで保存しておく、という方法があります。
「エビデンスをとる」って言い方になるときもあります。
WindowsOSのパソコンであれば「PrintScreen」のボタンがあるので、設定する→OKを押す前にキャプチャを撮る→次に進む、ようにした方が後々何かあったときにチェックしやすいです。
とはいえ、PrintScreenでキャプチャとってどっかに貼り付けて、というのはめんどくさいので、WindowsボタンとPrintScreenボタンを同時に押すことでピクチャ内にスクリーンショットフォルダが作成されます。
Windowsの「ピクチャ」フォルダ内の「スクリーンショット」フォルダーに、スクリーンショットがpng形式の画像ファイルとして保存されます。
ファイル名が「スクリーンショット（1）.png」みたいなファイル名で保存されるので、「画面キャプチャ ツール」などで検索すると任意のファイル名で保存ができるようなツールがあったりしますので、興味があればお試しください。
入れたバージョンは合ってる？
今回の原因については、CSSフレームワークのバージョンの違いにより発生したものでした。
書籍の初版が古くて、入れた最新のバージョンとちょっと違った、という感じです。
このあたりは書籍のサポートサイトとかを見てみると、改定情報や補足が書いてあったりするので、該当のページで訂正情報がないか探してみた方がいいです。
ちゃんとしっかり進めなきゃダメ？
とはいえ、よっぽど先に進められないということでない限り、多少仕上がりが違ってもそんなに気にすることはないです。
本の通りに完成させることがゴールではなく、内容を理解することが勉強の目的なので、そこで時間をとるくらいであればどんどん進めましょう。