emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

今のコーディング方法を知るのに最適な書籍「現場のプロが本気で教える HTMLCSSデザイン講義」

現場のプロが本気で教える HTML/CSSデザイン講義

 

ヤフーの現場で使っているCSS設計方法とは? - linotice* | Yahoo! JAPAN RECRUITMENT


上記の記事がきっかけで、「現場のプロが本気で教える HTMLCSSデザイン講義」を読んでみました。
大手ヤフーで、どんなコーディングをしているのか気になりますよね。

 

 

内容

HTML/CSSのコーディング方法は年々変化して、より便利に、複雑になっています。

 

例えば、コーディングをする上で主流になりつつあるツールのSASS(CSSプリプロセッサ)であったり、floatにとって変わるflexboxを使ったレイアウトが代表的です。

 

 

「現場のプロが本気で教える HTMLCSSデザイン講義」では、
SASSやflexboxを使ってサイトのTOPページを組み上げていく工程が解説されています。

 

・SASSの現場での使われ方
・flexboxを使ったレイアウト
・CSSの命名規則

 

など、コーディング現場で必要な技術が主な内容。


ヤフーの現場で使われている最新のコーディングを盗み見る(?)ことが出来るので、2017年現在のHTML/CSSコーディングの動向を知りたい方には手っ取り早い1冊となっています。

 

 

SASSについて

本書ではSASSの現場での使われ方はわかるものの、ひとつひとつの解説は少なめ。SASSの出力結果も書いてあれば初心者には嬉しかったですね。

 

SASSについてはこちらの書籍がおすすめです。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

 

「SASSの教科書」は発売された時期が少し古くて買うのを少しためらったのですが、SASSで何ができるのかを基礎から学べるのでとても良かったです。SASSの知識が浅い人は先にこちらを読むほうがいいかもしれません。

 

SASSを導入することでメンテナンス性を向上できる部分もあれば、逆にコード解析に時間がかかることも起こり得ます。慣れの問題かもしれないけど、気をつけて付き合っていきたいですね。

 

 

近年のWeb制作におけるHTML/CSSコーディングについて

SASSやレスポンシブサイトが主流になったことでHTML/CSSの敷居は昔に比べ上がっています。(IE6対応が無くなったのはよいことですが。)

 

Webサイトひとつをデザインをするにしても、HTML/CSSの知識なしでは難しいのが現実。

 

HTML/CSSの知識なくデザインをしてしまうと、

「この並びではスマートフォンと整合性がとれない」
「ソースが二倍になって重くなるし、メンテナンス性も悪い」
「デザインを実現するのに工数が増える」

などなど、せっかくのレスポンシブの良さが無駄になってしまいます。


デザイナーの方はflexboxの部分だけでも理解すると、主要なHTML/CSSの構造がわかるはず。

 

flexboxはレイアウトの自由度が高いです。
Webでどんなレイアウトが実現可能であるのかを知ることで、コーダーに信頼されるWebデザイナーになれるのではないでしょうか。

 

しかしflexboxはプロパティがかなり多い要素ですので、マスターするのに少し時間がかかると思いますが頑張ってみて下さい。

 

「現場のプロが本気で教える HTMLCSSデザイン講義」ではflexboxを積極的に使っているので、最近使い始めた僕のような人にとってもかなり勉強になりました。

 

 

 

さいごに

「現場のプロが本気で教える HTMLCSSデザイン講義」は、最前線のコーディング方法を知りたい人にとって非常に役に立つと思います。

 

コーダーが少ないWeb制作会社に勤務している人などは、人のコードの解説を見るだけでもかなり参考になるのでおすすめ。
実際に僕の会社は自分しかコーダーがいないので、今まで勉強したことの答え合わせをしているようで面白かったです。

 

現場のプロが本気で教える HTML/CSSデザイン講義

現場のプロが本気で教える HTML/CSSデザイン講義

 

 

emuramemo(c) All Rights Reserved.