- 公開日：2016-3-9 最終更新日：2016-9-10
- プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ
プログラミング初心者が最初にぶつかる壁が文法ミスではないでしょうか。今回は、初心者が間違えやすいHTMLとCSSの文法を説明します。さらに、自分が書いたコードを正しい文法が使われているかチェックできるサービスを紹介します。
HTMLで間違いやすい文法
以下のコードを読んで、文法ミスがいくつあるか数えてみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <title>プロスタ</title> <meta 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>タグの順番が間違っています。
CSSで間違いやすい文法
上記のHTMLのコードのh2タグで囲まれた文字を赤色にするCSSコードを書きました。こちらも文法ミスがあるので探してみてください。
|
1 2 |
#a{ color:red |
スタイルの閉め忘れ
}を入れ忘れています。
セミコロンがない
末尾にセミコロンが記入されていません。
IDとclassの指定を間違えた
aの属性はIDではなくclassなので、#aではなく.aと記述します。
HTMLの文法チェッカー
HTMLの作成が終わったら、正しく構文が書かれているかチェックしましょう。構文のチェックには下記のサイトが便利です。
Another HTML Lint – Gateway
Another HTML Lint – Gatewayは調べたいURLやソースコードを入力するかファイルをアップロードすることで文法ミスをチェックし点数化してくれるサイトです。自分で見ただけでは見落としそうなタグの閉じ忘れなどのミスを教えてくれます。
The W3C Markup Validation Service
Web技術の標準化を推進するW3Cがフリーで公開しているHTMLの文法をチェックできるサイトです。英語なのでちょっとわかりづらいですが、W3Cが提供しているため、多くの人に利用されています。
The W3C Markup Validation Service
HTMLエラーチェッカー
HTMLエラーチェッカーは、ブラウザから閲覧するだけでHTMLの文法ミスを自動でチェック出来るGoogleChromeの拡張機能です。
HTMLエラーチェッカー
HTML Validator
HTML ValidatorはFirefoxのアドオンです。このアドオンがあれば、HTMLコードに文法ミスがあった時にその場で警告してくれます。
HTML Validator
CSSの文法チェッカー
W3C CSS 検証サービス
The W3C Markup Validation Serviceのcssバージョンです。CSSの間違いを日本語で表示してくれるので使いやすいツールです。
【オススメ記事】
➡︎【HTML】ホームページの画像が表示されない原因とその対処法
➡︎ プログラミング入門講座①「HTMLとは〜概要と基本構造〜」
➡︎ プログラミング入門講座②「HTMLの覚えておきたいタグ一覧」
➡︎ 無料で使える！HTMLの学習サイトBEST7
➡︎ 初心者におすすめ！HTMLを勉強できるスクール17選
プログラミングで挫折しそうなら、現役エンジニアにマンツーマンで相談してみませんか？オンラインのプログラミングスクール「TechAcademy」のメンターが対応。
この記事が気に入ったら
いいね！しよう
プロナビの最新情報をお届けします
