HTMLとCSSを真剣に学びたい人におすすめ！ 実務レベルの知識やテクニック、考え方がよく分かる解説書 -HTML/CSSブロックコーディング
Post on:2022年12月16日
sponsors
HTMLとCSSの実務に役立つ知識やテクニック、考え方を学びたい人にお勧めの解説書を紹介します。
デザイナーから渡されたモックアップを元に、情報の構造やデザイナーの意図を読み解き、コンテンツをブロックに分解し、コーディングの方針を検討し、HTMLのマークアップでどのように構造を設計し、CSSでスタイルする際に気をつけることなど、各ステップごとに詳しくていねいに解説されています。
HTMLの要素や属性、CSSのプロパティや値はそれなりに理解していて、UIコンポーネントなら気軽に実装できるけど、Webページや複数ページを実装すると、「納得のいく実装ができない」「もう少しクリーンな設計はできなかったのか」と、コーディングのスキルを磨きたい人にお勧めの解説書です。
知識やテクニックだけでなく、考え方についても触れられているので、本書から得られるものは大きいと思います。
Kindle版も同時発売されています！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は8章＋アルファの構成で、プロフィールサイトの制作を通じて、デザインカンプを渡されてからのコーダーの一連の作業がステップごとに解説されています。
実装するプロフィールサイトは2ページの構成で、それぞれスマホ版・タブレット版・デスクトップ版でレイアウトが異なります。
第1章では、モックアップを元に情報を整理し、ブロックに分解する手順です。ブロックに分解するこつは、情報の大きい塊から始めること。たとえば、ヘッダ・ヒーロー・コンテンツ・フッタに分け、その中のコンテンツを見出しとコンテンツに分け、メインとサブのコンテンツに分け、、、とブロックに分解します。
タブレットやデスクトップでレイアウトが変わる場合は、同様にブロックに分解します。スマホ版と同じレイアウトであれば、同じブロックになりますが、カラム数が変更されていたり、垂直レイアウトが水平レイアウトに変わっていたりします。
情報のブロックを整理できたら、どのように実装するか検討します。スマホ版・タブレット版・デスクトップ版のレイアウトを確認し、スクリーンサイズに応じてどのようにレイアウトが最適化されるのか、3種類のレイアウトをどのような順番で実装するのか、コーディングの方向性を軽く決めておきます。
第4章は、HTMLの実装です。マークアップはブロックを意識して、大きなブロックから始めて、小さなブロックを中に入れて実装していきます。
ブロック単位でマークアップしていくので、完成したHTMLは一目でブロックの塊が分かると思います。
HTMLが完成したら、モックアップでレイアウトを確認しながら、CSSでどのように実装するかを考えます。
実装に入る前に特に大事なのは、挙動などの仕様を確認することです。どこが可変なのか、ボタンやリンクの動作、フォームの動作、追従などの有無など、後からだと大変になってしまうので、確認を忘れないようにしましょう。
第6章からはいよいよCSSの実装。「ベースのコーディング」や「共通クラスのコーディング」で解説されているCSSは、他のページで実装する時にもそのまま使用できるテクニックが満載です。
今回はモバイルファーストで実装されているので、スマホ版のCSSからはじめ、タブレット版、デスクトップ版を実装していきます。
実装の最後は、リファクタリング。完成したコードを確認し、重複しているコードや不要なコードを削除したり、コードの可読性を高めるために整形したりします。明日の自分のための作業ですね。
本書はコラムや付録も充実しています。コラムでは「ブロック分解の考え方」「アプローチ方法の選び方」のようにその思考プロセスについて分かります。また、付録では、クロスブラウザ対応の最近のテクニックが解説されています。上記は、100vhがビューポートの高さいっぱいにならない問題をdvh単位で解決する方法です。
HTML/CSSブロックコーディングの目次
HTML/CSSブロックコーディングの目次
HTML/CSSブロックコーディングの目次
デザインカンプを受け取ったときから、実装の完了までの流れがすべて解説されており、自分のワークフローや実装方法と比較しながら読むと面白いと思います。良い点をどんどん取り入れることで、スキルアップになる一冊です。
献本の御礼
最後に、献本いただいた翔泳社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
