【もりけん塾75記事】先生にコードをレビュー｜修正と改善

フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。

LP制作をしてもりけん先生が添削してくださったので

していこうと思います。

もりけん先生からのレビュー

ご指摘された部分。

もりけんさん

1. padding位置がずれています
2. 変な空のaタグがあります
3. 変なbrがあります
4.  mainとfooterが2つずつあります
5.  style=“”はやめましょう classにしてください
6.  headerタグにh2のクラス指定があります正しくはh2じゃないでしょうか もしくはheaderというclass名
7.  読み込みが失敗しているcssがあります

一つづつ調べていきます。

padding位置がずれています

変な空のaタグがあります

<a>タグの空欄は何かをcommand+Fで「<a>」を検索しました。

すると閉じタグ部分が「<a>」となっている箇所が4箇所あったので「</a>」を加えました。

変なbrがあります

アイコンとpタグ部分を1行あけるために入れた「br」でしたが、「変なbr」とご指摘いただいたので使い方が間違っている可能性が高い…一旦brの使い方について調べます。

「BR」とは「Break」の略で、改行を行うためのタグです。終了タグなしで使います。似たタグに<p>タグがありますが、文章を明示的に改行するためには<br>タグを用います。

<br>タグは、しばしば余白を開けるために使用されることもありますが、その場合は<br>タグではなくスタイルシートを使用して調整することをおすすめします。<br>タグでレイアウトを作っても、ユーザーの環境によって行間などが変わってしまう可能性があるからです。また、同じ理由で、文字サイズによって改行位置が変わってしまい、テキストが読みづらくなってしまうこともあるので注意が必要です。

引用：<br>の解説｜クロノドライブのHTML辞典

つまりユーザー環境によって読みづらくなる可能性があるので余白をあけるのであればスタイルシートを用いる必要があるということのようです。

ただ今回、アイコン部分とテキスト部分の間に<br>を入れています。

この理由であればテキスト中には無いので読みづらくなるのでしょうか？

違うサイトを調べてみます。

<br> 要素は、テキストのブロック内で改行するという、単一の明確な目的を持っています。そのため、寸法を持たず、自身が表示されることもなく、スタイル付けすることができるのはわずかです。

引用：MDN

テキスト内でも改行と記載があるので私がやっていることは間違いだとわかります。

的確な記事を探そうと思ったところ、ふと以下のツイートを思い出しました！

エラーや実装上困ったときは「まずは英語」で検索してみてください。
1. 日本語記事より品質がいいケースが多い
2. そのエラーは世界中の誰かが解決しています
3. もしくはみんな困っていて議論が巻き起こっていたり、一時的な代替案もあります
以下詳しく示します

— フロントエンドエンジニア (@terrace_tech) July 3, 2020

2, 3. 特にstockoverflowとgithubは検索キーワードに含めてもいいくらい

なので、まずはそのエラーを解決する為の信用あるソースはどこかを理解する

1. ドキュメント(仕様書)
2. github issue or pullrequest
3. stackoverflow
4. 海外の個人記事
5. 日本の個人記事

いずれも最終更新日をチェック

— フロントエンドエンジニア (@terrace_tech) July 3, 2020

上から順番に調べていきます。

サルワカ先生の記事では、

と記載がありました。

総合的にみると、

ということから以下に修正しました。

 css
.icon{
margin-bottom: 30px;
}
.small{
margin-top: 30px;
}

納得するまで調べていくと理解が深まる…<br>を軽くみていたこともわかりました…＞＜

 mainとfooterが2つずつあります

mainタグとfooterタグは1つしか使ってはいけないという記述を探します。

【mainタグ】初心者でも使い方を完全にマスター！に

はdocument内に1つだけしか配置できないとさっそく見つけました！

しかし次の記事ではHTML5.2では<main>を複数設置ができるようになったという記載を見つけました。

ただルールがあり最初に表示できるmainコンテンツは1つで、続いてmainを記載する場合はhidden属性が必要だとありました。

そのためご指摘いただいた箇所であるmainとfooterをなくしました。

cssでgrid-templateを使用しているので

としました。

 style=“”はやめましょう classにしてください

こちらはclassが先になかったので指摘してくださったのかな？

もしくはhtml内でstyleはあまり使用しないほうが良いのかな…？

html内でcssを読み込むことはドットインストールで見てきたので方法としてはあり。

なので前者のclassが先になかったからなのかもしれない。

ただ、聞いてみて確認をしてみます。

 headerタグにh2のクラス指定があります正しくはh2じゃないでしょうか もしくはheaderというclass名

こちらはmainとfooterの箇所で内容が重複するので記載はなしです。

 読み込みが失敗しているcssがあります

読み込みが失敗しているものは消しました！

仕様書

HTMLの仕様書はコレかな？MDNにリンクが貼ってあって仕様書と記載があったのできっとこれだ。

おわりに

レビューしてくださる方がいることが嬉しい…！

そのまま世にでてたらただただ恥ずかしい想いをしていたなぁ。

もりけん先生、いつもありがとうございます！

もりけん塾（@terrace_tech）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ