【SAKUSAKU -Web制作のTipsおつまみブログ-】コードレビューを頼まれたら？

こんにちは。佐藤です！

今週はコードレビューについてです。
最近になってコードレビューをする機会が増えてきました。
コードレビューでは下記に気を使ってます。

学習者のモチベーションを損なわないように弱めの表現を使うこと
できていることをほめること

今回は前回お話したセマンティックなHTMLを記述できるようになるためにも実際に新人が書いたコードへのレビューからTipsを抜粋していきます。

目次（想定読了時間3分）

文字コードはUTF-8を使用すること
idの指定について
Formタグ、Inputタグ、Buttonタグについて
見出しタグと文章の階層について

文字コードはUTF-8を使用すること

HTMLの標準仕様を定める「HTML Living Standard」でもUTF-8の使用を推奨してます。
SHIFT-JISの場合は環境によって文字化けを起こしてしまいます。
現状ではUTF-8が世界標準であるため、特別な理由がない限りはUTF-8を使用しましょう。

参考：https://momdo.github.io/html/semantics.html#character-encoding-declaration

idの指定について

※状況：bodyタグ直下に全体を包括するように、id="wrap"にてスタイルを充てていた（内容の横幅を調整するため）

現在wrapに対してidにてスタイルを当てていますが、classに変えたほうがよいと思われます。
CSSセレクターにはどのスタイルが優先されるのかを決める「詳細度」というものが設定されています。
特にwrapの場合はWidthを指定しています。
後でページ内コンテンツの一部のWidthを画面いっぱいに表示したいとき
（例えば背景に色を使いたいときなどは画面幅いっぱいにすることが多いと思います）
ClassをあててWidthを100vwにしてもidのほうが詳細度が高いため、#wrapのWidthが優先されてしまうでしょう。

詳細度に関する参考：http://pepabo.github.io/css/specificity/

Formタグ、Inputタグ、Buttonタグについて

下記の部分は見た目上はうまく作れているのですが、
実際にはフォームとして機能していない状況かと思います。

<div class="info">
<p>メールアドレス</p>
</div>

<div class="txt2">
<p>無料ではじめる</p>
</div>

フォームとして実装する場合は
・formタグで囲う
・ユーザー入力を求める場合はInputタグやTextareaタグを使用する
・ボタンの実装はInputタグのType="submit"かもしくはButtonタグを使用する
・ボタンの装飾はclass="btn"などbtnクラスを作ってCSSを記述する
あたりが基本となります。

見出しタグと文章の階層について

HTMLにはh1 ~ h6の見出しタグがありますよね
○○さんも今回のコードに使ってますね

まず、使えていること自体素晴らしいです！
より適切につかうことができたらもっとよくなるので細かいかもしれないけど
解説をします

CSSによってリッチな表現がされていますが、WEBページもHTML上はただの文章です。
文章である限り、見出しや段落など国語で習ったようなことをきちんと反映させるべきです。

（大見出し）
　（ナビゲーション：目次のような役割）
　・アイテム１
　・アイテム２
　・アイテム３
　（キャッチコピー）
　※キャッチコピーの文章が入ります
アイテム１（中見出し）
・・・（内容）
アイテム２（中見出し）
・・・（内容）
アイテム３（中見出し）
・・・（内容）

今回は上記のような文章構成です

大見出し　→　h1
中見出し　→　h2

のように文章の階層をHTMLタグで表現しましょう。