昔に比べたら、ブラウザの差異がなくなってきたり、レイアウトしやすいcssが増えたりと楽になった部分はあるのですが
それでも初めたての頃はつまづきやすい部分がいくつかあるので、それを解説しておこうと思います。

このつまづきやすい部分さえ覚えちゃえば、あとのところはそこまで難しく感じないんじゃないかなぁと思います。
あと勘違いしやすい部分なのですが、全部覚えないとーって考える必要はないかと思います。
大事なのは考え方を覚えることと、調べてわかる状態を作っておくことかなと思いますので。

こう言う感じになってるのかーぐらいで最初はいいかなと思います。使っていくうちに理解度が深まってくると思いますので。

positionの理解

position自体についてはそこまで難しい要素はありません。
基本的にはtop, right, left, bottomと合わせて使うことが多いです。

absoluteの起点を理解する

position: absolute;が指定されている場合に、どこを起点にするかが少し特別です。
一言で説明すると下記のような説明になるかと思います。
「親要素を見た時にstatic以外の値の位置から、存在しない場合はウィンドウを起点とする」
言葉だけで見ると少し分かりづらいので、Codepenで実際の例を用意しました。

positionもしっかりと理解すれば、自由なレイアウトが可能なので便利です。
ただし。。何でもかんでも「positionで配置すればいいやんじゃない！？」って考えはやめましょう。
たまに生徒に教えているときにabsoluteを使いまくってレイアウトしちゃうケースがありました。。
absoluteを使うと、コンテンツが浮くような感じで親要素の中身としての高さがなくなってしまうので、文字の大きさの変更などにも弱くなってしまうので注意です。
ある程度の経験値が必要かと思いますが、どうしてもabsoluteを使わないとやりづらいレイアウトの場合に使うようにすると良いかなと思います。

floatに悩まされる

最近はあまりfloatで悩まされるケースも少ないですが、昔はよく悩まされていました。。
flexboxの登場でfloatが使うケースはだいぶ減ったので悩みは減ったのですが、それでも分かりづらいところもあるので気をつけたいポイントですね。

悩みポイント

• floatされた側のタグの範囲に注意。
• floatすると親の高さがなくなっちゃう。
• そんなときはclearfixという技を使う。
• もしくはoverflow: hidden;にする。はみ出してるコンテンツが有ると削れちゃうのでないときは、clearfixではなくてこっちをよく使います。
• floatされた側のタグをoverflow: hidden;するとタグの領域が変わる

このあたりが悩みポイントかなと思いますが、文字で見ても分かりづらいと思うので実例用意しました。

最近はflexboxやgridなどがあるので横並びをする際にfloatを使うことは少なくなってきたので、このあたりを意識する機会も少なくなってきたように思います。

flexboxについて

横並びにしたいときによく使うイメージがあるかなぁと思います。
flexboxについてはレイアウトをするときによく使います。これを覚えるだけで様々なレイアウトができるようになるぐらい重要です。
重要なので、様々なサイトで解説されています。
覚えておいた方が良い部分や、わかりずらい部分などについて書いていきます。

なにを指定するとどこに配置をできるかを覚える

align-itemsとjustify-contentやflex-flowなどを使って好きなように配置できるように覚えておくとどんなレイアウトも組めるようになります。
下記のflexboxチートシートを見るとだいたいの使い方は理解できると思います。
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

align-itemsとjustify-contentはflex-directionの向きによって方向が変わる

flexboxは横向きにするときに使う場合が多いかと思います。
flex-direction: column;はあまり使うイメージがないかもしれないですが
flex-direction: column-reverse;で反対にする場合もあったりするので、
その場合はalign-itemsとjustify-contentの方向に気をつけましょう。



まとめ

最近はブラウザごとの差異もだいぶ小さくなってきたり、新しいCSSも増えているので昔に比べたらだいぶ作りやすくなったかなぁと思います。
(昔はブラウザごとのバグが多かったので。。；)

ただ今はスマートフォンや、いろんなデバイスが増えたことで
その分レスポンシブ対応などに苦労する部分もあるかなと思います。

今日はcssを始めた際のハマりポイントをいくつか解説しました。
これ以外にもまだまだハマりそうなところはありそうなので、思いついたら第2弾もやるかもしれません。