HTMLとCSSの最近の実装テクニックを学べる解説書、実務で通用するスキルを身につけたい人にお勧め -HTML/CSSスキルアップレッスン

Post on:2023年2月10日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

HTMLとCSSは基本的には分かるけど、実装で悩むことがある、自分のやり方が正しいか不安に感じる、応用力が足りてない気がする、初心者を卒業してプロとして大きな一歩を踏み込もうとしている人にお勧めの解説書を紹介します。

デザインカンプを理解した上での画像書き出し、情報を伝えるためのマークアップ、柔軟性と汎用性に配慮した実装、要件に適したレイアウト、ユーザビリティに配慮した実装、計画的なレスポンシブ対応、メンテナンス性に優れたコードなど、実務レベルのテクニックを学べます。

本書はHTMLとCSSの解説書ですが、入門書ではありません。それぞれの基礎は理解している人が対象となっています。デザインカンプからWebページを実装する上で必要な知識とテクニックが詳しくていねいに解説されています。

すでに長年従事している人にも、最近はこんなやり方もあるのかと発見があると思います。

プロのコーディングが身につく
HTML/CSSスキルアップレッスン
ISBN 978-4-7981-7300-9
[Amazonでみる]
[楽天でみる]

著者: 千貫りこ
出版社: 翔泳社
発売日: 2023/1/17

Kindle版も発売されています。

HTML/CSSスキルアップレッスン Kindle版

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

本書は7章構成で、一般的なコーディング工程の流れに沿って、デザインカンプを渡されたところからWebページの実装が完了するまでを学びます。本書の実装で使用するデータはサポートサイトからダウンロードできます。

本書で作成するのは、デザイン会社のサイトリニューアルです。デザインまでの工程は完了しており、それを元にコーディング作業に入ります。

まずは、デザインカンプの読み解き方。情報の構造はどのようになっているのか、見出しは何レベルまであるのか、リンクやボタンや画像の確認といった見た目で判断できることだけでなく、ホバー・タップの挙動、レイアウトがレスポンシブでどのように変化するのか、このカンプの段階で不明点を解消しておくと後の工程がスムーズに進められます。

第2章からいよいよHTMLです。

HTMLのマークアップで特に気をつけたいポイントは、見出しと情報の構造です。最初に見出しを判断することで、ページ全体のアウトラインもつかみやすくなります。

本書の大きな特徴の一つが、汎用性のある知識やテクニックを学べることです。たとえば、見本のデザインカンプから見出しや情報の構造を理解しても、それがそのまま自分に役立つとは限りません。本書ではたとえば、情報を区分するためのフローチャートがあり、それを使用することで迷うことも少なくなると思います。

ページ内の情報を正しく伝えるためのHTMLが完成したら、第3章ではデザインを適用するためのマークアップです。理想は意味づけためのタグだけですが、それだけではデザインを再現できない場合があります。そんな場合によく使用するのが、汎用コンテナであるdiv要素です。

文脈的にグループ化したい要素はsectionで、デザイン的にグループ化したい要素はdivでまとめる、そういった使い方です。そして階層と見出しが期待通りにsectionでマークアップされているか確認することも忘れないようにしましょう。

HTMLでのマークアップが完了したら、いよいよCSSでスタイルです。本書ではページ全体のレイアウトから始め、その後にパーツのスタイルを実装していきます。

本書で解説されている主なレイアウトの手法はCSS Flexboxがメインですが、ほかの選択肢としてfloatやCSS Gridについてもどのような場合にそれを使用してどのような利点と欠点があるかも詳しく解説されています。

第5章は、パーツの作り込み。CSSは要件にあった実装方法を選択することが重要なポイントです。

この章では実践的なテクニックがたくさん解説されています。たとえばナビゲーションで、デスクトップでは2行に分割されていて、スマホでは縦一列に並んでいる、という感じです。HTMLをデスクトップ用とスマホ用の2つ用意するというのも一つの手ですが、ここでは一つのHTMLでデスクトップ用とスマホ用を実装します。