1 冊ですべて身につく HTML & CSS と Web デザイン入門講座［第 2 版］(イッサツデスベテミニツクエイチティーエムエルアンドシーエスエストウェブデザインニュウモンコウザダイニハン)

全国の書店員がオススメする本 第 1 位 受 賞 (2019 年度 CPU 大賞)
Web サイト制作の決定版が最新情報をたくさん盛り込んで大リニューアル!
※日販売上げランキング: HTML 関連書籍

Web サイト制作の決定版がリニューアル!
今の Web サイトの作り方が一気に学べる!

Web 界隈やデザイナーに大人気!
Web 関連の情報やデザインについて記事が学べる『Web クリエイターボックス』の管理人、
Mana による渾身の HTML & CSS と Web デザインが学べる本

モバイルファースト、アニメーション、トレンドデザイン、HTML Living Standard、WebP など
最新の情報や 5 年間の間に更新された情報を多数追加!

5 年連続売上第 1 位、シリーズ累計 40 万部

・知識ゼロから体系的に学べる! HTML と CSS の基本
・絶対に覚えておきたい技術! モバイルファースト、レスポンシブ、Flexbox、アニメーション
・手を動かしながら学べる! プロの現場で役立つテクニック
・コードの知識からデザインのことまで 1 冊ですべて学べる!

Web クリエイターボックスの Mana が教える
Web サイト制作の定番 & 旬のスキル。
この 1 冊で必要なことがすべて学べる!

コードもデザインも全部学べる!

●本書の対象読者
・これから Web サイトを作り始める初心者
・HTML と CSS を基本から学びたい人
・美しいデザインの Web サイトを作りたい人
・Web の最新技術を学びたい人
・手を動かし、作りながら学びたい人

サンプルデータは Web サイトよりダウンロードできます。

Web サイトを自分で作れるようになる最初の一歩は、HTML で構造を書き、CSS で見た目を整えるという 2 つの言語を、実際に 1 つのサイトを完成させながら身につけることです。『1 冊ですべて身につく HTML & CSS と Web デザイン入門講座 第 2 版』 (Mana 著、SB クリエイティブ、2024 年 3 月刊) は、Web サイトの仕組みと HTML・CSS の基本から、シングルカラム、2 カラム、タイル型の 3 種のレイアウト制作、外部メディアの利用、うまくいかない時の解決方法までを全 8 章で扱う入門書です。版元はこの第 2 版を、モバイルファースト、アニメーション、トレンドデザイン、HTML Living Standard、WebP など 5 年間の間に更新された情報を多数追加した増補改訂と説明しています。著者の Mana は版元プロフィール (刊行時) によれば、日本で 2 年間グラフィックデザイナーとして働いた後にカナダ・バンクーバーの Web 制作の学校を卒業し、カナダ、オーストラリア、イギリスの企業で Web デザイナーとして働き、刊行時点では Web サイト制作のインストラクターとして教育に携わっています。運営するブログの Web クリエイターボックスは 2010 年に日本のアルファブロガーアワードを受賞したとあります。

全 8 章の構成、HTML と CSS の基本から 3 種のレイアウト制作へ

構成は、CHAPTER 1 で Web サイトの基本、CHAPTER 2 で HTML の基本、CHAPTER 3 で CSS の基本を押さえ、CHAPTER 4 から CHAPTER 6 でシングルカラム、2 カラム、タイル型の Web サイトを順に制作し、CHAPTER 7 で外部メディアを利用、CHAPTER 8 でうまくいかない時の解決方法を扱う全 8 章です。版元の詳細紹介によれば、後半はシングルカラム、2 カラム、タイル型、お問い合わせ、レスポンシブ対応といったよく使われるレイアウトを 1 つの Web サイトとして一緒に作っていく進め方で、制作現場の流れを体験できる構成です。色の持つ印象からすぐ使える配色見本までを扱うページが多く割かれている点、CSS を使った簡単なアニメーションの実装を学べる点、はじめてコードを書く人のために HTML と CSS の導入部分に QR コードから見られる動画が用意されている点、第 2 版で練習問題が新たに用意された点も版元が挙げる特徴で、サンプルデータは Web サイトからダウンロードできます。

モバイルファーストと Flexbox が入門書の前提になった技術背景

HTML と CSS の入門書は、どの時点の書き方を標準として教えるかで価値が大きく変わります。スマートフォンでの閲覧を前提に小さい画面から設計するモバイルファーストの考え方と、画面幅に応じてレイアウトを切り替える レスポンシブデザイン が広まり、横並びのレイアウトは回り込みを無理に使う方法から、Flexbox で並び方と余白を宣言的に指定する方法へ移りました。HTML の仕様も、版番号で区切られた規格ではなくブラウザーの実装に合わせて継続的に更新される HTML Living Standard が参照先となり、画像形式では JPEG や PNG より小さいファイルサイズで同等の見た目を得やすい WebP が選択肢に加わっています。古い書き方で覚えた入門者は後から覚え直す手戻りが生じますが、本書はこれらを取り込んだ改訂版として、初心者だけでなく従来の方法で制作している経験者にも向けると版元は説明しています。入門段階で身につけた書き方がそのまま実務の標準と一致することは、独学者にとって遠回りを避ける大きな価値です。

知識ゼロから読める前提と、JavaScript を求める人に向かない点

版元が対象読者として挙げるのは、これから Web サイトを作り始める初心者、HTML と CSS を基本から学びたい人、美しいデザインの Web サイトを作りたい人、手を動かし作りながら学びたい人などで、知識ゼロから学び始められるとしています。プログラミングの経験は前提にされておらず、Web ページが単に形を作ればよいものではなく、ユーザーにとって使いやすいデザインを作っていく必要があるという Web デザインの基礎知識も同じ本の中で学べる点が、コードだけを教える入門書との違いです。一方で、全 8 章の章題に JavaScript は登場せず、HTML と CSS に集中した構成なので、動きのある画面の制御やアプリケーションのような機能、公開後のサイト運用の仕組みを学びたい人には別の本が必要です。同じ著者と版元による『ほんの一手間で劇的に変わる HTML & CSS と Web デザイン実践講座』が版元プロフィールに挙げられており、本書の次の段階として位置づけて選べます。

自分のポートフォリオサイトや店舗、サークルの紹介サイトを 1 つ完成させたい人、Web 制作の仕事や副業に向けて HTML と CSS を体系立てて学び直したい人、社内の Web 担当になって外注先のコードを読めるようになりたい人にとって、1 つのサイトを作りながら基本と改訂時点の書き方を同時に身につけられる本書は、元が取れやすい 1 冊です。初版が 2019 年度の CPU 大賞 書籍部門の大賞を受賞したことも版元プロフィールに記載されており、入門書としての評価の裏付けになっています。