初心者がゼロから始める【HTML】プログラミング【学習2日目】構文チェック方法解説

こんにちはryomaです。

HTMLの学習を初めて、2回目の動画学習が終わりました。
教材通りに進まずに「何が違う」のかがわからずに止まってしまうことありますよね。
実際に私も</body>の『/』が抜けているだけだったりして「なんだ・・これかぁ」となりました。

学習する上で、自分で間違いに気づくことは重要なことではあると思いますが、時間の無駄にもなってしまいます。
例えば上記の</body>でいうなれば「エディタの文字サイズがもっと大きければわかりやすいのに！」や「構文チェックができたらいいのに！」と感じました。

今回は文字サイズの変え方から、この<要素>なんだっけ？などの【初心者】が困りそうな部分と解決策を紹介していきます。

Visual Studio Codeの文字サイズの変え方

フォントサイズは好みで、私は大き目が見やすいので初期設定よりも大きくしました。

左下にある歯車のマークから『設定』を選びます。

Editor:Font Sizeとあるので四角の中の『24』の部分を好きなサイズに変更してください。

要素の意味を検索する

例えば<p>の要素ってなんだっけ？となった時には、Googleで【html mdn p】と検索します。

mdnについてはこちらからアクセスできます。

このようにHTMLにおける<p>要素について解説してくれています。

HTMLの構文チェック方法

HTMLの構文チェックはMarkup Validation Serviceというサイトで行えます。HTMLの規格を管理しているW3Cの公式ツールなので、信頼性があるので困った時には使ってみましょう。
※無料で使えます

3つあるタブのうち、一番右のタブを選択します。

実際に間違ったコードを貼り付けてチェックしました。

下にスクロールすると間違っている可能性がある部分が「黄色」く表示されており、一番下までスクロールするとソースがあります。

サイトは英語表記なので、わかりにくい方はGoogle翻訳やクロームの拡張機能を使って日本語にしてみてください。