初心者にありがちなHTMLの書き方と対策

Webデザイナーの平尾誠です。
最近、初学者に向けてオンラインでマンツーマンの講師をしています。

初学者が忘れがちな場所っていつも同じだと感じます。

この記事は下記のような方に向けて書いています。

  • ドットインストールで勉強したばかり
  • 実務経験はないけど、HTMLとかCSSを勉強した
  • コーディングを添削してほしい

要するに、HTMLの基礎の基礎は学んでいるけど、まだまだ不安って感じの方です。

中級者の方も、難しくはないので、さらっとおさらいで学習してきましょう!

クラス名に規則性がない

これはそのままですね。
慣れている人は、HTMLのレイヤー構造ごとにクラス名をつけています。
SMACCSという概念があるので、調べてみてください。

TwittercardやOGP画像の設定

head内のmetaタグにTwitter用のmetaタグを用意しましょう。
Twitterやfacebookで拡散さられた時に表示されるサムネイルをの設定ができます。

詳しくはこちらを参考にして下さい。

divを多用しすぎない

divとspanはレイアウト用のタグとなっており、それ自体に意味がありません。
コンテンツの内容をgoogleに正しく判定してもらうために、意味のあるHTMLタグを使用しましょう。

section,article,main,header,footerなどがこれに当たります。

リストを正しく使う

ulやdlやolはきちんと使い分けましょう。

リストと呼ばれる箇条書きなどにできるHTMLにも意味があります。

  • ul:定義がないので普通の箇条書き
  • dl:定義リスト。dtにタイトル、ddに説明分。ちなみにdtにはhタグを入れて使用してはいけない。
  • ol:ナンバリングできるものや、順番を表す

何度もJqueryを読み込んでいる

調べながら作ると、いろんなブログで記載されているコードをコピペしてつかいます。

すると、最初に読み込んで使用しなければいけないJqueryを、難度も重複して使用していることがあります。
これは無駄な上に、読み込みの分だけ重たくなるのでやめましょう。

CSSの読み込み順序を考えていない

CSSは読み込ませる順番によって優先順位が変わります。
例えば、

このようにreset.cssを最後に読み込んではいけません。
効くはずのCSSが後のCSSに上書きされて効きません。

まとめ

これだけわかれば、初学者卒業ってわけではないです。
基本は大切dファから忘れないようにしましょう。

ほなね