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

初心者にありがちなHTMLの書き方と対策
2019年1月14日
スポンサーリンク

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

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

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

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

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

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

クラス名に規則性がない

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

TwittercardやOGP画像の設定

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

//共通項目
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name"  content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />

//Facebook用
<meta property="fb:app_id" content="App ID" />
<meta property="article:publisher" content="FacebookページのURL" />

//Twitter用
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitter" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:url" content="ページのURL" />
<meta name="twitter:description" content="ページのディスクリプション" />
<meta name="twitter:image" content="サムネイル画像のURL" />

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

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は読み込ませる順番によって優先順位が変わります。
例えば、

    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">

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

まとめ

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

ほなね