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

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

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

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

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

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

サンプルはオンラインで公開されています。
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. サイトの公開と仕上げ

   サイトを公開しよう

   最終チェックをしよう

   ソーシャルサービスのボタンの設置

   アクセス解析を導入しよう

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

献本の御礼

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

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

• お問い合わせ｜コリス