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

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

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

マンガもあるよ!本の表紙

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

マンガもあるよ!

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

本のキャプチャ

2日で楽しく身につく
HTML/CSS入門教室
[Amazonでみる]
[楽天でみる]

著:
高橋 朋代、森 智佳子
出版社:
SBクリエイティブ
発売日:
2016/3/25

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制作の新人さんに特にオススメします!

本のキャプチャ

2日で楽しく身につく
HTML/CSS入門教室
[Amazonでみる]
[楽天でみる]

著:
高橋 朋代、森 智佳子
出版社:
SBクリエイティブ
発売日:
2016/3/25

献本の御礼

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

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

top of page

©2017 coliss