HTML5とCSS3を基本から正しく理解できる!豊富なマンガとイラストで楽しく学べるWeb制作者を目指す人にオススメの本
Post on:2016年4月19日
最新のWebサイトの作り方がはじめてでもよく分かり、Web制作のプロとして必要最低限の知識をしっかり身につけることができる良書「HTML/CSS入門教室」を紹介します。
テキストだけでは難しい内容でも豊富なマンガとイラストで楽しく学べ、初心者が躓きやすいポイントは丁寧にやさしく解説されているので、基本を正しく理解することができるオススメの本です。


本書は初心者の人でも短時間でWebページがつくれるためのHTML/CSSの知識が学べるよう書かれたものです。初心者向けといっても、できあがるページはレスポンシブ対応の本格的なデザインです。

マンガがあるので内容も軽いように見えるかもしれませんが、かなりしっかりしています。Web制作をこれからはじめたいと真剣に考えている人にもオススメです。
Kindle版は、お値段が少しお得です。
紙面のキャプチャで、中身を少しだけご紹介。

みさきくんとヘンリーさんとHTML/CSSの学習をしていきます。
みさきくんは見た目は子どもですが、頭脳は完全に大人です!

みさきくんはポートフォリオページをはじめ、カフェのショップページ、ギャラリーページなどを作成していきます。

本書は8章構成で、1章が1時限の授業として進めていきます。
1時限目はサイト制作の事前準備からで、サイトの目的やターゲットユーザーを設定します。なんとなくページをつくるだけでは、誰にも何も伝わりません。
「レッスン1」として、最初にここから入るのは初心者でもかなりしっかりした考え方や知識を身につけることができると期待せざるを得ませんね。

やさしい解説、吹き出し調の会話、イラストによる説明など、しっかりした考え方や知識が分かりやすく身についていくと思います。

ブラウザやエディタなどの準備を終えると、いよいよHTMLです。

HTMLも初心者向けのやさしい解説で、しっかりした知識を身につけることができます。

文章のアウトライン、構造化、要素の関係など、聞き慣れない言葉があっても本書を読めば大丈夫です。

レッスンも半分を過ぎるといよいよCSSです。
CSS初心者の人も不安な人も、使いこなせるようになるための基礎が非常に分かりやすく説明されています。

フォントサイズの単位は初心者用だと「px」かなと思っていたのですが、「em」です。もちろん「px」での指定方法も説明されているのですが、「em」の説明も分かりやすく、きちんと理解して使用できると思います。

「マージンの相殺」など、現役の人が使っているテクニックも充実しています。

ページをつくっている時にありがちな直したい箇所もたくさん掲載されています。

ちょっと難しそうな箇所でも、非常に分かりやすいと思います。

ページの作成が一段落ついたら、スマホやタブレットへ対応させます。
ここまでのHTMLもCSSもレスポンシブ対応前提で進められているので、特に意識せずに充分な知識が備わっているはずです。

付録のデザインのバリエーションではいくつか変更するだけで、カフェのショップページやギャラリーページも作成できてしまいます。
HTML/CSS入門教室の目次
-
- ウェブサイトを設計しよう
- ウェブサイトの目標を決める
- ターゲットユーザーを決める
- 5W1Hで利用シーンを考える
- サイトマップとワイヤーフレーム
-
- ウェブサイトづくりの準備をし、HTMLの基礎を学ぼう
- 代表的なブラウザ
- Chromeをインストール
- テキストエディタとは
- Bracketsのインストール
- HTMLタグと要素
- HTMLページの基本構造
-
- HTMLを書いてみよう
- HTMLファイルの作成
- 枠組みとなるタグを入力する
- タイトルと概要を入力する
- 見出しや段落としてマークアップする
- リストとしてマークアップする
- 表としてマークアップする
- コピーライトを入力する
- セクションタグとは?
- articleタグを挿入する
- sectionタグを挿入する
- navタグを挿入する
- header, footerタグを挿入する
- mainタグを挿入する
-
- 画像とリンクを設定しよう
- 画像ファイルをフォルダに配置する
- 画像を挿入する
- 外部サイトへリンクする
- ページ内リンクを設定する
- 相対パスの仕組み
- 絶対パスの仕組み
-
- CSSでページを装飾しよう
- CSSの基本的な書き方
- CSSファイルの作成と読み込み
- 文字サイズを変更する
- 文字色の変更とカラーコード
- 文字の行揃えを指定する
- 罫線をつける
- 背景色を設定する
- class属性とclassセレクタ
- id属性とidセレクタ
- ボックスモデルとpadding, margin
- paddingを調整する
- marginを調整する
-
- ページを完成させよう
- 表を装飾する
- リスト記号を変更する
- CSSの範囲を限定する
- リストのブラウザの初期値
- リンク色を変更する
- リンクの下線を消す
- ブロックレベル要素とインラインレベル要素
- メインビジュアルの配置と装飾
- 画像を文章の左側に寄せる
-
- さまざまなデバイス表示を考慮しよう
- ブラウザ幅を変えて確認する
- 画像の横幅を調整する
- コンテンツ幅の上限を設定する
- スマートホンの表示領域を指定する
- デバイスを横に持ったときの表示
-
- サイトを公開しよう
- レンタルサーバーを契約しよう
- ドメインってなんだろう?
- FTPクライアントのインストール
- FTPクライアントを利用する
- 公開サイトを確保する
- 付録
-
- 画像サイズとトリミング
- ページを増やす
- デザインバリエーション
本書の公式サイトからはレッスンすべてのデータとサンプルサイトを見ることができます。まんがも一部掲載されています。

ヘンリーくんががんばったサイトはこちらから。

最後に、作者様からメッセージ。
この本は、特に次のことに気をつけて書いています。
- どんなPC操作レベルの方が読んでも、なるべく途中で挫折しない
- ウェブサイト制作を通して、「学習すること」自体を楽しんでもらいたい
週末の2日間、もしくは毎日1,2時間、しっかり読めば読むだけHTMLとCSSの基本を正しく理解でき、使いこなせるようになると思います。
初心者の人やWeb制作の新人さんに特にオススメします!
献本の御礼
最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors