こんにちは。佐藤です！
今週はコードレビューについてです。
最近になってコードレビューをする機会が増えてきました。
コードレビューでは下記に気を使ってます。
- 学習者のモチベーションを損なわないように弱めの表現を使うこと
- できていることをほめること
今回は前回お話したセマンティックなHTMLを記述できるようになるためにも実際に新人が書いたコードへのレビューからTipsを抜粋していきます。
コードレビューを頼まれたら？
文字コードはUTF-8を使用すること
HTMLの標準仕様を定める「HTML Living Standard」でもUTF-8の使用を推奨してます。
SHIFT-
現状ではUTF-8が世界標準であるため、
参考：https://momdo.github.io/
idの指定について
※状況：bodyタグ直下に全体を包括するように、id=”
現在wrapに対してidにてスタイルを当てていますが、
CSSセレクターにはどのスタイルが優先されるのかを決める「
特にwrapの場合はWidthを指定しています。
後でページ内コンテンツの一部のWidthを画面いっぱいに表示
（
ClassをあててWidthを100vwにしてもidのほうが
詳細度に関する参考：http://pepabo.
Formタグ、Inputタグ、Buttonタグ
下記の部分は見た目上はうまく作れているのですが、
実際にはフォームとして機能していない状況かと思います。
<div class="info"> <p>メールアドレス</p> </div> <div class="txt2"> <p>無料ではじめる</p> </div>
フォームとして実装する場合は
・formタグで囲う
・
・ボタンの実装はInputタグのType=”submit”
・ボタンの装飾はclass=”btn”
あたりが基本となります。
見出しタグと文章の階層について
HTMLにはh1 ~ h6の見出しタグがありますよね
○○さんも今回のコードに使ってますね
まず、使えていること自体素晴らしいです！
より適切につかうことができたらもっとよくなるので細かいかもしれないけど
解説をします
CSSによってリッチな表現がされていますが、WEBページもHTML上はただの文章です。
文章である限り、見出しや段落など国語で習ったようなことをきちんと反映させるべきです。
（大見出し）
（ナビゲーション：目次のような役割）
・アイテム１
・アイテム２
・アイテム３
（キャッチコピー）
※キャッチコピーの文章が入ります
アイテム１（中見出し）
・・・（内容）
アイテム２（中見出し）
・・・（内容）
アイテム３（中見出し）
・・・（内容）
今回は上記のような文章構成です
- 大見出し → h1
- 中見出し → h2
のように文章の階層をHTMLタグで表現しましょう。
（おまけ）
- ナビゲーション → navタグ
- 中見出し＋内容 → sectionタグ
タグの種類が多くて覚えるのは大変かもしれないけど
定番どころから少しずつ使えるようになりましょう！
【メンバーブログ】デザイナーとしての自分に自信を失いかけていたとき、響いた言葉 
一覧へ戻る
