2017年09月23日
Tweetこんにちは,今日はCSSって難しいですよね,って話をしていきます.
HTML・CSSと言うと,初心者が最初に習うことです.
そして,Web界隈で働く人なら,だいたい
「おれ,HTML・CSS書けるよ」
と自信満々に言います.
ちなみに,自分は,ちゃんとHTML・CSS書けると胸を貼って言えません.
ので,今日は どうしたら自信満々にCSS書けます!と胸を貼って言えるか ,ということについて書いていきます.
初級編は大好きなdotinstallにおまかせします.
https://dotinstall.com/lessons/basic_css_v3
補足するとしたら,
基本的に
position: relative
とposition: absolute
はペアで使うclearfixはこちらをご参考ください
http://coliss.com/articles/build-websites/operation/css/css-latest-clearfix.html
これも,基本的にdotinstallにおまかせします.
あと,書籍でオススメするとしたら
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト
この辺がおすすめです.
自分で組めることが大事ですが,スタイルはよく崩れます. そして,それを修正する必要がでてきます.
そんなとき使えるのが,google chromeのデベロッパーツール
この辺だけ見ておけば大丈夫です.
さて,ここまでで,最低限レイアウトは組めるようになりました. しかし,ここまででは小規模開発のレイアウトしか組めません.
CSSがダメなところとして,
https://speakerdeck.com/dafed/managing-css-projects-with-itcss
で上げられているように,
ということだが,要はそのままでは扱いづらく,煩雑で管理しにくいということ.
そこで, ITCSS: https://qiita.com/makotot/items/2c3e99f15dca2789d403 BEM: https://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884
など,様々なcssの設計思想がある.
ここまでなんとなく理解・使いこなせてようやく大規模な開発ができるようになる.
CSSを書く時に考えるときは,上記で述べたことにとどまらない.
フロントエンドエンジニア養成読本を開くと,まず一章目にブラウザとどう戦うかということについて書いてある.
CSSは, ブラウザによって映り方,書き方が違う のだ.
ブラウザのバージョンごとに,どのCSSのタグが使えるかは
で調べたり,ベンダープレフィックスなどという概念があったり,自分で管理しきれないので,Autoprefixerなどがあったり.
とにかく,CSSを始めフロントエンドの技術は日々進化します.
「おれ,HTML・CSS書けるよ」 と胸を貼って言うためには,日々新しい技術をキャッチアップし続ける必要があるのです.
SideWorksでは,こうした最新技術をきちんと学び,身につけてもらうために,
「実際に現場で働く」
エンジニアが教えています.
当たり前ですが プロに習わないとプロにはなれません.
一緒に勉強をしたい方はぜひ下記のリンクよりお問い合わせください.
よろしくお願いします.