HTML/CSS学習時役に立った書籍、サイト
HTML/CSS学習時役に立った書籍、サイトのを紹介したいと思います。
紹介するもの以外にもたくさん参考にしたものはありましたが、特に参考になったものを紹介します。
最後にどの順番で学習したらいいかまとめるので参考にしてください。
1. 書籍
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)
HTML5/CSS3モダンコーディングは三種類のサイトのコーディングを学ぶことができます。
私は最初と最後のサイトしかやっていませんがとても勉強になりました。
三つ目のサイトコーディングは架空のポートフォリオをコーディングするので、
自分のポートフォリオを作成するときに参考になると思います。
初心者は自分のコーディングがあっているのかという不安があると思いますが、この本は
実際のエンジニアの方が書かれているようなのでお手本になると思います。
実際に私も何度も見直し、お手本にしています。
また、この本は要所要所に使用したCSSプロパティの解説を載せてくれているので
ちょっとした辞書のようにも使えます。
この本は、今からHTML/CSSを始める人すべてにお勧めできる本です。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
Web制作者のためのCSS設計の教科書はCSS設計の手法を学ぶことができます。
1章で破綻しやすいCSSを説明してくれます。そこでは実際にCSSを書いていてくれているので
実際に動作を確認しながら破綻しやすいCSSを学習することができます。
そして、2章ではCSSの詳細度などを説明してくれます。
この1章と2章は基礎的なことですがCSSを書いていくにあたってとても重要なポイントです。
この1章と2章をみるためだけにこの本を買ってもいいと思います。
CSSの書き方について調べるとよく「!importantは使うな」とか「idは極力使うな」とか
説明されていると思うのですが、この本を読むとなぜそのように言われているのか納得できると思います。
余談ですが、CSSを解説しているサイトはいくつもあるのですが、たまに、絶対この本から引用しとるやん！っていうサイトがあって面白いです。探してみてくださいｗ
【PDF版】柴犬でもわかるFLOCSS
これは書籍といってもPDFなのですが、ここで紹介させていただきます。
(冊子版もありますが現在在庫切れです。)
FLOCSSはCSSの設計手法の一つです。
Web制作者のためのCSS設計の教科書の著者がこの設計手法を作っています。
CSS設計はただCSSを書くだけでは必要ありません。しかし、仕事としてCSSを使用するならば必ず必要になると思います。
CSS設計はCSSの可読性や保守性を高めます。仕事としてCSSを使っていく場合、多人数で仕事をする場合がほとんどだと思います。その際、自分だけわかるコードを書いていてはチーム内の効率落とすことになります。そこで、CSS設計が必要になってくるのです。
必ずしもFLOCSSを使う必要はないのですが、Web制作者のためのCSS設計の教科書の著者がこの本を作成しているため、Web制作者のためのCSS設計の教科書とこの本はCSS設計の考え方が一貫しています。ですから、Web制作者のためのCSS設計の教科書でCSS設計の考え方を学んだあとにこの本でFLOCSSを学ぶと理解しやすいと思うので、この本をおすすめしています。
Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ
SassとはCSSを書きやすくするための記法(メタ言語という)です。Sassを使うことによって、CSSを効率的に書くことができます。
生のCSSとSassでは書くスピードにかなり差がでるため、必須の技術だと思います。emmet、Sass、FLOCSSを合わせるとかなり早くCSSをかけるようになります。emmetは検索すればたくさん説明がでてくるので、ここでは割愛させていただきます。
SassはCSSを早く書けること以外にも便利な機能がたくさんあります。レスポンシブ化する際に使えるテクニックもたくさんあるのでぜひこの本で勉強してみて下さい。
あと、この本をおすすめする理由はSassの環境構築から丁寧に説明してくれているからです。Sassは拡張子を.scssとするのですが、このままではブラウザが認識してくれないため、.cssに変換する必要があります。それらの設定もこの本にすべて書いてあるので、Sassはこの本で学習することをおすすめします。
一つ注意があるのですが、
「５５ページのファイルの更新を監視するのところで
gulp.watch('./sass/**/*.scss', ['sass']);
となっているところは、仕様変更により
gulp.watch('./sass/**/*.scss', gulp.series('sass'));」
アマゾンレビュー参照:https://www.amazon.co.jp/gp/customer-reviews/R2QR954QLDV31Q/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=4295002356
という風になっており、一部上記のようにファイルを書き換える必要があります。
以上がおすすめ書籍の紹介になります。
2.サイト
ここでは、HTML/CSSを学習する際に役に立ったサイトを紹介します。
Progate HTML & CSS 初級編
URL:https://prog-8.com/lessons/html/study/1
HTML/CSSの基礎を学ぶならProgate一択だと思います。
環境構築も必要ないので、やろうと思ったその瞬間から学習を開始できます。
課金して中級編までやっている人もいますが、私は初級編を一周しかやっていません。
Progateではほんとに触りだけ理解できたら次に行っていいと思います。
Progateの次はドットインストールをやればいいと思います。
ドットインストール 初めてのHTML&CSS
URL:https://dotinstall.com/
Progateの次にやるといいと思います。
自己紹介サイトを作って行くのですがヘッダーからフッターまで通して作るのでホームページなどが
どの様にできているかイメージがつきやすくなると思います。
Progateとドットインストールは全部覚えなくていいので一周し終えたら、簡単そうなサイトを見つけて
模写するといいと思います。そうすると、何が理解できていないとかが分かるので、そこでその部分のみ復習したらいいです。
はにわまんさんのブログ
はにわまんさんは無料でコーディングの情報を多数提供してくれています。このブログは一通り見てみるといいと思います。
私が特に参考にしているのはレスポンシブ対応についての記事です。以下に二つの記事を紹介します。
PCサイトをレスポンシブ化する時の考え方と注意点
(https://haniwaman.com/pc-to-responsive/)
レスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベスト
(https://haniwaman.com/breakpoint/)
この二記事はレスポンシブ対応させるときにとても参考になります。
クリエーターズボックス flexboxのチートシート
コーディングする際はdisplay:flexは必ず使うと思います。このチートシートをみると、どのプロパティを使えば中央揃えにできるのかなどをひとめで確認できるので参考にしています。
3.学習順序
(1)Progate初級編
(2)ドットインストール
ここまでで基礎を確認
(3)めちゃくちゃ簡単なサイトを模写
わからないところをあぶり出す
わからないところは復習する
(4)Web制作者のためのCSS設計の教科書柴犬でもわかるFLOCSS
(5)Web制作者のためのSassの教科書
CSS設計とSassは基礎を理解してから学習する方が理解が早いと思います。
(6)HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
FLOCSSとSassを使いながらコーディングしましょう！
以上の順序でやれば簡単なサイトであれば作れる様になれます。
以上です。ここまで読んでいただきありがとうございます。
私も初心者なので、一緒に頑張りましょう！！