こんにちは、ななです。
フロントエンドエンジニアとして、絶賛活動中です。
今回は、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、クラスの命名方法は既存のルールに従う
クラス名を命名する際は、既存のルールにしたがって命名するといいでしょう。
クラス名をしっかり行うことで、
クラスの命名方法について熟知しているというアピールにつながるからです。
有名なクラスの命名規則はいくつかあります。
例えば、以下の３つがあります。
- 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>おわりに
いかがでしたでしょうか。
このブログでは、私の実務経験をもとに得た知識を皆さんに提供していきます。
また、本記事も、また新しい情報を得たら、こまめに更新をするつもりです。
最後まで見てくださり、ありがとうございました。
コメント