HTML5とCSS3の実用的なテクニックが丁寧に丁寧に解説されたウェブ制作に真剣に取り組みたい人にオススメの本 -HTML/CSS デザインの教科書

ウェブサイトの制作時によく使用される実践的なテクニックの一つ一つが丁寧に解説された「HTML/CSS デザインの教科書」を紹介します。

最新の知識をおさえつつ、基本を正しく理解し、しっかり身につくオススメの本です。

本のキャプチャ

一つ一つの手順をなんのために行うのかが詳しく解説されているので、初心者にもしっかり理解でき、経験者でもあやふやだったことがスッキリすると思います。

本のキャプチャ

作りながら学ぶ HTML/CSS デザインの教科書
[Amazonでみる]
[楽天でみる]

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

本書は本日発売!
書店で手にとる時はパラパラ見るのではなく、一つの章をじっくり見てみてください。

下記は本書のサンプルサイト。
見た目は非常にシンプルなデザインですが、基本的な知識がぎっしり詰まっており、コードも非常に美しいです。

サイトのキャプチャ

サンプルはオンラインで公開されています。
URLとID/PWも掲載していいですよ、と著者の方に言われましたが、書籍を購入した人の楽しみが減ってしまうため、あえて掲載しないことにしました。

紙面のキャプチャで、中身を少しだけご紹介。
全ページカラー対応も嬉しいポイントですね。

本のキャプチャ

本書はウェブサイトを作成する中で、特にHTMLとCSSに重点をおいて解説されています。他にも画像のスライス、主要各ブラウザでの調整方法なども。

本のキャプチャ

1章は作業の準備、まずは自分にあったエディタを見つけるのは大切ですよね。
それぞれの設定なども比較できるので、検討の材料に。

本のキャプチャ

2章からはHTML。
ページの全体構造を把握し、タグの意味に基づいたマークアップを始めます。

本のキャプチャ

この本の特長の一つはコラムが多いこと!しかも全部タメになるものばかりです。正しい文章構造を形成する意味、この「なぜなのか」を知ると理解が深まります。

本のキャプチャ

HTML5の新要素などは通常解説以外にもより詳しく丁寧な解説があります。

本のキャプチャ

間違いやすいHTMLの使い方も実例とともに、それがなぜ間違いなのかが分かります。

本のキャプチャ

3章はいよいよCSS。

本のキャプチャ

見出しのバリエーションなど、実用的な定番のテクニックも満載。

本のキャプチャ

CSSで一番困るのが各ブラウザでの実装。各ブラウザで最適に見えるよう調整していきます。ここらへんの解説も単にこうしなさい、ではなく、ピクセル単位で本当に丁寧に一つ一つ調整していく手順が書かれています。

本のキャプチャ

今まではCSS Resetを多く見かけましたが、最近はNormalize.cssが多くなりましたね。

本のキャプチャ

4章は画像のスライス、5章からいよいよページの作成です。
ここから実用度が更にアップしていきます。

本のキャプチャ

floatのクリアには何を使ってますか? clearfix or overflor:hidden; それぞれの使い方と利点と欠点を覚えておきましょう。

本のキャプチャ

ナビゲーションなどの各エレメントの実装も本当に丁寧に解説されています。しかも無駄に丁寧ではなく、必要な知識を漏れなくです。

本のキャプチャ

コラムでは一つのエレメントに複数のスタイルを適用した際、どのスタイルがどの部分なのか初心者にも分かりやすい解説があります。

本のキャプチャ

この5章から7章まではページ作成で、ページの共通部分から作り込み、トップページを作り、下層ページを作り、と実制作でのフローのようなチュートリアルになっています。

本のキャプチャ

8章ではjQuery, Google Mapsやお問い合わせフォームなど、ウェブサイトでよく利用されるものがピンポイントで紹介されています。

本のキャプチャ

8章は数は少ないですが、解説は充実。jQueryのプラグインも設置方法だけでなく、オプションの使い方まで詳しい解説があります。

本のキャプチャ

9章はサイトの公開と仕上げ。各ソーシャルサービスのボタン設置をはじめ、アクセス解析の導入、各ブラウザでの検証と古いIEへの対応方法など。

HTML/CSS デザインの教科書の目次

  1. はじめる前に
    ウェブサイト制作のための準備
    代表的なブラウザ
    テキストエディタを選ぼう
  2. HTMLファイルを作成しよう
    HTMLの基本
    HTMLタグの意味に基づいてマークアップしよう
    HTMLのアウトラインを理解しよう
  3. CSSで装飾しよう
    CSSの基本
    色を変更しよう
    罫線と余白を調整しよう
    リストと表を装飾しよう
    さまざまなブラウザで確認しよう
  4. 画像を編集し、HTMLで表示しよう
    ウェブページ用の画像を作成しよう
    画像を挿入しよう
  5. 共通部分の作成とレイアウト
    ヘッダとフッタを挿入しよう
    ページをレイアウトしよう
  6. リンクを設定し、ナビゲーションを作りこもう
    リンクを設定しよう
    ナビゲーションを作りこもう
  7. 各ページを作成しよう
    ページを複製しよう
    一覧ページをつくろう
    その他の下層ページをつくろう
    トップページをつくろう
    タイトルと概要をつける
  8. サイトに動きをつけよう
    スライドショーをつくろう
    地図を配置しよう
    お問い合わせフォームを設置しよう
  9. サイトの公開と仕上げ
    サイトを公開しよう
    最終チェックをしよう
    ソーシャルサービスのボタンの設置
    アクセス解析を導入しよう

この本をマスターしていれば、どこの制作会社にいっても通用するレベルだと思います。少なくとも僕が採用担当だった前職では、即採用です。大切なのはテクニックだけではなく、基本を正しく理解できていること!

本のキャプチャ

作りながら学ぶ HTML/CSS デザインの教科書
[Amazonでみる]
[楽天でみる]

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

献本の御礼

最後に、献本いただいた作者さまに御礼申し上げます。

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

top of page

©2017 coliss