【仕事】HTML5/CSS3モダンコーディング【スキル】

前回のブログで『HTML&CSSとWebデザインが１冊できちんと身につく本』を紹介しました。

HTMLとかCSSとか単体で勉強するんじゃなくて、デザインも含めて勉強したい、という人向けにご紹介しました。

実際に作ってみると、
・フルスクリーン
・シングルカラム
・２カラム
・グリッド
といったレイアウトのパターンが学べてかつ
・レスポンシブデザイン
・問い合わせフォーム
・表や地図の埋め込み
といったことまで学べる本になっていました。

お得感のある本でした。

今回ご紹介する本も、同じような本です。

以下の３つのレイアウトを学ぶことができる本です。
・スタンダード
・グリッド
・シングル

本のタイトルは『HTML5/CSS3モダンコーディング』です。

本記事の内容
・本の紹介
・実際にどのような知識とスキルが得られるのか
・どうしたらよいか？

■本の紹介

一言でどのような本かと言うと、
・HTML5とCSS3を学びたい方を対象
・実際のWebページを作成
・３つのレイアウトを作成
・各機能のわかりやすい解説
といった特徴があります。

PART1　スタンダードレイアウト
いわゆるWebサイトに一番多く見られるベーシックなレイアウト、つまりスタンダードなレイアウトについて学ぶパートです。

ここで学ぶことができるのは・・・
・HTML5の新要素
・アウトライン
です。

PART2　グリッドレイアウト
ブラウザの横幅に合わせて表示されている内容の箇所が自動で移動するという可変のグリッドレイアウトについて学ぶパートです。
グリッドレイアウトと言われても、きっとピンとこないですよね。
見てもらった方が言葉で説明するよりも視覚的に一瞬で理解できると思いますので、後ほど掲載するURLで確認してみてください。

ここで学ぶことができるのは・・・
・可変グリッドレイアウトライブラリ
・CSSアニメーション
です。

PARET3　シングルページレイアウト
段組みがされていない一つのページで構成されているページで、スマートフォンにも対応したシングルレイアウトについて学ぶパートです。
いわゆるレスポンシブデザインといわれるレイアウトですね。
PCで見る時とスマートフォンで見る時でレイアウトが変わるページですね。

ここで学ぶことができるのは・・・
・レスポンシブWebデザイン
・Webフォント
です。

これら３つのレイアウトをそれぞれのレイアウトで用いられている技術の解説とともに、実際にコーディングをして作ってみて学ぶ、という構成になっています。

実際に手を動かしてコーデイングをすることによって、理解が深まりスキルとしても身につくという訳です。

前回もお伝えしましたが、この本に載っている３つのレイアウトのファイルをダウンロードすることができますが、コピペしてできた！としないことです。

間違ってもよいので、一から一文字ずつ自分でキーボードをたたいてプログラムを作っていきましょう。

本の構成は以下のようになっています。

Part0　イントロダクション
Part1　スタンダードライアウト
Part2　グリッドレイアウト
Part3　シングルページレイアウト
APPENDIX

■実際にどのような知識とスキルが得られるのか

この本を通して得られる知識とスキルは以下のようなものです。
１．Google Chrome のデベロッパーツールの使い方
２．HTML(HyperText Markup Language)の構成の理解
３．CSS(Cascading Style Sheets)の様々な機能
４．各レイアウト内での凝ったデザインの使い方
５．レスポンシブデザインの対応

前回の本もとてもわかりやすかったのですが、今回のこの本もとてもわかりやすいです。

特にわかりやすいのは、各レイアウトについての特徴やどのように構成されているのかといった部分を各レイアウトの最初に解説していることです。

よくあるのは、機能の説明ばかりになってしまう本です。

なんでもそうですが、全体を理解・把握せずに細部にだけフォーカスしてしまうと、なんだかよくわからないという結果になってしまいます。

この本は最初に全体像を解説し、順番に少しずつ詳細の説明・解説になっているのでスッと頭に入ってきます。

コーディングに関してもいきなり全部の内容を見せて説明せず、まずはベースとなる部分を記載して解説し、その次に各部分の解説を一つ一つしていくので、とてもわかりやすい構成になっています。

一度にすべてを理解することは難しいとは思いますが、じっくり時間をかけて読み込んでコーデイングしていけば、ちゃんと理解しちゃんとスキルが身につくと思います。