【プログラミング教育ナビ】は、プログラミング初心者が自分に合った勉強法や教室を見つけられたり、プログラミングに特化した求人が検索できたり、SaaSの比較ができるサイトです。人気講座のある入門スクールや独学できる学習サイトを、口コミ・評判で比較してランキング形式でご紹介しています。言語から探す場所から探す条件から探すrsstwitterfacebook案件獲得できなかったら全額返金!未経験からプロのエンジニアスキルを身につけ、フリーエンジニアとして稼げるまで徹底サポート。プログラミング初心者向け技術系ノウハウ・まとめTweetPocketプログラミング初心者が最初にぶつかる壁が文法ミスではないでしょうか。今回は、初心者が間違えやすいHTMLとCSSの文法を説明します。自分が書いたコードを正しい文法が使われているかチェックできるサービスを紹介します。以下のコードを読んで、文法ミスがいくつあるか数えてみてください。charset="UTF-8"></head><body><h1>プロスタいいね</h1><h2class=“a>プロスタいいね</h2><p>プロスタいいね<p>プロスタ<strong>いいね</p></strong></body></html>開始タグ・終了タグの<~>の中で全角スペースが使われているbodyタグの開始タグが全角になっています。タグ内のタグ名と属性や属性同士が半角スペースでわかれていないh2とclassがくっついています。引用符の閉じ忘れclass=”a”の引用符(ダブルクオーテーション)を書き忘れています。終了タグを書き忘れている初心者に最も多いミスがタグの閉め忘れです。構造が複雑になればなるほど忘れやすくなるので注意しましょう。終了タグの</p>を書き忘れています。入れ子タグが間違っている<p>タグと<storng>タグの順番が間違っています。上記のHTMLのコードのh2タグで囲まれた文字を赤色にするCSSコードを書きました。こちらも文法ミスがあるので探してみてください。color:red12#a{color:redスタイルの閉め忘れ}を入れ忘れています。セミコロンがない末尾にセミコロンが記入されていません。IDとclassの指定を間違えたaの属性はIDではなくclassなので、#aではなく.aと記述します。HTMLの文法チェッカーHTMLの作成が終わったら、正しく構文が書かれているかチェックしましょう。構文のチェックには下記のサイトが便利です。Gatewayは調べたいURLやソースコードを入力するかファイルをアップロードすることで文法ミスをチェックし点数化してくれるサイトです。自分で見ただけでは見落としそうなタグの閉じ忘れなどのミスを教えてくれます。ServiceWeb技術の標準化を推進するW3Cがフリーで公開しているHTMLの文法をチェックできるサイトです。英語なのでちょっとわかりづらいですが、W3Cが提供しているため、多くの人に利用されています。ServiceHTMLエラーチェッカーHTMLエラーチェッカーは、ブラウザから閲覧するだけでHTMLの文法ミスを自動でチェック出来るGoogleChromeの拡張機能です。ValidatorはFirefoxのアドオンです。このアドオンがあれば、HTMLコードに文法ミスがあった時にその場で警告してくれます。Serviceのcssバージョンです。CSSの間違いを日本語で表示してくれるので使いやすいツールです。投稿者:プログラミング教育ナビ編集部tweetプログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか?オンラインのプログラミングスクール「TechAcademy」のメンターが対応。人気の記事まだデータがありません。【プログラミング教育ナビ】は、プログラミング初心者が自分に合った勉強法や教室を見つけられたり、プログラミングに特化した求人が検索できたり、SaaSの比較ができるサイトです。人気講座のある入門スクールや独学できる学習サイトを、口コミ・評判で比較してランキング形式でご紹介しています。