HTMLとCSSの現在のテクニックに焦点を合わせて、基本からしっかり身につけることができる良書
Post on:2017年5月12日
Web制作の現場で必要とされるHTMLとCSSを基本からしっかり身につけることができるオススメの本を紹介します。
HTMLとCSSの基本から、レスポンシブ対応ページの実装まで、現場で実際に使われているテクニックを学ぶことができます。


本書はHTMLとCSSの業務に携わりたい、本格的に勉強したい人向けの入門書です。知識ゼロの人でもしっかり学ぶことができ、コーダーとしての知識を見つけることができます。
デザイナーやディレクターがHTMLやCSSの理解を深めるためにも役立ちます。
Kindle版は値段が少し安く、お得です。
では、そんな本書の中身を紙面のキャプチャで少しだけご紹介。

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

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

基礎知識の解説だけではなく、作業手順やフローについても解説されているので、コーダーの業務としても役立つ知識が多いです。
本書の中身をもう少し見てみましょう。

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

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

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

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

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

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

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

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

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

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

FacebookやTwitterなどのソーシャルサービス、Googleマップなどとの連携も一通り学ぶことができます。
HTML+CSSワークショップの目次
-
- Webサイトを制作する前に
- Webサイトを作る業務の流れ
- Webサイト制作にはどんな人が関わるのか?
-
- Webサイトを制作する準備
- HTMLとCSSを書くのに必要なもの
- コンピューターと会話しよう
- Bracketsをインストールしよう
-
- HTMLとCSSの役割を理解する
- HTMLの基本を学ぶ
- HTMLファイルの基本構造
- CSSの基本構造
- CSSのセレクタを理解しよう
- 値につける単位と色の指定方法
- CSSの適用方法とセレクタの優先順位
-
- HTMLでマークアップを行う
- マークアップをはじめてみよう
- 「見出し」を意味するh1〜h6要素
- p要素で「段落」を指定する
- Webブラウザで表示してみよう
- 囲まないタグ「空要素」
- 画像を意味するimg要素
- リストを作るul要素・ol要素
- 表組みを作るtable要素
- a要素でリンクを設定してみよう
- head要素内に記述する要素
- HTMLのコメント
-
- CSSで見た目を制御する
- CSSのリセット
- 文字の見た目を制御する
- 画像の見た目を制御する
- リンクテキストの見た目を制御する
- 背景を制御する
- 余白を制御する
- リストの見た目を制御する
- テーブルの見た目を制御する
- CSSのコメント
-
- HTMLでWebページの構造を作る
- ブロックレベルとインライン
- HTML5で登場した考え方
- HTMLで文書構造を作る
- 構造を作るHTMLを書いてみよう
-
- CSSでレイアウトを制御する
- Webページのレイアウトの基本
- ページ全体のレイアウトを調整する
- CSSで段組みを作る
- floatプロパティを使うレイアウトの注意点
- positionプロパティで要素をレイアウトする
-
- 実践:Webサイトを作る
- HTMLで共通部分の中身を作る
- HTMLでメインコンテンツを作る
- CSSで共通部分の見た目を調整する
- CSSでトップページの見た目を調整する
-
- 実践:問い合わせフォームを作る
- フォームに関するHTMLの要素
- HTMLでフォームの構造を作る
- CSSでフォームの見た目を調整する
-
- 応用:現場の技術を取り入れる
- Webブラウザの表示の違いを制御する
- 表現の幅を広げるWebフォント
- レスポンシブWebデザインの基本知識
- Webアクセシビリティの基本と考え方
-
- 応用:JavaScriptで動きを表現する
- JavaScriptの基本と特徴
- JavaScriptで画像をスライドさせる
-
- 応用:SNSや他サービスとの連携
- GooleマップをWebページに埋め込む
- Facebookのページプラグインを表示する
- Facebook・Twitterのシェアリンクを設定する
HTMLやCSSの本は数多く、出版されています。中には内容が高度で、挫折してしまった人もいるかもしれません。
本書は、そういった高度な専門書を理解するための基礎知識もしっかり身につけることができると思います。
献本の御礼
最後に、献本いただいたMdNコーポレーションの担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors