HTMLとCSSを真剣に学びたい人におすすめ! 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング

HTMLとCSSの実務に役立つ知識やテクニック、考え方を学びたい人にお勧めの解説書を紹介します。

デザイナーから渡されたモックアップを元に、情報の構造やデザイナーの意図を読み解き、コンテンツをブロックに分解し、コーディングの方針を検討し、HTMLのマークアップでどのように構造を設計し、CSSでスタイルする際に気をつけることなど、各ステップごとに詳しくていねいに解説されています。

HTML/CSSブロックコーディング

HTMLの要素や属性、CSSのプロパティや値はそれなりに理解していて、UIコンポーネントなら気軽に実装できるけど、Webページや複数ページを実装すると、「納得のいく実装ができない」「もう少しクリーンな設計はできなかったのか」と、コーディングのスキルを磨きたい人にお勧めの解説書です。

知識やテクニックだけでなく、考え方についても触れられているので、本書から得られるものは大きいと思います。

HTML/CSSブロックコーディング

デザインをすらすら再現できる
HTML/CSSブロックコーディング
ISBN 978-4-7981-6904-0
[Amazonでみる]
[楽天でみる]

著者: 笠井 枝理依
出版社: 翔泳社
発売日: 2022/11/16

Kindle版も同時発売されています!

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

紙面のキャプチャ

本書は8章+アルファの構成で、プロフィールサイトの制作を通じて、デザインカンプを渡されてからのコーダーの一連の作業がステップごとに解説されています。

実装するプロフィールサイトは2ページの構成で、それぞれスマホ版・タブレット版・デスクトップ版でレイアウトが異なります。

紙面のキャプチャ

第1章では、モックアップを元に情報を整理し、ブロックに分解する手順です。ブロックに分解するこつは、情報の大きい塊から始めること。たとえば、ヘッダ・ヒーロー・コンテンツ・フッタに分け、その中のコンテンツを見出しとコンテンツに分け、メインとサブのコンテンツに分け、、、とブロックに分解します。

紙面のキャプチャ

タブレットやデスクトップでレイアウトが変わる場合は、同様にブロックに分解します。スマホ版と同じレイアウトであれば、同じブロックになりますが、カラム数が変更されていたり、垂直レイアウトが水平レイアウトに変わっていたりします。

紙面のキャプチャ

情報のブロックを整理できたら、どのように実装するか検討します。スマホ版・タブレット版・デスクトップ版のレイアウトを確認し、スクリーンサイズに応じてどのようにレイアウトが最適化されるのか、3種類のレイアウトをどのような順番で実装するのか、コーディングの方向性を軽く決めておきます。

紙面のキャプチャ

第4章は、HTMLの実装です。マークアップはブロックを意識して、大きなブロックから始めて、小さなブロックを中に入れて実装していきます。

紙面のキャプチャ

ブロック単位でマークアップしていくので、完成したHTMLは一目でブロックの塊が分かると思います。

紙面のキャプチャ

HTMLが完成したら、モックアップでレイアウトを確認しながら、CSSでどのように実装するかを考えます。

紙面のキャプチャ

実装に入る前に特に大事なのは、挙動などの仕様を確認することです。どこが可変なのか、ボタンやリンクの動作、フォームの動作、追従などの有無など、後からだと大変になってしまうので、確認を忘れないようにしましょう。

紙面のキャプチャ

第6章からはいよいよCSSの実装。「ベースのコーディング」や「共通クラスのコーディング」で解説されているCSSは、他のページで実装する時にもそのまま使用できるテクニックが満載です。

紙面のキャプチャ

今回はモバイルファーストで実装されているので、スマホ版のCSSからはじめ、タブレット版、デスクトップ版を実装していきます。

紙面のキャプチャ

実装の最後は、リファクタリング。完成したコードを確認し、重複しているコードや不要なコードを削除したり、コードの可読性を高めるために整形したりします。明日の自分のための作業ですね。

紙面のキャプチャ

本書はコラムや付録も充実しています。コラムでは「ブロック分解の考え方」「アプローチ方法の選び方」のようにその思考プロセスについて分かります。また、付録では、クロスブラウザ対応の最近のテクニックが解説されています。上記は、100vhがビューポートの高さいっぱいにならない問題をdvh単位で解決する方法です。

HTML/CSSブロックコーディングの目次

HTML/CSSブロックコーディングの目次

HTML/CSSブロックコーディングの目次

HTML/CSSブロックコーディングの目次

HTML/CSSブロックコーディングの目次

デザインカンプを受け取ったときから、実装の完了までの流れがすべて解説されており、自分のワークフローや実装方法と比較しながら読むと面白いと思います。良い点をどんどん取り入れることで、スキルアップになる一冊です。

HTML/CSSブロックコーディング

デザインをすらすら再現できる
HTML/CSSブロックコーディング
ISBN 978-4-7981-6904-0
[Amazonでみる]
[楽天でみる]

著者: 笠井 枝理依
出版社: 翔泳社
発売日: 2022/11/16

献本の御礼

最後に、献本いただいた翔泳社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

sponsors

top of page

©2024 coliss