30 時間でマスター Web デザイン 改訂版(サンジュウジカンデマスター ウェブデザイン カイテイバン)

HTML5,CSS3 による Web ページ作成を,例題を通して基礎から学べる入門テキスト。 Windows10 対応。ステップを踏んだわかりやすい説明と、豊富な問題で構成し、 Web デザインの基本を身に付けられる実習書。オールカラー。巻末付録に JavaScript によるプログラミングの基礎も収録。
1 章 Web サイト制作の基礎
1.Web サイト制作の基礎技術
2.Web サイトを製作する前に
3.Web デザインの基礎
4.Web の配色
5.Web サイトの制作手順
6.Web サイト制作の準備
2 章 HTML の基礎
1.HTML の基本要素
2.見出し・段落・強調
3.文字要素
4.リスト
5.画像
6.ハイパーリンク
7.ページ構造と文書構造の設定
8.ページ内リンク
3 章 CSS の基礎
1.CSS の基本
2.文字要素の CSS
3.背景の指定
4.ボックスモデル
5.Web ページのレイアウト
4 章 Web サイトの制作
1.Web サイトの企画
2.HTML のマークアップ
3.TOP ページのデザイン
4.問い合わせページ
5.レスポンシブデザイン
5 章 JavaScript の使用例
付録 JavaScript の基礎

HTML と CSS を初めて学ぶとき、いちばん確実なのは、動く例題を写して結果を確かめ、次に自分で問題を解くという往復です。『 30 時間でマスター Web デザイン 改訂版』 (影山明俊 著、実教出版、 2019 年 10 月刊) は、その往復を前提に組まれた実習書で、副題に HTML5 & CSS3 を掲げ、 Web ページ作成の基礎を例題を通して学べるよう構成されています。版元の紹介文にある「ステップを踏んだわかりやすい説明と、豊富な問題で構成」という言葉のとおり、読んで理解する本ではなく手を動かして身につける本です。オールカラーの B5 判で、 Windows 10 に対応し、巻末付録には ECMAScript 6 に対応した JavaScript のプログラミング入門が収録されています。版元サイトや国立国会図書館の書誌では実教出版企画開発部の編としても登録されている、実教出版の 30 時間でマスターシリーズの一冊です。

全 5 章と付録の構成、サイト制作の基礎から JavaScript まで

構成は全 5 章と付録です。 1 章は Web サイト制作の基礎技術、 Web デザインの基礎、配色、制作手順と準備といった前提を整理します。 2 章で HTML の基本要素、見出しと段落、リスト、画像、ハイパーリンク、ページ構造と文書構造の設定、ページ内リンクを学び、 3 章で CSS の基本、文字要素と背景の指定、ボックスモデル、 Web ページのレイアウトへ進みます。 4 章は Web サイトの企画からマークアップ、トップページのデザイン、問い合わせページ、レスポンシブデザインまでを通しで制作する章で、前の 3 章の知識をひとつのサイトに集約します。 5 章は JavaScript の使用例として、オブジェクトの記述、時刻とタイマー処理、 jQuery の利用、 JavaScript による描画、 lightBox の利用を扱い、付録で簡単なプログラミングの記述、関数、制御文という JavaScript の基礎を補います。巻末には主要タグリファレンスとさくいんがあり、辞書的にも使えます。

HTML5 の文書構造とボックスモデル、レスポンシブ対応を積み上げる技術背景

Web ページ制作の学習で初学者がつまずくのは、 HTML と CSS の役割分担と、 CSS の箱の考え方です。 HTML5 では見出しや段落といった内容の要素に加えて、ページ全体の骨組みを意味づける構造要素が整備され、文書を セマンティック HTML として組む考え方が標準になりました。本書が 2 章でページ構造と文書構造の設定を独立した節にしているのは、この考え方を最初に身につけさせる配置です。 CSS 側では、要素はすべて余白と枠と内容からなる箱として扱われるというボックスモデルの理解が、レイアウトの理解に直結します。 3 章でボックスモデルを経てからレイアウトに入る順序は、この依存関係に沿っています。さらに 4 章の レスポンシブデザイン は、スマートフォンとパソコンで画面幅が大きく異なる環境において、同じ HTML を画面幅に応じて組み替える技法で、 2019 年時点ですでに Web 制作の必須項目でした。学習の題材を 1 つのサイト制作に絞り、企画から問い合わせページまで通しで作らせる構成は、断片的なタグの知識を完成物に結びつける点で効果的です。版元サイトでは完成データと正誤表が提供されており、写した結果を見本と突き合わせながら進められます。

2019 年刊行時点の環境と、授業テキストとして読む前提

対応環境は Windows 10 、 JavaScript は ECMAScript 6 と、 2019 年 10 月の刊行時点の標準に合わせてあります。 HTML と CSS の基礎部分は 2026 年時点でもそのまま通用しますが、 5 章で扱う jQuery や lightBox は、標準の DOM 操作や CSS だけで同等の表現が可能になった 2020 年代の実務では採用が減っている技術で、学習の入口として触れると割り切って読むのが適切です。版元サイトではこの本を高等学校の情報科の教材と、専門書・一般書の情報科学の両方に分類し、大学、短大、高専、専門学校、職業訓練校の教員向けに見本請求を案内しています。つまり授業のテキストとしての利用が想定された作りで、書名の 30 時間も、独学であれ授業であれ、学習時間の目安として章を割り振る手がかりになります。前提知識は、パソコンの基本操作とテキストエディタでファイルを作成できることで十分です。逆に、すでに HTML と CSS を書ける人、 Figma のようなデザインツールの操作を学びたい人、 CSS Grid や Flexbox を体系的に習得したい人には、レイアウトを 3 章の 1 節で扱う入門範囲は物足りません。

独学者と授業テキスト指定の学生、どちらが元を取れるか

授業でテキストとして指定された学生は、例題と問題を順に解いていくだけで学期の到達点が見え、巻末のタグリファレンスは課題制作の手元資料になります。独学の初学者にとっては、 1 章から 4 章を順に進めれば問い合わせページとレスポンシブ対応を備えた 1 つのサイトが完成するという、ゴールの見える教材である点が価値です。 Web 制作をこれから学ぶ人が最初の 1 冊としてどの系統の本を選ぶべきかは Web デザイン本ガイド で整理していますが、コーディングの型を短期間で身につける実習書を探しているなら、豊富な問題と完成データで自分の理解を確かめられる本書は、堅実な出発点になります。