HTML5とCSS3を職として身につけたい人が最初に読んでほしいオススメの本 -HTML5+CSS3の教科書

HTMLとCSSはWeb制作の中では敷居が低く、あまり詳しくなくてもWebページやブログなどを作成することができます。しかし職として考えた時は、必要な知識をしっかりと身につけたいものです。

HTMLってそもそも何なのか、どうして正しくタグをつける必要があるのか、CSSを使う意味は何？ といった基本から、実装でなぜこのタグを使うのかこういうテクニックを使うのかといったことまで、必要な正しい知識をしっかりとマスターできるコーディングをまじめに取り組みたい人にオススメの本を紹介します。

書店に並んでいる多くのHTML5とCSS3の書籍の中から自分にあった本を探す時は、必ずこの本も加えて検討してみてください。

著者は大藤 幹氏、この方のHTML, CSS本は本当にハズレがないです。もう絶版ですが「CSSプロフェッショナル・スタイル」あたりからお世話になっています。

Kindle版は、お値段がちょっとお安めです。

• よくわかる HTML5+CSS3の教科書 第2版 -Kindle版

本書はずっと使える力をチュートリアルで身につけるもので、初心者用にありがちなHTMLをちょっと書いて、次にCSSへ進むといった退屈な勉強法ではなく、HTMLとCSSの同時進行で、学んだ内容をすぐに使う実践形式になっています。
ご自身のセミナーの受講生たちのFBも多数取り入れているそうで、マークアップ教室の教材としても利用できます。

本書の構成

そんな本書の中身を紙面のキャプチャで少しだけご紹介。

1章はさらっと準備編。HTMLやCSSに適したエディタにはどんなのがあるか、どんな機能を備えているのが便利なのか、現役の人も一度確認してみてもいいですね。

2, 3章ではHTMLとCSSの基礎知識。チュートリアルとしては簡単な内容ですが、非常に大切なこととがたくさん書かれています。僕は現役時代に数多くのマークアップの面接を行ってきましたが、スキルを見る際はこの章にあるような内容を身につけているかどうかに大きなウエイトを置いていました。

4章からは実際にWebページのレイアウトやエレメントを作成していきながら、学んでいきます。HTML/CSSは2014年3月の段階で最新のものです。

HTML5自体を学ぶのにも適しています。HTML5になって新しく登場した要素、XHTMLから変更になった要素など、しっかりとした理解した上で使用しましょう。

実務に役立つノウハウも満載です。キャプチャはマージンが隣接している場合のボックスのレイアウト。それぞれのプロパティがどのように機能し、どのように描画されるか、そして期待通りに実装するためにはどのようにすればよいのか、明確に解説されています。
なぜこうなるのかという仕組みを理解していると、未知の問題にあたった時も対応ができると思います。

ブラウザの高さいっぱいに表示したいけどうまくいかない、、、仕組みを理解していればすぐに解決します。

初心者用だと実務でそれ使わないっていうサンプルが多くなりがちですが、レスポンシブ対応で背景をフルスクリーン表示させるなど、実用的なサンプルが多いです。キャプチャはレスポンシブ対応で、飛行機と背景がサイズによって異なる位置に表示されています。

ボックスのアウトラインって、ボーダーとは異なり、ボックスの一部ではなくボックスの上に描画されます。こういった仕組み的なことを一つ一つ覚えておくと、必ず役に立ちます。

CSS3アニメーションも基本からしっかり身につければ、難しいことは何一つありません。

最後の12章ではここまで学んだことを組み合わせてページをつくります。
マークアップする前には、このページの概要を理解するというのが非常に大切です。むしろ一番のお楽しみという人も少なくないでしょう。

ここまで誌面のコードを紹介してきませんでしたが、各章ともに詳しいコードの説明ももちろんあります。どのコードが何をしているのか、どこを変更するとよいのか、どしてそこを変更するのか、など実装のロジックが分かるようになっています。
コードを書いて、こうなりました！ではなく、なぜこうなるのかも理解していれば本物です。

実装のポイントも説明図が添えてあり、確実に身になると思います。

HTML5+CSS3の教科書 第2版の目次

1. はじめる準備

   インターネットとサーバーについて

   本書で使用するソフトウェアについて

2. オリエンテーション

   HTMLの役割、CSSの役割

   HTMLのタグをつけてみよう！

   CSSを使ってみよう！

3. 文法的なカタい話

   HTMLのタグを正しくつける意味

   HTMLの基礎知識

   HTMLのバージョンについて

   CSSの基礎知識

   CSSのバージョンについて

4. ページ全体の枠組み

   HTMLの全体構造

   CSSの組み込み方

   グローバル属性

   背景を指定する -1

5. テキスト

   テキスト関連の要素

   色の指定方法

   テキスト関連のプロパティ

6. CSSの適用先の指定方法

   よく使う主要なセレクタ

   その他のセレクタ

   セレクタの組み合わせ方

   指定が競合した場合の優先順位

7. ページ内の構造

   基本構造を示す要素

   画像・動画・音声関連要素

   ボックス関連プロパティ

   背景を指定する -2

   配置方法を指定するプロパティ

8. ナビゲーション

   ナビゲーションに関連する要素

   リスト関連のプロパティ

   表示形式を変えるプロパティ

   ナビゲーションの作り方

9. フォームとテーブル

   フォーム関連の要素

   フォーム関連のプロパティ

   テーブル関連の要素

   テーブル関連のプロパティ

10. その他の機能とテクニック

    その他の要素

    その他のプロパティ

    clearfixについて

    メディアクエリ

11. 変形とアニメーション

    トランスフォーム関連プロパティ

    トランジション関連プロパティ

    アニメーション関連プロパティ

12. ページをまるごと作ってみよう

    サンプルページの概要を理解する

    まずはマークアップから

    ページ全体の初期設定と枠組みをつくる

    ナビゲーションとヘッダ

    サイドバーとフッタ

    IE6対応へのヒント

• コラム

  大文字と小文字の区別

  HTML4.01とXHTML1.0のDOCTYPE宣言

  CSSファイルの文字コードの指定方法

  CSSの中にさらに別のCSSを読み込む

  背景画像のURLについて

  ページ内の特定の場所にリンクする

  値の継承について

  「!important」はユーザスタイルシートでも使用できる

  HTML5の新要素を古いIEに認識させる方法

  widthとheightの発音

  Firefox 3.6以前に対応させる際の注意

  数値が0のときは単位を省略できる

  絶対配置による段組み

  文字コードを指定しているのに文字化けする!?

  dl要素はもともとは「定義リスト」だった!?

  行頭記号を画像にすると位置がずれる!?

  仕様上はもっと多くの部品が用意されている!?

  textarea要素にbox-shadowプロパティが適用されない現象

• 巻末資料

  HTML5の要素の分類

  HTML5の要素の配置のルール

本書のターゲットは初心者をはじめ本格的にHTMLとCSSに取り組もうとしている人向け、今そして将来役立つスキルを楽しみながら学べる構成になっています。
「しっかりとしたコーディングの知識を身につけたい！」という人にオススメです。

献本の御礼

最後に、献本いただいたマイナビの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス