Web プログラミング

【もりけん塾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>」を加えました。

 

メモ

  1. command+Fで検索
  2. 変な部分見つける
  3. /がなかった

変なbrがあります

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

引用：MDN

 

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

 

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

 

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

 

  •  ドキュメント(仕様書)
    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が2つずつあります

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

 

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

  • 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）

Thanks：もりけんさん

 

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

 

Post Views: 47

-Web, プログラミング

© 2020 Mayu_Yamada