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

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

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

誌面のキャプチャ本の表紙

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

本の表紙

HTML+CSSワークショップ
手を動かして学ぶWebデザイン
[Amazonでみる]
[楽天でみる]

著者:
藤川 麻夕子
出版社:
MdNコーポレーション
発売日:
2017/4/28

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

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

誌面のキャプチャ

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

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

  1. Webサイトを制作する前に
    Webサイトを作る業務の流れ
    Webサイト制作にはどんな人が関わるのか?
  2. Webサイトを制作する準備
    HTMLとCSSを書くのに必要なもの
    コンピューターと会話しよう
    Bracketsをインストールしよう
  3. HTMLとCSSの役割を理解する
    HTMLの基本を学ぶ
    HTMLファイルの基本構造
    CSSの基本構造
    CSSのセレクタを理解しよう
    値につける単位と色の指定方法
    CSSの適用方法とセレクタの優先順位
  4. HTMLでマークアップを行う
    マークアップをはじめてみよう
    「見出し」を意味するh1〜h6要素
    p要素で「段落」を指定する
    Webブラウザで表示してみよう
    囲まないタグ「空要素」
    画像を意味するimg要素
    リストを作るul要素・ol要素
    表組みを作るtable要素
    a要素でリンクを設定してみよう
    head要素内に記述する要素
    HTMLのコメント
  5. CSSで見た目を制御する
    CSSのリセット
    文字の見た目を制御する
    画像の見た目を制御する
    リンクテキストの見た目を制御する
    背景を制御する
    余白を制御する
    リストの見た目を制御する
    テーブルの見た目を制御する
    CSSのコメント
  6. HTMLでWebページの構造を作る
    ブロックレベルとインライン
    HTML5で登場した考え方
    HTMLで文書構造を作る
    構造を作るHTMLを書いてみよう
  7. CSSでレイアウトを制御する
    Webページのレイアウトの基本
    ページ全体のレイアウトを調整する
    CSSで段組みを作る
    floatプロパティを使うレイアウトの注意点
    positionプロパティで要素をレイアウトする
  8. 実践:Webサイトを作る
    HTMLで共通部分の中身を作る
    HTMLでメインコンテンツを作る
    CSSで共通部分の見た目を調整する
    CSSでトップページの見た目を調整する
  9. 実践:問い合わせフォームを作る
    フォームに関するHTMLの要素
    HTMLでフォームの構造を作る
    CSSでフォームの見た目を調整する
  10. 応用:現場の技術を取り入れる
    Webブラウザの表示の違いを制御する
    表現の幅を広げるWebフォント
    レスポンシブWebデザインの基本知識
    Webアクセシビリティの基本と考え方
  11. 応用:JavaScriptで動きを表現する
    JavaScriptの基本と特徴
    JavaScriptで画像をスライドさせる
  12. 応用:SNSや他サービスとの連携
    GooleマップをWebページに埋め込む
    Facebookのページプラグインを表示する
    Facebook・Twitterのシェアリンクを設定する

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

本の表紙

HTML+CSSワークショップ
手を動かして学ぶWebデザイン
[Amazonでみる]
[楽天でみる]

著者:
藤川 麻夕子
出版社:
MdNコーポレーション
発売日:
2017/4/28

献本の御礼

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

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

top of page

©2017 coliss