サイドスリーブログ

初心者さんも中級者さんも。手元に置いていきたいオススメHTML5 + CSS3の書籍をご紹介。


                初心者さんも中級者さんも。手元に置いていきたいオススメHTML5 + CSS3の書籍をご紹介。

はじめまして。新入りのフロントエンドエンジニア「ほっしー」です。初めてのブログ記事となります。前職では何をしていたかというとMTの再構築エラーを解決したり、phpでlocationを取得してパラメータークエリでの条件分岐を作ったりです…。

私は今、設計レベルでのHTML5+CSS3をイチから勉強しなおしている最中です。(以前よりもコーディングする機会が増えました。)

HTML5+CSS3の学習はほんの入り口部分まではとても簡単なのです。しかしゼロベースからの構築となると奥が深く、一つ一つのタグを知っている程の知識では変更・修正は出来てもデザインカンプにある段組みを実現させる段階で躓いてしまうようなこともあるのではないでしょうか(しかもフロントエンドの流行の移り変わりはとてもはやいので情報が新旧錯綜しており何の勉強から始めればいいのかわからない)。

2018年現在、コーディングにはセマンティック・マークアップ、レスポンシブ、CSS設計、レイアウト、などなど、それぞれにに特化した技術書を網羅した複合的な知識が求められています。入り口の手軽さからあなどられがちなコーディング作業も、10年前と比べるとかなり複雑多機能になっており(というよりは、元々あった複雑な機能を多用する必要が出てきた)、カプセル化やスコープなど、いわゆる一般的なプログラミング用語や、システム開発で用いられるような用語を交えて解説される事も増えました。

やりたい事はコーディングなのにプログラミング用語?もう何が何だかわからない、そんな方に今回はコーディングの勉強に役立つ書籍をご紹介したいと思います。今日ご紹介する書籍は、初心者さんや、昔勉強した事はあるけど最近の流行りはわからない、一から総ざらいしながらざっと勉強しなおしたい。そんな経験者さんにもオススメです。

HTML5&CSS3デザインブック(エビスコム著)

基本を学ぶのにオススメなのはこの本です。知ってる人にはおなじみの本だと思います。HTML5+CSS3コーディングの基本中の基本をおさえ、業務に使えるテクニックを実際にコードを打ちながら学習できます(テクニックも本書の中で何度も繰り返し登場するので忘れにくい)。細かい知識はとにかく後回しの実践型の本です。

興味を持たれた方は是非、読んで理解しただけで終わらせずに、実際のコードをトレースしながら本の最初から最後までを一周とし、合計三週分ぐらい繰り返してみて欲しいのです。

繰り返すのは単調ですが、基礎力が身に付きます。読んだ時に、本の知識が脳内を滑っていくままにするのではなく、本の知識をガリガリ食べていくイメージで勉強してみてください。

※ちなみに細かい知識を拾うための本もあります。後ほどご紹介します。

これからの「標準」を身につける HTML+CSSデザインレシピ
(エ・ビスコム・テック・ラボ著)

CSSやタグの使い方は覚えた。でもどうやってあのデザインを実現させるの?そんな疑問を解決するのはこの本です。

今風のデザインの為のパーツ(部品)がたくさん紹介されています。巷によくあるデザインパーツの本は個性が強すぎ、限定された場面でしか使えないものが多いのですが、この本にあるものは基本的にありとあらゆるデザインに転用できるように作られています。

むしろよほど特殊なものでなければ、ほぼこの本だけで全てまかなえるのではないかと思います。

私はこの本は何度も練習するというよりはざっと中身を見ておいて、机の上の本棚に忍ばせて必要な時にだけ必要なページを読む辞書的な使い方をしています。(後ろの方にあるのBootstrapを交えた解説は必要のない人はさらっと流してください。)

Web制作者のためのCSS設計の教科書
モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法(谷 拓樹著)

CSSを設定したのに、思ったようにスタイルがかからない!!知識は不足していない(と思う)のに、思い通りのデザインが実現できない。なぜ?そんな疑問を持った事のあるあなたに送りたいこの本。

そのCSS、破綻していませんか?」という問いかけとともに各テーマが書かれています。破綻したCSSというのは、「新しいスタイルを適用したいのにそもそものセレクタの優先度が高すぎて上書きできていない」もしくは「特定のタグや場所に依存したスタイルを作ってしまい、位置変更などのほんのわずかな仕様変更でスタイルが崩壊してしまう」といったようなメンテナンス性の低いCSSの事である。と、この本では定義しています。

小さな部品の更新・変更ではなくレイアウトから全てを組むような場合CSSの記述は膨大になり、設計の概念が必要になります。

この本では、メンテナンス性の高いCSSを目指し、その為の実践的なCSSルールが紹介されています。様々なサンプルが上げられているので良い所どりをすれば、自分の使いやすいルールを作ることも出来るはずです。この本を使って、どんどん優先順位の高いセレクタを使ってスタイルを上書きし続けるような羽目にならないように頑張りましょう!!

HTML5&CSS3デザイン現場の新標準ガイド(エビスコム著)

この本が前述した「HTML5+CSS3」の知識を網羅したガイドブック的な本です。

これにはW3C勧告のHTML5.1およびCSS3の仕様書に基づき、HTMLとCSSの機能・使い方について網羅的にまとめられています。また、必要に応じてHTML5.2(草案)、WHATWG、CSS4で採用された機能についても紹介されており、まさにWeb制作の「今」と「これから」の標準を凝縮した本であるという訳ですね。

フロントエンド界隈ではよくある「新しい情報が必ずしも今後標準となるとは限らない」部分もありますが、こうした事典的な一冊あるととても安心です。手元に置いておきたい一冊です。

まとめ

いかがでしたでしょうか?現在、書店が次々と消滅し、大型書店でもIT関連の書籍エリアは縮小傾向にあります。新刊は置かれていても「ベストセラーというほどではないが学習者にささやかに評価されている良本」というような書籍などは置かれていない場合もあり、学習者が良い本に巡り合うのが難しくなっているといっても大げさではないと思います。

ネット書店は書籍の中身を閲覧できる場合もありますが、技術書は一部分だけを見て評価を下す事は難しい面があると思います。私も学習書を探す際に迷った事があり、その際に参考になったのは技術情報を発信しているブログ記事の書評だった、という経験があります。

そのような困りごとの際に、少しでも参考になればと思いこの記事を作成しました。興味を持たれた方の学習のささやかな助けになれば幸いです。