フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。
LP制作をしてもりけん先生が添削してくださったので
- 調べて
- 修正
していこうと思います。
目次
もりけん先生からのレビュー
ご指摘された部分。

- padding位置がずれています
- 変な空のaタグがあります
- 変なbrがあります
- mainとfooterが2つずつあります
- style=“”はやめましょう classにしてください
- headerタグにh2のクラス指定があります正しくはh2じゃないでしょうか もしくはheaderというclass名
- 読み込みが失敗しているcssがあります
一つづつ調べていきます。
padding位置がずれています
変な空のaタグがあります
<a>タグの空欄は何かをcommand+Fで「<a>」を検索しました。
すると閉じタグ部分が「<a>」となっている箇所が4箇所あったので「</a>」を加えました。
メモ
- command+Fで検索
- 変な部分見つける
- /がなかった
変なbrがあります
アイコンとpタグ部分を1行あけるために入れた「br」でしたが、「変なbr」とご指摘いただいたので使い方が間違っている可能性が高い…一旦brの使い方について調べます。
「BR」とは「Break」の略で、改行を行うためのタグです。終了タグなしで使います。似たタグに<p>タグがありますが、文章を明示的に改行するためには<br>タグを用います。
<br>タグは、しばしば余白を開けるために使用されることもありますが、その場合は<br>タグではなくスタイルシートを使用して調整することをおすすめします。<br>タグでレイアウトを作っても、ユーザーの環境によって行間などが変わってしまう可能性があるからです。また、同じ理由で、文字サイズによって改行位置が変わってしまい、テキストが読みづらくなってしまうこともあるので注意が必要です。
つまりユーザー環境によって読みづらくなる可能性があるので余白をあけるのであればスタイルシートを用いる必要があるということのようです。
ただ今回、アイコン部分とテキスト部分の間に<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
上から順番に調べていきます。
- ドキュメント(仕様書)
MDNなのかw3schoolsなのか…どれが正しいものなのか判断がつかない - github issue or pullrequest
GitHubのこと理解していないのでしっかり理解するための時間をとる必要があり - stackoverflow
<br>についての記事が削除 - 海外の個人記事
「br how to use」で検索するとMDNが表示されたので前述した内容と同様。 - 日本の個人記事
サルワカ先生の記事が表示
サルワカ先生の記事では、
- <br>の乱用を避けること
- <br>ではなくCSSで余白を作ること
と記載がありました。
総合的にみると、
cssで余白を作りなさい
ということから以下に修正しました。
css
.icon{
margin-bottom: 30px;
}
.small{
margin-top: 30px;
}
納得するまで調べていくと理解が深まる…<br>を軽くみていたこともわかりました…><
mainタグとfooterタグは1つしか使ってはいけないという記述を探します。
- hader
- main
- footer
はdocument内に1つだけしか配置できないとさっそく見つけました!
しかし次の記事ではHTML5.2では<main>を複数設置ができるようになったという記載を見つけました。
ただルールがあり最初に表示できるmainコンテンツは1つで、続いてmainを記載する場合はhidden属性が必要だとありました。
そのためご指摘いただいた箇所であるmainとfooterをなくしました。
cssでgrid-templateを使用しているので
- 親要素をcontainer
- 子要素にh2、nav1、img、text、service、heart、web、star、nav2、copy
としました。
style=“”はやめましょう classにしてください
こちらはclassが先になかったので指摘してくださったのかな?
もしくはhtml内でstyleはあまり使用しないほうが良いのかな…?
html内でcssを読み込むことはドットインストールで見てきたので方法としてはあり。
なので前者のclassが先になかったからなのかもしれない。
ただ、聞いてみて確認をしてみます。
headerタグにh2のクラス指定があります正しくはh2じゃないでしょうか もしくはheaderというclass名
こちらはmainとfooterの箇所で内容が重複するので記載はなしです。
読み込みが失敗しているcssがあります
読み込みが失敗しているものは消しました!
仕様書
HTMLの仕様書はコレかな?MDNにリンクが貼ってあって仕様書と記載があったのできっとこれだ。
おわりに
レビューしてくださる方がいることが嬉しい…!
そのまま世にでてたらただただ恥ずかしい想いをしていたなぁ。
もりけん先生、いつもありがとうございます!
もりけん塾(@terrace_tech)