はじめまして。新人MEの渕上伸吾です。

カヤックのME は、uemura率いる意匠部ME課（メカ）に所属しています。
ME課のお仕事は、コーディングを覚えたい新人デザイナーのサポートも担っているのですが、
そんななかで出会った、新人にありがちな勘違いネタについてエントリーを書いてみたいと思います。

これから紹介する勘違いや誤解はME課が全力で解いているのでご安心ください ♪

1. h1タグは太字にするためのなにかだと勘違い

同様にstrongタグも太字にするためのタグだと勘違いされる傾向があるみたいです。
h1タグのhはHeading（見出し）の意味。
strongタグは強調する意味。
情報の意味に添うようにマークアップしよう！

2. pタグはテキストを中央寄せにするためにある、と勘違い

pタグのpは Paragraph（段落）の意味。
中央寄せにする、しないに関わらず文章の段落はpタグでマークアップしよう！

3. スタイルをセレクタで絞り込んで指定できることを知らなかった

div#header h1

といった指定ができる事を知らず、
必要なところ全部にclassをつけていた！という勘違いもあったみたいです。
全部にclassつけてたら超大変だったでしょーー＞＜

4. floatを使った段組がうまくいかない

floatさせる要素に幅を指定していなかったことが原因でうまく回り込んでくれないパターン。
floatを指定した要素には必ずwidthも指定すべし！

段組みについてはここがわかりやすいかも。
CSSホームページ作成｜float段組の基本｜CSSデザインサンプル

5. 絶対配置を指定すると下の要素がずれる

絶対配置


div { position: relative; }
h1 { position: absolute; top:100px; left:100px; }

こんな感じで絶対配置をしたときに、親要素の高さが0になる、というところではまる人が多いみたいです。
position: absolute; を指定すると、その要素はなかったものとして
他の部分が描画されていくので親要素的には「中身がない」と判断して高さがが0になるわけです。
結果、下に続く要素が上にあがってきちゃう。

position: absolute;を指定した要素は別のレイヤーに移動する、とイメージするといいかも。
親要素（ここではdivタグ）にheightを指定したり、
中に絶対配置をしない要素を含めるなどすれば、高さを稼げるので下の要素がせりあがってくることは回避できます。

以上、新人デザイナーの勘違い5つでした。
ベテランの皆さんは、フレッシュだったあのころを思い出せたんじゃないでしょうか。

もちろん、カヤックにはコーディングを覚えるための環境がばっちり整備されているので、
これらの誤解は解けていますよ♪

KAYAC意匠部ME課をこれからもよろしくお願いします。