コードレビュー(HTML/CSS)をしてもらった話【day78】

コードレビュー
2020.07.29

プログラミング独学day78のアウトプットは？

今日は

・コードレビュー(HTML/CSS)をしてもらった件

をアウトプットします！

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています！

 

わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

コードレビュー(HTML/CSS)をしてもらった話

現在、クリ★スタさん（@cresta_design）のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)

こちらの模写したコード（PC版）を、もりけん塾で添削していただきました..！
もりけんさん(@terrace_tec)には本当に感謝しかありません…お忙しい中ありがとうございました。

コードレビューをしていただいて感じたこと

見た目は模写できていても、コードが最適かどうかは別問題です。

「コードが最適かどうか」は、一人で学んでいても気づくことができません。わたし自身、今回コードレビューをしてもらって初めて気づいたことばかりでした。

同じく駆け出しで模写をしている人たちは、メンタやココナラのサービスを使うなどしてコードレビューをしてもらうべき！と感じます。

 

実際にご指摘いただいたところ

実際にご指摘いただいた点を改善したので、アウトプットとしてまとめます。

かなり初歩的なミスも多かったので、そちらについては割愛します..

(shift + option +  ↓)でコピーしたコードの属性が変わってないとかね..(;´д｀)以後気をつけます。。

CSS：buttonの装飾、modifierの使い方

このようなボタンの装飾についてです。

もともと、

<button class="btn--yellow">

とクラス名を設定していましたが、これではmodifierを上手く使えていません。
modifierはこのクラス名でいう–yellowの部分です。

添削前のSCSSを載せます↓

button &–yellow　の指定が多すぎる…というかbtnの装飾が全てここで行われてしまっている。。

これの何がいけないかというと、

①汎用性がない
②クラス名が–yellowなのにyellow以外のCSSが含まれている

という点です。

 

改善後

まずはHTMLです。

クラスを、”btn btn–yellow”としました。

btnクラス→btnの基本情報
btn–yellowクラス→btnを黄色に設定する

このようにクラスを２つに分けることで、他のボタンの実装がしやすく、クラス名と内容の相違もおきません。

 

改善後のSCSS↓

&–yellow には黄色に関するものだけ入れました。

 

たとえば同じような青色のボタンを作りたいときに、

<button class="btn btn--blue">

//CSS
  &--blue {
  background-color: blue
  border: 1px solid blue
  }　を追記

&–blue を追記するだけで、青色ボタンの実装ができます。

 

※追記：画像に載っている $__textの記述はいらない…。btnクラスの記述と内容が重複しています。

imgタグにwidthとheightを指定する

<img>にHTML上でwidthとheightを指定しておくことによって、レイアウトのがたつきを抑えることができます。

先生が以前にツイートしていたこちらですね↓

そうなんだ、とそのとき学んだのに実践してない自分…ダメすぎる。

 

今回は、こちらの画像にwidthとheightを設定しておきます。

HTMLにwidthをheightを追加。

指定しておくことによって、画像の読み込みが遅れても、あらかじめ「440px × 240pxのbox」だけは用意されるのでレイアウトが崩れません。

 

<body>から<footer>が抜け出していた…

なぜか、<body>から<footer>が抜け出していました…

割愛しようと思いましたが、自戒のため載せます。

わたし、「しっかり・きちんと・抜け目なく」が意識しないとできないタイプなので自覚します…
収めた。。。

 

jQueryの<script>読み込み位置

<head>内に読み込んでいましたが、</body>の直前がベスト。

なぜなら、head内に置いてしまうと「レンダリングを妨げてしまう」から。

レンダリングとは、受け取ったファイルの情報を、整形してwebブラウザで表示すること。

https://wa3.i-3-i.info/word1359.html
wa3.i-3-i.info

 

移動完了。問題なく、jQueryも機能しました。

<head>内にdescription,OGPを入れる

descriptionもOGPもSEO対策として入れるものです。アドバイスいただいたので、調べて記載してみました。

【SEOの基本】内タグ（titleタグ・metaタグ）の正しい記述方法｜Webマーケティング・SEO相談はデジ研
自然検索からの流入が増えない…。狙ったキーワードの検索順位が上がらない…。 そんな悩みをかかえている、Web担当者の皆さま。内タグの最適化はできていますか？ 今回は、SEO内部施策の基礎である内タグの最適化についてご説明します。
digital-marketing.jp

descriptionを入れる

descriptionとは、サイトの概要のこと。google検索したときに、タイトル下に表示される文章です。

<title>とセットで書くべき内容です。書くことで、SEO対策になりユーザーのクリック率が上がります。

<head>内に以下を記述します。

<meta name=”description” content=”ここにメタディスクリプションのテキストを記述”>

 

書き方は、こちらを参考にしました。

meta description（メタディスクリプション）とは？SEOを意識した文字数と記述方法｜Webマーケティング・SEO相談はデジ研
meta description（メタディスクリプション）は、検索結果に表示される際のクリック率に大きく関わってきます。そのため、サイトへの流入にも大きく関わってくる重要な内部施策の1つです。そこで、今回はmeta description（...
digital-marketing.jp

作成しているサイトの概要をまとめるのですが、文字数の制限に気をつけます。

PC：１２０文字以内
スマホ：70文字以内

最初の70文字→大切な内容、後の50文字→補足とするのがよし

ディスクリプションを入れてみました。

 

OGPを入れる

OGPについては初めて知りました。

OGPとは、「Open Graph Protcol」の略でFacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です

こちらのサイトを参考にし、上記も引用させていただきました。

OGPを設定しよう！SNSでシェアされやすい設定方法とは？
OGPの設定していますか？設定することでFacebookやSNSでURLが共有された際に、サイトの情報をユーザーに対して正確に伝えることができます。今回はOGPの基本的な設定方法やポイント、困った時の対処法などをご紹介します！
digitalidentity.co.jp

 

OGPタグ↓

<html lang="ja" prefix="og: https://cresta.design.com#">
 
<meta property="og:url" content=" ページの URL" />
 
<meta property="og:type" content=" ページの種類" />
 
<meta property="og:title" content=" ページの タイトル" />
 
<meta property="og:description" content=" ページのディスクリプション" />
 
<meta property="og:site_name" content="サイト名" />
 
<meta property="og:image" content=" サムネイル画像の URL" />

1文目→OGPを使うことを宣言するタグ

２文目以降→head内に記述。それぞれのOGPを設定するタグ。

・type: website または　blog、下層ページはarticle。
・image: SNSでシェアされるときの画像を指定できる。設定しない場合は、ページ内の画像からランダムで選ばれる。

実際に設定してみました。urlは架空です。

 

あとがき

あとは先述のクラス名と内容の不一致に関するご指摘だったので割愛します。

きちんと直したいと思います。

 

本当に本当に、お忙しい中ありがとうございました。大変勉強になりました！

Thanks：師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

スポンサーリンク