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ファから忘れないようにしましょう。
ほなね
