HTMLとCSSの現在のテクニックに焦点を合わせて、基本からしっかり身につけることができる良書

Web制作の現場で必要とされるHTMLとCSSを基本からしっかり身につけることができるオススメの本を紹介します。

HTMLとCSSの基本から、レスポンシブ対応ページの実装まで、現場で実際に使われているテクニックを学ぶことができます。

本書はHTMLとCSSの業務に携わりたい、本格的に勉強したい人向けの入門書です。知識ゼロの人でもしっかり学ぶことができ、コーダーとしての知識を見つけることができます。
デザイナーやディレクターがHTMLやCSSの理解を深めるためにも役立ちます。

Kindle版は値段が少し安く、お得です。

• HTML+CSSワークショップ（Kindle版）

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

本書はオールカラーで、全431ページ。けっこう分厚く、サンプルのコードが非常に多いのが大きな特徴です。

知識ゼロでも基本からしっかり学ぶことができ、現場で今使用されているテクニックも非常に分かりやすく解説されています。

基礎知識の解説だけではなく、作業手順やフローについても解説されているので、コーダーの業務としても役立つ知識が多いです。

本書の中身をもう少し見てみましょう。

本書はワークショップ形式で、一つのレッスンを読みながらコードを書き進めて学ぶことができます。

解説は非常にやさしく、分かりやすく、現場で必要とされる知識もいつの間にか身についてしまうと思います。

考え方など、基礎知識だけではなく、踏み込まれたところもじっくり解説されています。

本書の後半ではサンプルサイトを元に、今まで学んだHTMLとCSSをベースに更に実践的なテクニックを学んでいきます。

ページを作成する時は、基本となるテンプレートを作成し、そこから展開していきます。

コンテンツの幅をどうするのか、ページ全体を左端・中央のどこに配置するのか、ブロック間の余白を確保したり、レイアウトの調整を行います。

CSSの実装にもフローがあります。最初はヘッダやフッタ、ナビゲーションといった共通部分から作成していきましょう。

そして、トップページや配下ページのページごとの見た目を調整します。

フォームの実装が苦手という人も多いと思います。

HTMLとCSSだけでなく、Webフォントやアクセシビリティについても基本がしっかり解説されています。

FacebookやTwitterなどのソーシャルサービス、Googleマップなどとの連携も一通り学ぶことができます。

HTML+CSSワークショップの目次

0. Webサイトを制作する前に

   Webサイトを作る業務の流れ

   Webサイト制作にはどんな人が関わるのか？

1. Webサイトを制作する準備

   HTMLとCSSを書くのに必要なもの

   コンピューターと会話しよう

   Bracketsをインストールしよう

2. HTMLとCSSの役割を理解する

   HTMLの基本を学ぶ

   HTMLファイルの基本構造

   CSSの基本構造

   CSSのセレクタを理解しよう

   値につける単位と色の指定方法

   CSSの適用方法とセレクタの優先順位

3. HTMLでマークアップを行う

   マークアップをはじめてみよう

   「見出し」を意味するh1〜h6要素

   p要素で「段落」を指定する

   Webブラウザで表示してみよう

   囲まないタグ「空要素」

   画像を意味するimg要素

   リストを作るul要素・ol要素

   表組みを作るtable要素

   a要素でリンクを設定してみよう

   head要素内に記述する要素

   HTMLのコメント

4. CSSで見た目を制御する

   CSSのリセット

   文字の見た目を制御する

   画像の見た目を制御する

   リンクテキストの見た目を制御する

   背景を制御する

   余白を制御する

   リストの見た目を制御する

   テーブルの見た目を制御する

   CSSのコメント

5. HTMLでWebページの構造を作る

   ブロックレベルとインライン

   HTML5で登場した考え方

   HTMLで文書構造を作る

   構造を作るHTMLを書いてみよう

6. CSSでレイアウトを制御する

   Webページのレイアウトの基本

   ページ全体のレイアウトを調整する

   CSSで段組みを作る

   floatプロパティを使うレイアウトの注意点

   positionプロパティで要素をレイアウトする

7. 実践：Webサイトを作る

   HTMLで共通部分の中身を作る

   HTMLでメインコンテンツを作る

   CSSで共通部分の見た目を調整する

   CSSでトップページの見た目を調整する

8. 実践：問い合わせフォームを作る

   フォームに関するHTMLの要素

   HTMLでフォームの構造を作る

   CSSでフォームの見た目を調整する

9. 応用：現場の技術を取り入れる

   Webブラウザの表示の違いを制御する

   表現の幅を広げるWebフォント

   レスポンシブWebデザインの基本知識

   Webアクセシビリティの基本と考え方

10. 応用：JavaScriptで動きを表現する

    JavaScriptの基本と特徴

    JavaScriptで画像をスライドさせる

11. 応用：SNSや他サービスとの連携

    GooleマップをWebページに埋め込む

    Facebookのページプラグインを表示する

    Facebook・Twitterのシェアリンクを設定する

HTMLやCSSの本は数多く、出版されています。中には内容が高度で、挫折してしまった人もいるかもしれません。
本書は、そういった高度な専門書を理解するための基礎知識もしっかり身につけることができると思います。

献本の御礼

最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。

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

• お問い合わせ｜コリス