【読了】HTML5/CSS3モダンコーディング

2017年01月05日 00時32分

バックエンドと違って今までまとまって学習しておらず、問題に当たった都度ググって得た知識をプラスしてやってきたHTML5/CSS3のコーディングに不安を覚えていたので、年末年始に表題の本「HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方」を読みつつ写経してみました。

結論、フロントがつい後回しになってる私には目から鱗が落ちる内容ばかりで最高でした。

CSSは便利なプロパティを知らなくても他のプロパティやhtmlの変更で何とかなるようなケースが多くあります。ですがそういった対応はDOMは汚くなりデザインの変更にも弱くなりがちです。
それを強く感じました。

例えば、box-sizingを知らなかったので横並びのwidthはpaddingとborderの値を減らした値を設定して、paddingに変更があるとwidthの値も変更するのが当たり前だと思っていました。

marginの相殺について、発生するケースとしないケースが漠然とあるとは思っていたが原因が仔細に記述してありスッキリしました。入れ子になった親子関係でも発生してたんですね。

他にもtext-overflowを効かせるにはwhite-spaceとoverflowの指定が必要とかinline-block要素を横に並べたときに100%ピッタリにした時に何故か最後の要素が落ちるケースの対応とか毎回ハマりそうなことも次は回避or対応できそうです。

このように、ググって断片的な知識をその都度得て対応している人がこの本を読むと各ページにあるONE POINTで感動しっぱなしになると思います。
逆に全く知識がない人向けには書かれていないので初めての知識を付けたい人は別の本がいいでしょう。

ReactやVue.jsとかのJavaScriptライブラリも綺麗なDOMがあってこそなのでまず先にHTML5/CSS3を固めてみては如何でしょうか。