• home
  • tips
  • 誰もが通る道…WEB初心者が犯しやすいHTML&CSSのミスと間違い

誰もが通る道…WEB初心者が犯しやすいHTML&CSSのミスと間違い

2012/04/16 tips
12
誰もが通る道...WEB初心者が犯しやすいHTML&CSSのミスと間違い

こんにちは。コーディングより三度の飯が好き、井畑です。

あ、ご飯ほどでは無いですが、コーディング大好き井畑ですwwただ好きだからと言って得意では無いんですけどね…
未だに悩みながらコーディングやってます。

今回は自分がWEB初心者だった頃によく陥っていた、HTMLとCSSの間違いやミスについてまとめてみました。
正しいHTML&CSSを書くことは基本中の基本ですが、難しい事です。単純に知識不足ということもありますが、イージーミスもなかなか厄介です。間違いのないHTMLとCSSが書ければ、見た目だけでなく、検索順位(SEO)的にも高評価につながります。

自戒をこめてミスまとめリストを公開します。
それではどうぞ！

HTMLの間違い

タグを閉じ忘れる

基本にして究極。初心者がよくやるミスNo１です。実際僕も上手く表示されなくて何時間悩んだことか…orzえぇ…自分を疑うってことを知らなかったんですね…
タグのを閉じるには２通りの方法があり、divやpのように要素を２つのタグでくくるものと、imgやbrのように末尾にスラッシュをつけるものがあります。

<div>残業ってなんだろう…</div>
<img src="images/no-zangyo.jpg" />

あと、僕がいつも使っている、「タグ閉じ忘れチェックするブックマークレート」をご紹介します。これを使えばすぐに間違い箇所が見つかって便利ですよー♪

DOCTYPE宣言を入れ忘れる/間違える

HTMLでは、バージョンごとに使用できる要素(タグ)や属性、要素の配置のしかたについて厳密に定義されています。これはDOCTYPE宣言で指定することで、そのバージョン規則に添って表示します。このDOCTYPE宣言をheaderの中に入れ忘れないようにしましょう。

まぁ…ぶっちゃけ宣言しなくても大抵のブラウザの仕様で表示されると思いますが、あくまでも100%では無いので、必ず書くようにしましょう。せっかく訪れてもらったのにサイトが見れなかったら悲しいですから。

HTML5になってDOCTYPE宣言がかなり簡単になりましたねー♪

HTML 4.01 Transitionalの場合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5の場合

<!DOCTYPE html>

間違った入れ子タグにする

正しい順序でタグを開いて閉じることは当たり前のことですが非常に重要です。下記の例は簡単な間違いなので気づきやすいですが、ソースコードが長く複雑になるにつれてミスりやすいので注意が必要です。

<div> <strong>変な入れ子になってるやーん</div> </strong>

また、ソースコードに改行やインデントを加えることで、一目で階層が分かるようにしておけば、ミスも少なくなります。ソースコードのインデントは、「する派」と「しない派」がありますが僕はインデントしてあるほうが見やすいなと感じるので、こちらをおすすめします。

大文字を使う

HTMLでは大文字・小文字は区別しませが、XHTMLでは小文字を使わなければいけないという決まりがあります。なので要素名・属性名には小文字を使うように普段からくせをつけておきましょう。

<DIV>大文字は使わないようにしましょう</ DIV>

引用符の閉じ忘れる

これも初心者時代よくやりました…属性値は、二重引用符[“]または単引用符[‘]で囲むように求められています。この閉じ忘れも多いので注意が必要です。

<img src="images/headerimage.jpg" />

要素にスタイルを直接指定する

これは今でも急いでいると使ってしまう…えー要素にスタイルを直接書き込むのは、後々スタイルを変更する時に、作業効率をがくんと落ちてしまいます。急いでいるからといって決して直接指定しないようにしましょう！(主に自分に向けてのメッセージ)

良い子の皆さんはスタイルシートを使って記述してください。そうしておけば、今後スタイルを編集・追加する時にも迷わず変更できます。編集・追加するのがあなたではなく他の人だったとしたら、迷惑をかけないように、なおさらです。

<a href="link.html" style="c​​olor: #000; text-decoration: none;">直接指定ダメ絶対！</ a>

CSS

スタイルを閉じ忘れる

これもHTMLでのタグの閉じ忘れと並ぶ初心者イージーミスNo.1です。スタイルの終わりはセミコロン「；」で終了する癖をつけましょう。スタイルをひとつ適用させるだけなら正直、セミコロンを忘れても問題ありませんが、複数のスタイルを指定をする際は絶対に必要です。

僕はほんとにこのミスを多くすするので、スタイルを書く際は最初に「：」「；」を入れてから中に属性値をいれるという自分ルールを作ってふせいでいます。

＃divname {
   width:400px;
   height:300px;
}

ID名クラス名をアルファベットで始めない

ID名クラス名はアルファベットで始めないといけません。数字や記号で始めても認識してくれませんので、気をつけましょう。以下は間違った例です。

＃01piyopiyo {
   float:left;
   margin:10px;
}

.&amp;piyopiyo {
   float:right;
   margin:20px;
}

短縮属性を使わない

短縮属性とは，marginやbackgroundのように同時に指定することの多い属性値をまとめて指定できる便利な属性です。
cssの記述を短縮することは、ページの表示スピードアップするだけでなく、後で編集する時の時間短縮にもなります。速記コードでかけるものは積極的に使っていきましょう。※fontとbackgroundは値を並べる順番に一定のルールがあり、間違った順番だと上手く効かないので気をつけましょう。

＃piyhopiyo {
   margin:10px;
   padding:5px;
   background: url("bg.jpg") repeat-y fixed center top;
   font: italic bold 120%/1.5 Verdana, Chicago, Arial, sans-serif;
}

短縮カラーを使わない

カラーの指定で＃FFFFFFと#FF6699のようなWEBセーフカラーは、＃FFFと＃F69に凝縮することができます。些細な事ですがコードの容量制限と編集の時間短縮になるので積極的に使いましょう。

最後に:ミスが出た時の心構え

ミスが出たのは自分の性

初心者の時は上手く表示されないとキャッシュかな？とかスタイルの特性で上手く表示されないかな？と思いがちですが、99%自分の入力ミスなのでまずは自分の書いた記述が間違ってないかをを疑うようにしていきましょう。まず一番に疑うの自分ですｗｗｗ

独学なので、根本的なところが抜けてたりするかもしれませんが、以上でまとめを終わります。基本を抑えた上でミスの無いHTML＆CSSを書きたいものですね。以上井畑でした!!

「メモメモ」と思ったことはSNSでシェアしよう!!
12
あわせてこちらの記事もどうぞ

“誰もが通る道…WEB初心者が犯しやすいHTML&CSSのミスと間違い” への1件のコメント

  1. レモンのいれもんデザイン備考録 より:
    2013/03/20 7:15 PM

    […] 時にも楽になるという利点があるというふうに以下のサイトに書いてありました。 「誰もが通る道…WEB初心者が犯しやすいHTML&CSSのミスと間違い」 http://creativememomemo.com/misstake_html_css/ […]

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です