HTMLとCSSを独学で学びたい人にお勧めの解説書、現場レベルのスキルまでしっかり学べる！ -HTML＆CSS Webデザイン
Post on:2025年2月7日
sponsors
※本ページは、アフィリエイト広告を利用しています。
HTMLとCSSを学ぶ近道は、手を動かすこと。本当なら制作会社で経験を積まないと身につけられないコーディングのスキルを独学で学べる解説書を紹介します。
本書は実案件をもとに作成された練習サイトを実装しながら、本格的にHTMLとCSSを学ぶことができます。デザインカンプや仕様も用意されており、かなり実践的に学べます。
本書は、HTMLやCSSのスキルを身につけるための学習サイトCodejumpの運営者である小豆沢氏による初の書籍。経験することでしか身につけられない実制作のスキルを独学でしっかり学べます。
B5判で普通の解説書とサイズは同じですが、すごいのは576ページと大ボリューム。さらにFigma, Adobe XDのデザインデータ、実装に使用する画像、HTMLやCSSのソースコードもサポートサイトからダウンロードでき、至れり尽くせりです。
Kindle版も同時発売されています！
書籍版だとかなり分厚いので電子版に傾くかもしれませんが、ページを行き来することを考えると書籍版の方がいいかもしれません。
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書の大きな特徴は、3つ。デザインをコードにするレイアウト構成力を養うこと、入門から初級・中級・上級・応用・実践と段階を踏みながらコーディングのスキルを学ぶこと、実際の案件でよく使用するテクニックを詳しく解説。
入門から初級・中級・上級・応用・実践まで、それぞれサンプルサイトを仕様レベルからデザインカンプを確認して、実装していきます。
第1章は初級編、それぞれにテーマがあり、ここではFlexboxの使い方を学びます。まずは、デザインカンプで完成イメージを確認し、コーディングの仕様、実装のポイントを確認します。
最初に実装するのは、全体の枠組みからです。たまにヘッダから実装するという解説書を見ますが、私も今まで手がけてきた何百サイト何千ページでヘッダから実装したことはありません。枠組みが最初です。
枠組みのHTMLは主にhead部分のコーディングです。ここはひな形を用意しておくと、今後のプロジェクトでも楽が出来ます。
第1章のテーマはFlexboxなので、基本的にはFlexboxを使用して要素を配置します。もちろんデスクトップ用のレイアウト、スマホ用のレイアウトで、Flexboxを使用すれば簡単に実装できます。Flexboxについての基礎知識もしっかり学べます。
第2章の初級編はブランドサイトの縦長ページ、第3章の中級編はサービスサイトの複数ページ、第4章の上級編はカフェサイトの複雑なレイアウト、第5章の応用編はアニメーションなど動きのあるサイト、それぞれ100ページくらいあります。
第2章のブランドサイトの縦長ページのテーマは、positionを使用したコンテンツの固定配置です。複数のコンテンツを重ねて表示したり、positionを使用した疑似要素の重ね方、デスクトップ時とスマホ時への対応方法などです。
本書は入門編・初級編に限らず、解説はていねいで詳しく分かりやすいと思います。コードのどの部分がそのレイアウトを実現していて、どこを変えるとどうなるかなども迷わずに進められると思います。
たとえば、第5章のアニメーションなど動きのあるサイトの実装では、追従ボタン、背景アニメーション、パララックス、ボタンエフェクト、スライダーなどの実装方法が詳しく解説されています。
最後の第6章は実践編で、実務を想定したWebサイトとしてコーポレートサイトの実装です。これまでに学んだ知識やテクニックを使いつつ、さらに実務レベルの制作について学びます。
この第6章と第5章には、ページ内にインタラクションがあるため仕様がまとめられています。トップページはメイン画像を切り替えたり、無限ループするスライダーを実装したり、スクロールに合わせてコンテンツをフェードインで表示したり、など最近のWebサイトで人気のある実装テクニックです。
コーポレートサイトでは、トップページ、会社情報ページ、商品ページ、事業ページ、お問い合わせなど複数のページを実装します。解説も150ページに渡り、ていねいに詳しく解説されています。
HTML＆CSS Webデザインの目次
HTML＆CSS Webデザインの目次
HTML＆CSS Webデザインの目次
HTML＆CSS Webデザインの目次
いざ勉強を始めると、デザインデータや仕様から始めるのはなかなか大変だと思います。本書で実装する6つのサイトは、サポートサイトでデザインカンプ・素材・コードをダウンロードできます。独学でしっかりとしたコーディングの知識を身につけたい人に特にお勧めします。
献本の御礼
最後に、献本いただいた著者さま・技術評論社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
