書籍レビュー「現場のプロが教えるHTML+CSSコーディングの最新常識」

現場のプロが教えるHTML+CSSコーディングの最新常識

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4 という書籍を、著者の大竹孔明さんの計らいによりMdN社より頂きました。

本書は企画が株式会社まぼろしで、著者は大竹孔明さん、小川裕之さん、高梨ギンペイさん、中江亮さんによる共著です。

内容

以下の様な章立てで、コーディングの最新知識について解説されています。

  • 最近のコーディングの潮流
  • 目的に合わせたコーディングの環境整備
  • HTMLコーディング
  • CSSコーディング
  • 最適化・検証
  • そのほかよく利用される技術・ツール

各章の中に各項目(たとえば Git や Emmet など)があり、それぞれ4〜6ページ程度の記事が書かれています。

感想

この手の本は、大抵の場合各項目の内容が紹介程度にとどまっていて「これならブログ記事を読むのと変わらないなぁ」と思うことが多いのですが、この本は抑えるべきポイントがしっかり抑えられてる記事が多いのが好印象でした。

たとえば、HTML5 ではフォームで placeholder という属性を指定することができ、下記コードのように placeholder="山田太郎" と指定した場合、

HTML: <label>お名前: <input type="text" placeholder="山田太郎"></label>

以下のように表示させることができます(テキスト入力欄に文字を入力し始めると、「山田太郎」という文字は消えます)。

ブログや HTML5 解説書でよくある placeholder の使用例として、

HTML: <input type="text" placeholder="お名前">

のような例がありますが、本来ラベルとしてテキスト入力欄の外に配置すべき「お名前」という文字列を placeholder に入れてしまうと、文字を入力し始めた後では何を入力すべきだったか再確認することができなくなります。

この本では、placeholder は

  • 大切な情報(例えば「お名前」など)を placeholder で表示すべきではない
  • 初期値が入力済みであるとユーザーが勘違いする可能性がある
  • 視覚障害者にとっては読みづらく、かえって負担になる場合もある

などといったことが解説されています。 制作者がユーザーに十分配慮せずうっかりコーディングしてしまったりしそうなケースや、アクセシビリティへの配慮もされており、安心して人に勧めることができると感じました。

おすすめする読者層

  • 既に HTML と CSS を使って PC 向けWebサイトのコーディングができる方
  • Web制作のトレンドを知り、さらにスキルを伸ばしたい方

Amazon: 現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4