HTMLとCSSの学習書で有名なものは初心者向けのものが多く、ある程度知識を身に付けて後は独学で進めてきたというWebデザイナー、エンジニアの方が多いのではないでしょうか。確かにWeb上に様々な情報が掲載されているので、独学で学べる内容も多いかもしれません。ただ、やはり書籍というのは1冊に情報がまとまっており、体系立てて知識を覚えていくためにはとても有効な手段です。
今回は、中級者・上級者向けのHTMLとCSSに関する本を中心に、一人前のWebデザイナーであれば押さえておきたい知識が紹介されている書籍をご紹介していきたいと思います。
INDEX
CSS、Sass関連のおすすめ書籍
シンプルなようで奥が深い、CSSやSass関連のおすすめ書籍です。CSSはしっかりと管理しておかないと後でメンテナンス性が低下してしまったり、チームで制作を行う場合は制作における効率が低下してしまったりします。より分かりやすく、管理しやすいCSS設計を学びたい方はぜひ読んでみてください。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
シンプルで初心者にも扱いやすいとはいえ、実はとても奥が深いのがCSSです。この本ではCSSをより管理しやすいようにするための設計について説明されています。
- 予測しやすい
- 管理しやすい
- 再利用しやすい
- 拡張しやすい
「思い通りに表示される」だけでなく、「修正しやすい・メンテナンスしやすい」というレベルでCSSを使いこなせるようになりたい方は、ぜひこの本でCSSの設計について学んでみてください。
Web制作者のためのSassの教科書
Sassとは、CSSをより効率的に記述するための言語です。CSSの記述方法やテクニックを一通り覚えて、使いこなせるようになった方はSassでCSSファイルを作成する方法を学ぶといいでしょう。Sassで記述することによって作業効率が向上するだけでなく、メンテナンス性も向上するのでより管理の行き届いたWeb制作を行うことができるようになります。まだSassの使い方がよく分からない方はこの本を読んでSassの使い方を覚えていくことをおすすめします！
最強のCSS設計 チーム開発を成功に導くケーススタディ
チームでのWeb制作を効率よく行うために必要なCSS設計の知識について書かれている本です。Sassを使ってコーディングを行っていても、記述のルールが統一されてないと確認や修正の手間が増えてしまうので効率が落ちてしまいます。OOCSS、SMACSS、BEMというキーワードを聞いてピンと来ない方は一度読んでみると色々な発見が得られてスキルアップにつながるのではないでしょうか。一歩進んだCSS設計を行いたい方におすすめの一冊です。
パフォーマンス改善のおすすめ書籍
Webサイトを制作したのはいいものの、サイトが重かったり表示速度が遅かったりというフィードバックをもらった経験がある方は多いと思います。パフォーマンスは深い所まで突き詰めると改善するポイントがたくさんあります。下記の本を読むと、パフォーマンス改善のために何をすればいいのかが明確になり、改善ポイントをしっかりと把握できるようになると思います。
超速! Webページ速度改善ガイド
Webサイトの表示速度を速くするための様々な方法が紹介されている書籍です。レンダリング処理、スクリプト処理、ネットワーク処理などそれぞれの分野での知識やテクニックが紹介されていて、コーディングの中上級者であれば知っておきたいページ表示速度の改善方法がしっかりとまとまっています。ページの表示速度を改善するためにはどういった点を気にしなくてはならないのか把握するために、全体を一度読んでおくと役に立つのではないでしょうか。
Webフロントエンド ハイパフォーマンス チューニング
技術の発達やデバイスの進化によって、Webサイトでできることの幅がどんどん広がってきています。複雑なサイトやサービスになるにつれて、どうしても気になってしまうのが表示速度や読み込み速度ですね。この本では、Webサイトを高速化させるためのチューニングについて詳しく紹介されており、Webサイトの表示速度やパフォーマンスを向上してアクセス数の増加やユーザー満足度の向上へと繋げるためのテクニックを学ぶことができます。近年では「ユーザビリティ」という言葉が注目されているように、アクセスした人が使いやすいWebサイトを作るために、チューニングの技術についてもしっかり学んでおいた方がいいでしょう。
レスポンシブ、マルチデバイス関連のおすすめ書籍
最近では当たり前のデザインになっているレスポンシブデザインですが、しっかりと知識を持ってレスポンシブデザインの制作ができていますか？下記の本では企画や設計からマルチデバイスで表示することを想定したWeb制作の在り方について書かれていて、画像や設計の最適化方法について詳しく知りたい方はぜひ読んでみてください。
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック
レスポンシブデザインに関する書籍は色々と出版されていますが、その中でも分かりやすく、かつ詳しくレスポンシブデザインについて説明されている書籍です。ただのコーディング方法を紹介されている書籍ではなく、企画や設計からレスポンシブデザインための必要な知識や情報が紹介されているので、中上級者でレスポンシブデザインくらい作れるよ！と思っている方でも読んでみると色々な発見があるのではないでしょうか。モバイルファーストインデックスもすでに実験導入されており、スマホとPCで同一のページを表示することができるレスポンシブデザインはGoogleも推奨しています。本格導入される前に、レスポンシブデザインの知識をしっかりと吸収しておきましょう。
これからの「標準」を学ぶ マルチデバイス対応サイト構築
様々なデバイスが登場する中で、あらゆるデバイスで思い通りに表示されるためのマルチデバイスに対応したWebサイトの制作方法について紹介されている本です。Googleが提供するモバイルフレンドリーテストやPageSpeed Insightsで中々スコアが上がらない方はこの本に書かれていることを実践することで、よりハイスコアを目指せるようになるはずです。パーツのマルチデバイス対応、画像の最適化など他の本ではあまり触れられていないような内容も書かれている点もおすすめポイントです。
その他のおすすめ書籍
Webサイトを制作する際の環境構築、最適化、自動化など実際の制作現場で取り入れられているような情報を知りたい方におすすめです。
現場のプロが教えるHTML＋CSSコーディングの最新常識
年々進化しているWeb制作の最新の情報について書かれている書籍です。ワークフローを最適化するための環境構築、最適化、自動化などの方法が詳しく紹介されており、まさにタイトルにある通り実際の現場で役立つ情報がぎっしり詰まっています。Gitによるプロジェクトの管理を始め、テンプレートエンジンを使ったWeb制作の方法やコーディング環境の構築、検証の設定など重要な知識をしっかりと身につけることができます。
まとめ
上級者になればなるほど、ウェブ制作における効率やパフォーマンス、ユーザビリティというものを考慮して作るようにしていかなければなりません。見た目は同じWebサイトでも、より短い時間で制作し、よりパフォーマンスの優れたページを作れるかという所でコーディングの腕が試されます。ある程度色々な事ができてきたけど、あと一歩伸び悩んでいるような方はぜひ上記でご紹介したようなコーディングに関する本に目を通してみて、どういった点で成長する余地があるのかを考えてみるといいかもしれませんね。
今回ご紹介したのは中上級者向けの書籍なので、これからWebデザインを学びたいという方はまず基本的な知識を身につけてから上記の書籍を読んでみると内容が理解できるようになるはずです。下記の記事でWebデザインの基礎知識についてご紹介しているのでご覧ください。
簡単なようでかなり奥が深いのがWebフロントコーディングの世界です。ぜひ今回ご紹介した書籍をスキルアップに役立ててください！
