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

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

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

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

本のキャプチャ

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

本のキャプチャ

よくわかる
HTML5+CSS3の教科書 第2版
[Amazonでみる]
[楽天でみる]

著:
大藤 幹
出版社:
マイナビ
発売日:
2014/5/27

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に取り組もうとしている人向け、今そして将来役立つスキルを楽しみながら学べる構成になっています。
「しっかりとしたコーディングの知識を身につけたい!」という人にオススメです。

本のキャプチャ

よくわかる
HTML5+CSS3の教科書 第2版
[Amazonでみる]
[楽天でみる]

著:
大藤 幹
出版社:
マイナビ
発売日:
2014/5/27

献本の御礼

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

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

sponsors

top of page

©2018 coliss