HTML5とCSS3を基本から正しく理解できる！豊富なマンガとイラストで楽しく学べるWeb制作者を目指す人にオススメの本

最新のWebサイトの作り方がはじめてでもよく分かり、Web制作のプロとして必要最低限の知識をしっかり身につけることができる良書「HTML/CSS入門教室」を紹介します。

テキストだけでは難しい内容でも豊富なマンガとイラストで楽しく学べ、初心者が躓きやすいポイントは丁寧にやさしく解説されているので、基本を正しく理解することができるオススメの本です。

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

マンガがあるので内容も軽いように見えるかもしれませんが、かなりしっかりしています。Web制作をこれからはじめたいと真剣に考えている人にもオススメです。

Kindle版は、お値段が少しお得です。

• HTML/CSS入門教室（Kindle版）

紙面のキャプチャで、中身を少しだけご紹介。

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

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

本書は8章構成で、1章が1時限の授業として進めていきます。
1時限目はサイト制作の事前準備からで、サイトの目的やターゲットユーザーを設定します。なんとなくページをつくるだけでは、誰にも何も伝わりません。

「レッスン1」として、最初にここから入るのは初心者でもかなりしっかりした考え方や知識を身につけることができると期待せざるを得ませんね。

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

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

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

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

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

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

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

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

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

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

付録のデザインのバリエーションではいくつか変更するだけで、カフェのショップページやギャラリーページも作成できてしまいます。

HTML/CSS入門教室の目次

1. ウェブサイトを設計しよう

   ウェブサイトの目標を決める

   ターゲットユーザーを決める

   5W1Hで利用シーンを考える

   サイトマップとワイヤーフレーム

2. ウェブサイトづくりの準備をし、HTMLの基礎を学ぼう

   代表的なブラウザ

   Chromeをインストール

   テキストエディタとは

   Bracketsのインストール

   HTMLタグと要素

   HTMLページの基本構造

3. HTMLを書いてみよう

   HTMLファイルの作成

   枠組みとなるタグを入力する

   タイトルと概要を入力する

   見出しや段落としてマークアップする

   リストとしてマークアップする

   表としてマークアップする

   コピーライトを入力する

   セクションタグとは？

   articleタグを挿入する

   sectionタグを挿入する

   navタグを挿入する

   header, footerタグを挿入する

   mainタグを挿入する

4. 画像とリンクを設定しよう

   画像ファイルをフォルダに配置する

   画像を挿入する

   外部サイトへリンクする

   ページ内リンクを設定する

   相対パスの仕組み

   絶対パスの仕組み

5. CSSでページを装飾しよう

   CSSの基本的な書き方

   CSSファイルの作成と読み込み

   文字サイズを変更する

   文字色の変更とカラーコード

   文字の行揃えを指定する

   罫線をつける

   背景色を設定する

   class属性とclassセレクタ

   id属性とidセレクタ

   ボックスモデルとpadding, margin

   paddingを調整する

   marginを調整する

6. ページを完成させよう

   表を装飾する

   リスト記号を変更する

   CSSの範囲を限定する

   リストのブラウザの初期値

   リンク色を変更する

   リンクの下線を消す

   ブロックレベル要素とインラインレベル要素

   メインビジュアルの配置と装飾

   画像を文章の左側に寄せる

7. さまざまなデバイス表示を考慮しよう

   ブラウザ幅を変えて確認する

   画像の横幅を調整する

   コンテンツ幅の上限を設定する

   スマートホンの表示領域を指定する

   デバイスを横に持ったときの表示

8. サイトを公開しよう

   レンタルサーバーを契約しよう

   ドメインってなんだろう？

   FTPクライアントのインストール

   FTPクライアントを利用する

   公開サイトを確保する

付録

• 画像サイズとトリミング
• ページを増やす
• デザインバリエーション

本書の公式サイトからはレッスンすべてのデータとサンプルサイトを見ることができます。まんがも一部掲載されています。

HTML/CSS入門教室 公式サイト

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

HTML/CSS入門教室 サンプルサイト

最後に、作者様からメッセージ。

この本は、特に次のことに気をつけて書いています。

1. どんなPC操作レベルの方が読んでも、なるべく途中で挫折しない
2. ウェブサイト制作を通して、「学習すること」自体を楽しんでもらいたい

週末の2日間、もしくは毎日1,2時間、しっかり読めば読むだけHTMLとCSSの基本を正しく理解でき、使いこなせるようになると思います。
初心者の人やWeb制作の新人さんに特にオススメします！

献本の御礼

最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス