HTML/CSSのポートフォリオをコーディングする際の7つの注意点

未分類

こんにちは、ななです。

フロントエンドエンジニアとして、絶賛活動中です。

今回は、HTML/CSSでポートフォリオを作る際の注意点を7つまとめました。

この記事は、これから初めてポートフォリオを作成する方向けの記事です。

ポートフォリオを作る際の4つの注意点

1、imgタグには必ず「alt」属性をつける

htmlで画像を載せるためにimgタグを使った場合は、必ず「alt」属性をつけましょう。

悪い例:alt属性が指定されていない
<img src="...">
良い例:alt属性が指定されている
<img src="..." alt="猫の画像">

alt属性は無くても処理に影響はないのですが、SEOで不利になってしまいます。

ほとんどのWEBサイトはSEO対策が必須になりますので、imgタグを使う際は必ずalt属性を指定するようにしましょう。

2、divタグの中身を空にしない

悪い例:divの中に何も記述されてない
<div class="p-index__title"></div>
良い例:
<div class="p-index__title">
  タイトル
</div>

こちらも、SEO対策のためです。

空のdivタグが存在すると、SEO対策で不利になってしまうので、なるべく避けましょう。

3、クラス名に方向や順番の情報を入れない

例えば、以下のような例はNGです。

<div class="p-header__left">...  // 方向(左)の情報がクラス名に入っている
<div class="p-header__right">...  // 方向(右)の情報がクラス名に入っている

<div class="p-main__second">  // 順番(2番目)の情報がクラス名に入っている
<div class="p-main__item5">  // 順番(5番目)の情報がクラス名に入っている

なぜNGかというと、突然、要素の順番や左右を逆にして欲しいと言われたら、
クラス名まで変えなくてはなりません。

なので、左右とかではなく、そのタグの役割をしっかり理解し、クラスを命名するといいでしょう。

例えば、以下のようにクラスを命名すれば、
左右を入れ替えても、順番を変えることになっても、
クラス名まで変更する必要はなくなります。

<div class="p-header__icon">...
<div class="p-header__info">...
など

4、クラスの命名方法は既存のルールに従う

クラス名を命名する際は、既存のルールにしたがって命名するといいでしょう。

クラス名をしっかり行うことで、
クラスの命名方法について熟知しているというアピールにつながるからです。

有名なクラスの命名規則はいくつかあります。

例えば、以下の3つがあります。

  • OOCSS
  • BEM
  • SMACSS

私は普段はBEMの命名規則に沿って、クラスを命名していますが、どれでも良いと思います。

ちなみに、本記事で例として取り上げているクラス名は、BEMの規則にしたがって書いています。

5、marginの相殺はNG

どういう意味かというと、以下のような例です。
(この2つのdiv要素は、上下に並んでいるとします)

<div class="p-footer__icon">
  <img src="..." alt="...">
</div>
<div class="p-footer__info">
   お問い合わせ:...
</div>
.p-footer__icon {
  margin-bottom: 20px;
}

.p-footer__info {
  margin-top: 30px;
}

以上のように、2つのdivタグ同士で相殺が起きてしまっています。

この場合、数値の大きい「30px」が優先されます。

つまり、この2つのdivタグの間隔は30pxになるので、
一つ目のdivタグの「margin-bottom: 20px;」は不要になるのです。

6、不要なmarginは削除しよう

例えば、以下の例です。

<ul class="p-header-list">
  <li class="p-header-list__item">...</li>
  <li class="p-header-list__item">...</li>
  <li class="p-header-list__item">...</li>
</ul>
.p-header-list__item {
  margin-bottom: 20px;
}

liタグの上下に間隔を開けるために、
それぞれのliタグに「margin-bottom: 20px;」が指定されています。

しかし、一番最後のliタグには、
不要のmargin「margin-bottom: 20px;」が存在してしまいます。

なので、cssを以下のように記述することで、最後のliタグに指定されている不要なmarginをなくすことができます。

.p-header-list__item {
  margin-bottom: 20px;
}

/* 最後のliタグだけ、margin-bottomを指定しない */
.p-header-list__item:last-child {
  margin-bottom: 0;
}

7、floatを使ったら、必ずclearfixで打ち消す

例えば、以下の例

<div class="p-home-items">
  <div class="p-home-items__interior">...</div>
  <div class="p-home-items__info">...</div>
</div>
.p-home-items__interior {
  float: left; /* 左に寄せる */
}

.p-home-items__info {
  float: right; /* 右に寄せる */
}

このように、floatを使うことで、縦並びのdivを横並びにすることができます。

しかし、このfloatを使った2つの要素は、上に浮いた状態になるため、
親要素である「p-home-items」の高さが0になってしまいます。

この問題を解決するために、以下のcssをあらかじめ用意します。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

そして、親要素「p-home-items」のクラス名を以下のようにすればOKです。

// clearfixを付け足すだけ
<div class="p-home-items clearfix">
  :
</div>

おわりに

いかがでしたでしょうか。

このブログでは、私の実務経験をもとに得た知識を皆さんに提供していきます。

また、本記事も、また新しい情報を得たら、こまめに更新をするつもりです。

最後まで見てくださり、ありがとうございました。

コメント

タイトルとURLをコピーしました