くりちゃんです。
今回はHTML/CSSの勉強を始めて一年がたったので、結構恥ずかしいのですが、半年前に作ったぼくのポートフォリオサイトにコードレビューをしていきたいと思います。
半年前に作ったサイトポートフォリオサイトについて
ということで、半年前に作ったポートフォリオサイトこちらです↓
当時はデジハリさんに通いながら、techacademyさんのWordPressコースを受講していました。この作品はtechacademyさんの卒業制作で作ったポートフォリオサイトです。
本当はWordPressに組み込んでいたんですが、色々あって見れなくなってしまったので、今回はHTML/CSSの静的サイトの状態の時を見ていきたいと思います。
半年前の自分にコードレビューしてみる
headタグ
ではheadタグからみてみたいと思います。
<head> <title>GROWUP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="Description" content="GROWUPは栗田久海のポートフォリオサイトです">
<meta name="format-detection" content="telephone=no">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="/js/jquery-1.12.4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">
</head>ここだけでもけっこう気になるとこがありますね…笑
まず一番気になったのはjQueryの読み込み位置でしょうか。通常はbodyタグの一番最後に、headタグ内で読み込むのであれば、defer属性をつけましょう。
<script src="/js/jquery-1.12.4.min.js" defer></script>defer属性についてはこちらの記事を見てみてください↓
次はメタキーワードのタグがないのも気になりました。入れておいた方が無難でしょう。
<meta name="Keywords" content="GROWUP,ポートフォリオサイト">あとはおそらくGoogleフォントを使用しているのですが、不要な文字の太さを読み込みすぎていると思います。文字の太さは3種類でよいでしょう。
<link href="https://fonts.googleapis.com/css?family=Lato:100,400,700" rel="stylesheet">headerタグ
headerタグを見てみたいと思います。ナビゲーションの部分↓
<ul class="navigation">
<li class="nav-list"><a href="profile.html">Profile</a></li>
<li class="nav-list"><a href="worksindex.html">Works</a></li>
<li class="nav-list"><a href="blogindex.html">Blog</a></li>
<li class="nav-list"><a href="contact.html">Contact</a></li>
</ul>ここは主要なナビゲーション部分なので、navタグで囲った方がよいでしょう。
<nav> <ul class="navigation">
<li class="nav-list"><a href="profile.html">Profile</a></li>
<li class="nav-list"><a href="worksindex.html">Works</a></li>
<li class="nav-list"><a href="blogindex.html">Blog</a></li>
<li class="nav-list"><a href="contact.html">Contact</a></li>
</ul>
</nav>こんな感じですね。
あと全体的にクラス名に統一されていないのと、altの記述がないところが多かったです。クラス名のオススメの設計手法はBEMです。altについてはしっかりと記述するように注意しましょう。
パーティクルはとても良い感じですね！
sectionタグ全体
まず気になったのがこの部分↓
<section class="section-inner text-center">
<h2 class="sp-mb">Works</h2>
<ul class="works-list">
<li class="works-item">
<figure class="snip1445">
<img src="images/works-contrast-4.jpg" alt="tempwave" class="works-image top">
<figcaption>
<div>
<h2>TEMPWAVE</h2>
<h4>Design&Coding</h4>
</div>
</figcaption>
<a href="works.html"></a>
</figure>
</li>
<li class="works-item">
<figure class="snip1445">
<img src="images/works-contrast-2.jpg" alt="RCUDESIGN" class="works-image top">
<figcaption>
<div>
<h2>RCUDESIGN</h2>
<h4>Design&Coding</h4>
</div>
</figcaption>
<a href="works.html"></a>
</figure>
</li>
<li class="works-item">
<figure class="snip1445">
<img src="images/works-contrast.jpg" alt="8hours" class="works-image top">
<figcaption>
<div>
<h2>8hours</h2>
<h4>Design&Coding</h4>
</div>
</figcaption>
<a href="works.html"></a>
</figure>
</li>
<li class="works-item">
<figure class="snip1445">
<img src="images/works-contrast-3.jpg" alt="makeVR" class="works-image top">
<figcaption>
<div>
<h2>MAKEVR</h2>
<h4>Design&Coding</h4>
</div>
</figcaption>
<a href="works.html"></a>
</figure>
</li>
</ul>
</section>figureタグを使用しているのが気になりました。figureタグはこの部分(図・グラフなど)があればさらに理解が深まるという時に使用するのが適切なタグなので、ここはdivタグが良いと思いました。あと、h2タグ・h4タグが続けて並んでしまっています。h4ではなく、h3タグが適切。もっと言うなら、見出しが連続で続くのは文章構造的におかしいと思うので、pタグか良いでしょう。
hoverした時にでてくる線のデザインも紺色だとみにくい気がするので、白の方がよかったんじゃないかな。
ブログページ、ワークスペースで気になった部分↓
画像が全体的にあらいと思いましたね。PC/SPともに2倍にした方が綺麗に映るので、ここは2倍にした方が良いと思いました。
footerタグ
なぜかわからないですけど、SPだとフッターナビゲーションがなくなっていました…笑
なにがあったんでしょうね…
css
cssをみていきます。line-heightについて↓
line-height: 8rem;line-heightに単位はつけない方が良いでしょう。レスポンシブの時に再度書き換えないといけなくなってしまいます。
cssのプロパティの順序にも気をつけましょう。規則性がないと可読性が悪くなってしまいます。例えばこの部分↓
.color {
color: #0d3563;
font-weight: 400;
padding: 0px;
background-color: transparent;
margin-left: 0px;
}ぼくの場合は視覚的に影響する部分から、始めています。直すとこんな感じです↓
.color {
margin-left: 0px;
padding: 0px;
background-color: transparent;
color: #0d3563;
font-weight: 400;
}cssのプロパティの順序 を意識して書き換えることは人間のすることではないので、gulpやnpm-scriptsを使用して、自動で書き換えてもらいましょう。
次にショートハンドを意識して書きましょう。例えばこの部分↓
.background {
background-image: url(images/main-visual-2__mini.jpg);
background-size: cover;
height: 63vh;
}ショートハンドに直すとこんな感じです↓
.background {
background-image: url(images/main-visual-2__mini.jpg) / cover ;
height: 63vh;
}可読性も上がるので意識して使用していきましょう。
あとはSPにした時の表示について。VWを使ってみましょう。画面の横幅に応じて、文字サイズや幅が可変していきます。
まとめ
ざっくりみた感じHTML/CSSについてはこんなところでしょうか。色々とツッコミどころはありましたね…笑
半年経ってHTMLについては文章構造力が上がって、CSSについてはクラス名のつけ方、ショートハンド、VW等、可読性が向上したかなと思います。
HTML/CSSだけとってもまだまだなので、もっともっと勉強しないとですね。
次は2年後かな?お楽しみに～
コメント